I just noticed the new design for Top Questions at Home page.
I feel that the previous design was much better. The new question statistic is too small and it's not easy to see all relevant question information quickly.
I have a few remarks regarding the details in the left-most column of the list-items.
That marker is big, bold, in full-text and in a yellow frame. That's way too much for something that, in regards to one question, is optional.
Also, it being there or not provides a different layout for the rest of the statistics. The statistics should be at a consistent place from question to question. When the "Watched" marker is absent, everything seems aligned from the top. When the "Watched" marker is present, the whole column on the left seems to be height-centered.
Also, its presence makes questions that can fit on one line take much, much more place, including useless whitespace.
In short, it makes two questions not identical visually, but not by a bit, but by a lot!
A better idea, is that given that "Watched" is linked to tags, put that info in the tags list, just like the collectives.
When there is at least one answer, my eye catch the information quite easily. When there are no answers, my eye doesn't see that information until very late. Why? It should be the opposite. If there are no answers, you should try to tell me that I should check that question so that I can check if I should answer it, or handle it in any way SO usually handles questions.
When there are no answer, show it in a similar way than when there is at least one. Not especially in green, if you don't want, but keep the same layout in yellow, in red, whatever.
I've created a userscript called LegacyQuestions that brings back the old design.
Here's what it looks like with the userscript:
Compared to without it:
I seem to be in the minority, but I personally think the new design is pretty nice. My only issue is that I find it a little confusing having the rep on the left side of the "asked" text.
It manages to read like "1 asked 41 mins ago", possibly because the spacing between the name and the rep is too large and the spacing between the rep and the "asked" text isn't large enough.
This problem would be exaggerated if you're new to the site and aren't familiar with rep.
In the same spirit as Legacy Questions userscript by Spectric, here are Stylus-based user styles for reverting the /questions/ list on Stack Overflow and Meta Stack Overflow back to the same look and feel as before, since that change recently landed in addition to the Top Questions page:
Stack Apps link: https://stackapps.com/questions/9324/stack-overflow-questions-design-reversion-to-pre-2022-layout
GitHub link: https://github.com/Tyler-H/SO-UserScripts/blob/master/Question%20List%20Redesign%20Fix%20(Desktop%20view)
Just give me the Stylus code:
@-moz-document url("https://meta.stackoverflow.com/questions"), url-prefix("https://stackoverflow.com/questions") {
/* Fixing display of stuff on /questions/ pages */
/* restoring font to Arial */
#mainbar, #mainbar a {
font-family: Arial, sans-serif !important;
}
/* remove the watched tag styles */
a.post-tag.s-tag__watched, a.post-tag.s-tag__watched:hover {
background-color: var(--theme-tag-background-color);
color: var(--theme-tag-color);
display: inline-block;
padding: .4em .5em;
}
a.post-tag.s-tag__watched::before {
position: static;
display: inline;
}
/* restoring the color and display of ignored posts so I don't feel colorblind when using Stack Overflow */
.s-post-summary__ignored .s-post-summary--meta, .s-post-summary__deleted .s-post-summary--meta {
filter: grayscale(0%) !important;
}
.s-post-summary__ignored .s-post-summary--stats-item:not(.is-deleted),
.s-post-summary__deleted .s-post-summary--stats-item:not(.is-deleted) {
filter: grayscale(0%) !important;
}
.s-post-summary__ignored .s-post-summary--content-title a.s-link {
color: var(--theme-question-title-color);
}
.s-post-summary__ignored .s-post-summary--content-title a.s-link:visited {
color: var(--theme-question-title-color-visited);
}
/* fixing the display of the question entries on the questions pages */
.s-post-summary {
margin-left: -24px;
padding-right: 0px;
}
.s-post-summary .js-post-summary-stats {
margin-right: 16px;
width: 58px;
}
/* Fixing the 'votes' box */
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:first-child {
width: 58px;
display: block;
white-space: normal;
color: var(--black-500);
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:first-child span:first-child {
display: block;
font-size: 17px;
text-align: center;
margin-right: 0px !important;
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:first-child span:last-child {
display: block;
font-size: 11px;
text-align: center;
}
/* Fixing the '# of answers' box */
.s-post-summary .s-post-summary--stats-item:nth-child(2) {
width: 58px;
margin-bottom: 8px;
display: block;
}
.s-post-summary .s-post-summary--stats-item:nth-child(2).has-accepted-answer svg {
display:none; /* no one needs a checkmark here */
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:nth-child(2) .s-post-summary--stats-item-number {
display: block !important;
font-size: 17px;
text-align: center;
padding-bottom: 0;
margin-right: 0px !important;
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:nth-child(2) .s-post-summary--stats-item-unit {
display: block;
font-size: 11px;
padding-top: 0px;
text-align: center;
}
.s-post-summary .js-post-summary-stats .s-post-summary--stats-item:nth-child(3) {
font-size: 11px;
text-align: center;
margin: 0 auto;
margin-top: 5px;
}
/* fixing the user cards that display at the bottom right */
.s-post-summary .s-user-card.s-user-card__minimal {
display: grid;
width: 185px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time {
display: flex;
order: 1;
height: 18px;
align-items: center;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time span.relativetime {
margin-left: 3px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a {
display: block;
order: 2;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a.s-avatar {
height: auto;
width: auto;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a div img.s-avatar--image {
width: 32px;
height: 32px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info {
display: block;
order: 3;
width: calc(100% - 40px);
margin-left: 8px;
height: 32px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info ul.s-user-card--awards {
height: 17px;
}
/* fixing the user cards that display at the bottom right */
.s-post-summary .s-user-card.s-user-card__minimal {
display: grid;
width: 185px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time {
display: flex;
order: 1;
height: 18px;
align-items: center;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card time span.relativetime {
margin-left: 3px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a {
display: block;
order: 2;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a.s-avatar {
height: auto;
width: auto;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card a div img.s-avatar--image {
width: 32px;
height: 32px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info {
display: block;
order: 3;
width: calc(100% - 40px);
margin-left: 8px;
height: 32px;
}
.s-post-summary .s-post-summary--content .s-post-summary--meta .s-user-card div.s-user-card--info ul.s-user-card--awards {
height: 17px;
}
}
Top Questions
which seems to be a selection of questions form topics I watch. As a result every question has this bigwatched
badge (it's the most prominent feature). Why?…it's not really a useful tag if every question is tagged. Certainly not the most important thing.