About
When Visual design changes to the review queues was introduced, the review overview page seemed to change to having a smaller font size on post number and very small avatars. I think the white space can be taken back, by:
- Making the post numbers larger.
- Make the avatars larger.
And also removing:
- The big onboarding box if it's not already dismissed.
- Redudant information under the title: "Help improve Stack Overflow by evaluating posts."
Screenshot
Before
After
Sites
The script only works for Stack Overflow, but can be expanded to any site by adding a @match
directive to the header:
// @match https://<siteurl>/review
Example for Super User:
// @match https://superuser.com/review
Code
Vanilla JavaScript:
// ==UserScript==
// @name Stack Review Queues Overview
// @description Make use of the empty space in the overview
// @namespace scratte-fiddlings
// @version 0.3
// @author Scratte (https://stackoverflow.com/users/12695027)
// @match https://stackoverflow.com/review
// @grant none
// ==/UserScript==
(function() {
'use strict';
const removeTitle = () => {
[...document.getElementsByClassName("s-page-title--description")]
.forEach(item => {
if (item.innerHTML.startsWith("Help "))
item.remove();
})
}
const removeOnboarding = () => {
document.querySelector(".js-review-onboarding-banner")?.remove();
}
const resizeAvatars = () => {
[...document.querySelectorAll(".gravatar-wrapper-16")]
.forEach(element => element.className = "gravatar-wrapper-32");
}
const setRightMargin = () => {
[...document.querySelectorAll(".ml16")]
// .forEach(element => element.style.marginRight = "42px");
.forEach(element => {
element.classList.remove("ml16");
element.classList.add("mr48");
});
}
const setFontSize = () => {
const editCSSFontSize = document.createElement("style");
editCSSFontSize.innerHTML = ".StackReviewQueuesOverviewCSSFontSize {font-size: 1.80rem;}";
document.body.appendChild(editCSSFontSize);
[...document.getElementsByClassName("flex--item ta-center fl-shrink0 wmn1")]
.forEach(wrapper => {
const postCount = wrapper.querySelector('.fs-body3');
if (!postCount)
return;
const { classList } = postCount;
classList.remove("fs-body3");
classList.add("StackReviewQueuesOverviewCSSFontSize");
});
}
// --- DoIt :) ---------------------------------------
removeTitle();
removeOnboarding();
resizeAvatars();
setRightMargin();
setFontSize();
})();
Platform
Should work with any user script manager & any browser running JavaScript.
Tested using Opera with Tampermonkey.
Contact
For bugs, please post here. Comments are fine too.