2

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

Before

After

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.

You must log in to answer this question.

Browse other questions tagged .