What sucks about the charts page is that these beatmaps are not linked using good ol' <a href>, but onclick events. So I can't middle-click them.
Now it looks like (split to multiple lines and indented for clarity by me):
What I want: (yes, you're right, it's ready and working code!)
And it needs just a tiny CSS fix:
However, if you insist to keep <a> looking like regular text and covering whole "box", this should do the trick (beware, not tested enough):
Go on and fix it. Please.
Now it looks like (split to multiple lines and indented for clarity by me):
<div class="beatmap" onclick="loadUrl('/s/12155')">
<img src="/images/map-thumb/12155"/>
<div class="details">
<div class="main"><b>The Gregory Brothers</b> - Auto-Tune the News #9</div>
<div class="mapped">mapped by <a href='/u/30655'>MetalMario201</a></div>
</div>
</div>What I want: (yes, you're right, it's ready and working code!)
<div class="beatmap">
<div class="details">
<div class="main">
<a href="/s/12155">
<img src="/images/map-thumb/12155"/>
<b>The Gregory Brothers</b> - Auto-Tune the News #9
</a>
</div>
<div class="mapped">mapped by <a href='/u/30655'>MetalMario201</a></div>
</div>
</div>
And it needs just a tiny CSS fix:
.top-maps .beatmap .details {width: 250px}(and removing cursor: pointer from .top-maps .beatmap, probably)However, if you insist to keep <a> looking like regular text and covering whole "box", this should do the trick (beware, not tested enough):
.top-maps .beatmap {position: relative}
.top-maps .beatmap .main a {position: absolute; color: black; text-decoration: none}Go on and fix it. Please.