make hiding avatar buttons on forums optional
Replies
I feel bad because it was my idea, and everyone seems to hate it. :P
I shared that code because it was the best I could do with CSS alone. I had another idea, but abandoned it since it needed some HTML changes to work, but if Keith is still working on it then maybe it's still an option.
Here's what I wanted to do originally:
To start with, here's what we have now. My monitor's resolution is 1920x1080, so "wide" is what I see when my browser window is fullscreen, and "narrow" is what I see when it's half that width. I normally play with two windows side-by-side, so I see the "narrow" version more often, and it takes up a lot of space, which is what I've been trying to fix.
Here's what I'd like to see happen, and I hope I'm not alone. The big thing is that when the browser window is narrower, the buttons collapse onto one line and only display the icons, which makes the whole thing much shorter -- and if you're playing on a small window, space matters. There's no more of the drop-down-type movement that people hate, and the text goes away but it could be made to display in a tooltip like the "ping" and "quote" buttons. So like if you hover over the achievements, you'd see this:
There's room for a few minor fixes here, too. You'll notice that I changed the icon for post likes to the "thumbs up" icon so there's no more confusion with there being two hearts. I think it would also be a good idea to have the achievement count link to users' achievement pages, and for the post count to link to users' post history (though I imagine some people might object to that for privacy reasons).
:)
PS, Here's the code I've been experimenting with:
SPOILER (click to toggle)
Quick disclaimer: The CSS doesn't really work on its own (without the HTML changes), so I don't suggest adding it to your Custom CSS.
The CSS:
/* wide screen /
all and (min-width: 1280px){
.stats a:after {
color: black;
content: attr(name);
font-size: 0.813em;
}
/ narrow /
all and (max-width: 1280px){
.stats .icon{margin: 0;}
.stats .label{width: 20px !important;} / anywhere from 20-35px is good here */
.stats br{display:none;}
}
The (really rough) HTML:
<div class="stats">
<div class="ui label has-tip"><a class="like-this" id="309297" name="439" title="439 Avatar Likes"><i name="liked-309297" class="icon heart"></i></a> </div>
<div class="ui label has-tip"><a class="like-this" id="1266101" name="0" title="0 Post Likes"><i name="liked-1266101" class="icon thumbs up"></i></a></div><br clear="all">
<div class="ui label has-tip"><a href="http://subeta.net/achievements.php/category/1/Speiro" name="1,339" title="1,339 Achievements"><i class="icon trophy"></i></a></div>
<div class="ui label has-tip"><a href="http://subeta.net/forums.php/recent/posts/309297" name="4,987" title="4,987 Posts"><i class="icon comment"></a></i></div>
</div>
Also, if you're Keith or another programmer, I'm sorry for butchering your code. :P I probably made some changes that wouldn't work in practice (like I re-purposed the "name" attribute, which may have been used for something else), but you know your code better than I do.
