20

As per the accepted answer on the recent design change announcement, it's clear that the old horizontal / column-based question stats layout is not making a return.

To facilitate custom styles that restore the previous layout, could SE possibly wrap the numbers in the votes, answers and views stats in a separate, innocuous HTML element? The old layout used to display the number in a larger font which made it much easier to visually scan.

For example, the current markup looks like this

<div class="s-post-summary--stats-item s-post-summary--stats-item__emphasized" title="Score of 0">
  0 votes
</div>
<div class="s-post-summary--stats-item" title="0 answers">
  0 answers
</div>
<div class="s-post-summary--stats-item " title="5 views">
  5 views
</div>

It is not possible to target the number within the text here. This could be resolved with a very minor change to the HTML structure

<div class="s-post-summary--stats-item s-post-summary--stats-item__emphasized" title="Score of 0">
  <span>0</span> votes
</div>
<div class="s-post-summary--stats-item" title="0 answers">
  <span>0</span> answers
</div>
<div class="s-post-summary--stats-item " title="5 views">
  <span>5</span> views
</div>

The new <span> elements could be given a class like s-post-summary--stats-item--number but it would not be necessary.

Additionally, to support custom styling even further, it would be great if the stats items could be identified by individual classes. For example

  • s-post-summary--stats-item--votes
  • s-post-summary--stats-item--answers
  • s-post-summary--stats-item--views
Improve this question
2
  • 2
    Honest question: Is this really that worthwhile a change? Parsing the innerText of a tag to pull out the number it contains is a trivial one liner in JavaScript (which, based on your profile, you already know quite well). I'm all for making life easier for those who dislike the new design, but is this actually a real hurdle that's holding anything back? Is it just for simplified userstyle support?
    – zcoop98
    Commented Feb 2, 2022 at 0:09
  • 13
    @zcoop98 for those wanting custom styles (CSS) only (as opposed to a userscript), yes.
    – Phil
    Commented Feb 2, 2022 at 0:22

1 Answer 1

Reset to default
12

In response to this request, we've added wrapping elements around both the number (with the s-post-summary--stats-item-number class) and the text (with the class s-post-summary--stats-item-unit). The svg icon for accepted answers remains unchanged. The current production implementation also has an atomic spacing class, but it should not be targeted as it will soon change. We also decided to formalize the implementation in the Stacks design system so these classes will not be accidentally classified as unnecessary and removed down the line.

Something to keep in mind is that these classes are currently only added to the three common stats (votes, answers, views) and will likely not be added to other stats that do not match the "{number} {unit}" format (such as bounties and status labels).

Improve this answer
1
  • 3
    Thanks Ben. Wish it didn't have to come down to userstyles to keep me (and at least 514 other concerned users) happy on the platform though
    – Phil
    Commented Feb 3, 2022 at 20:38

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .