Mod Browsing Overhaul Discussion

[pilonexyz]

Tweaked the internal mod page to be very close to the old UI.

Get the code here:

https://pixeldrain.com/u/3WxTA3nF

Quick fix for the file download tab colors, new code here:

https://pixeldrain.com/u/jafuitLQ

Edited Thursday at 08:00 PM by pilonexyz
Quick Fix replacement

[tpunk23]

"Prioritising the bits of feedback that are more useful to help us improve things." Sounds a hell of allot like a reworded. "Tell us what we want to hear." Yall think we are stupid don't ya? Jokes on you my vocab is bigger than the average smuck. The hypocrisy is fun to call out.

[Reaper864]

1 hour ago, pilonexyz said:

Tweaked the internal mod page to be very close to the old UI.

Get the code here:

https://pixeldrain.com/u/3WxTA3nF

 

ahh thank you! Works just fine! I had to use chat gpt because I didn't know how to install at first lol but I figured it out

[pilonexyz]

16 minutes ago, Reaper864 said:

 

ahh thank you! Works just fine! I had to use chat gpt because I didn't know how to install at first lol but I figured it out

Thanks!

I posted a quick fix update for file dowload tab colors here:

https://pixeldrain.com/u/jafuitLQ

[Glitchfinder]

44 minutes ago, tpunk23 said:

"Prioritising the bits of feedback that are more useful to help us improve things." Sounds a hell of allot like a reworded. "Tell us what we want to hear." Yall think we are stupid don't ya? Jokes on you my vocab is bigger than the average smuck. The hypocrisy is fun to call out.

While I'm not at all fond of the update, this is entirely disingenuous. They're prioritizing actionable, specific feedback over generic feedback. Even if it's things they won't actually change, the specific details in the posts they've been collating into these separate threads are useful information for them to have better access to rather than leaving it buried in a nearly two hundred page thread that is otherwise full of a lot of the same information repeated ad nauseam.

[Vouru]

  

6 hours ago, Ilithyn said:

Unfortunately it appears it is only available for Chrome and I refuse to use that browser on a manner of principle, so I guess I'm out of luck.

 

No, it's available for firefox as well.

[carpesangrea]

52 minutes ago, Glitchfinder said:

They're prioritizing actionable, specific feedback

What they say and what they do are two totally different things.

[Glitchfinder]

4 hours ago, carpesangrea said:

What they say and what they do are two totally different things.

They have been making changes, especially when people point out specific issues with the new UI. They're not going to revert the change. While I wish they would, that isn't on the table. So instead they're leaving this thread as a dumping ground for feedback like that and pulling feedback they can use to improve (or at least assess) the UI we're stuck with out of this thread and organizing it elsewhere.

Edit: If I wanted to be misinterpreted this badly I'd be making an account on Twitter rather than posting on Nexusmods. This response (and the rest of the conversation) are exactly what I meant when I said the discussion was disingenuous earlier. You guys are giving 2015 Tumblr a run for its money with how you moved the goalposts (and changed topic) so often that you left the soccer stadium and settled down in the hockey rink next door.

[Vouru]

Here is my take on pilonexyz's design, since I don't mind the mod browser as long as the rows are single colum and vertical instead of horizontal but I liked the changes to the mod pages themselves.

I don't have no fancy place to host the file so here is the style.

Spoiler

/* Global background wallpaper styling */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/images/default/bg_game_index.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1;
    filter: none;
}

/* =========================
   Mod Page UI Styles
   These styles apply only to the mod page (inside an element with class "modpage")
   ========================= */
.modpage {
    /* Import necessary fonts for the mod header */
    @import url('https://fonts.googleapis.com/css2?family=Cabin+Condensed:wght@400;500;600;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

    /* Hide the large game-name header found below the breadcrumbs */
    #mainContent nav:first-child + div {
        display: none;
    }

    /* Adjust vertical spacing for padding and margins */
    .pt-4, .pt-6, .py-4, .py-6 { padding-top: 0.5rem; }
    .pb-4, .pb-6, .py-4, .py-6 { padding-bottom: 0.5rem; }
    .pb-6 { display: none; }
    .mt-4, .mt-6, .my-4, .my-6 { margin-top: 0.5rem; }
    .mb-4, .mb-6, .my-4, .my-6 { margin-bottom: 0.5rem; }

    .pt-8, .py-8 { padding-top: 1rem; }
    .pb-8, .py-8 { padding-bottom: 1rem; }
    .pt-10, .py-10 { padding-top: 1.5rem; }
    .pb-10, .py-10 { padding-bottom: 1.5rem; }
    .mt-8, .my-8 { margin-top: 1rem; }
    .mb-8, .my-8 { margin-bottom: 1rem; }
    .mt-10, .my-10 { margin-top: 1.5rem; }
    .mb-10, .my-10 { margin-bottom: 1.5rem; }

    /* Additional vertical padding adjustments */
    .pt-20, .py-20 { padding-top: 1.5rem; }
    .pb-20, .pb-20 { padding-bottom: 1.5rem; }
    .pb-2 { padding-bottom: .1rem; }

    /* Set uniform spacing between elements */
    .space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; margin-bottom: 0.5rem; }
    .space-y-5 > :last-child, .space-y-6 > :last-child { margin-bottom: 0; }

    /* Mod list adjustments: reduce wasted vertical space */
    .group\/mod-tile {
        /* Remove enforced minimum height when specified */
        &.min-h-\[28rem\] { min-height: unset; }

        /* Reduce padding in the second child element */
        & > :nth-child(2) { padding-top: 0.2rem; padding-bottom: 0.2rem; }
        .py-2 { padding-top: 0.0rem; padding-bottom: 0.2rem; }
        .pt-2 { padding-top: 0.2rem; }

        /* Remove horizontal padding when not needed */
        .sm\:px-0 { padding-left: 0; padding-right: 0; }

        /* Set font properties for emphasis and color */
        .font-semibold { font-weight: 550; font-stretch: semi-condensed; }
        .text-danger-strong { --tw-text-opacity: 1; color: rgb(248 113 113/var(--tw-text-opacity)); }

        /* Remove dividing line between child elements */
        .divide-y > :not([hidden]) ~ :not([hidden]) {
            border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
        }

        /* Adjust mod title styling */
        .typography-body-xl {    
            font-size: 1.05rem;
            -webkit-line-clamp: 1;
            color: rgb(225 225 225/var(--tw-text-opacity));
            margin-top: 0.5rem;
            *font-family: Roboto, sans-serif;
            line-height: 1.35;
            font-stretch: 50%;
            font-weight: 600;
        }
        .typography-body-xl:hover {   
            -webkit-line-clamp: 3;
        }

        /* Styling for author, category, and time details */
        .typography-body-sm {
            font-size: 0.75rem;
            color: rgb(217 143 64/var(--tw-text-opacity));
            *font-family: Inter, sans-serif;
            font-weight: 500;
            font-stretch: condensed;  
            margin-bottom: 0.4rem;
        }

        /* Adjust description styling and background */
        .typography-body-md {
            line-height: 1.45;
            -webkit-line-clamp: 5;
            font-size: 0.90rem;
            color: rgb(177 177 177/var(--tw-text-opacity));
            font-family: Inter, sans-serif;
            font-weight: 300;
            font-stretch: normal;
            background-color: rgb(33, 33, 33);
        }  

        /* Hide the bottom endorsement/download info box */
        .min-h-8 { min-height: 1.5rem; display: none; color: rgb(177 177 177); }
    }

    /* Grid styling for mods and profile mods */
    .mods-grid, .profile-mods-grid { row-gap: 0.96rem; }
    .mods-grid { -moz-column-gap: 0.8rem; column-gap: 0.8rem; }
    .mods-grid { background-color: rgb(41, 41, 41); }
    .xs\:mb-10 { margin-bottom: 1.5rem; }

    /* Constrain container width for very wide screens */
    .next-container { width: min(max(90%, 2000px), 100%); }

    /* Title styling on the mod page */
    #featured h1 {
        /* Use a condensed font for a refined look */
        *font-family: 'Saira Condensed', 'Cabin Condensed', sans-serif;
        font-family: 'bebas_neuebook';
        font-weight: normal;
        margin-bottom: 0.5rem;
    }

    /* Tab and button styling */
    .tabcontent { position: relative; background: #414141; }
    ul.modtabs li:first-child a.selected { background: #414141; }
    ul.modtabs li a.selected, .tabcontent { background: #414141; }
    ul.modtabs li a {
        color: #f9f9f9;
        border-top: 0px solid var(--stroke-neutral-translucent-weak);
    }

    /* Alert label styling */
    span.alert {
        font-size: 11px;
        font-family: Roboto, sans-serif;
        background-color: #b4762c;
        color: rgb(177 177 177/var(--tw-text-opacity));
        font-weight: 700;
        margin-left: 5px;
    }
    .modtabs .alert { color: #f6eee5; }

    /* Button styles for tag toggles */
    a.btn.btnsmall.js-toggle, a.btn.btnsmall.popup-btn-ajax {
        font-size: 11px;
        padding: 5px 8px;
        display: inline-block;
        color: #fff;
        font-weight: 500;
        text-transform: uppercase;
        background-color: #d98f40;
        height: 1.6rem;
        border-radius: 0;
        padding-top: 0.35rem;  
    }
    ul.tags li a.btn, ul.tags li a.btn:visited {
        font-size: 11px;
        padding-top: 0.01rem;
        padding-bottom: 0.01rem;  
    }

    /* Header and icon styling */
    h2 { font-family: 'bebas_neuebook'; }
    .icon-plus, .icon-minus { padding-top: 0.1rem; }
    .flex-copy { margin-bottom: 0; }
    *.inline-flex .icon { margin-bottom: 1.0rem; }

    /* General tab content styling */
    .tabcontent {
        font-size: 16px;
        font-family: Roboto, sans-serif;
        letter-spacing: 0.3px;
        color: #f1f1f1;
    }

    /* Action button adjustments */
    #action-nmm a.btn.inline-flex, #action-manual a.btn.inline-flex {
        height: 2.2rem;
        margin-top: 0.1rem;
        padding-top: 0.1rem;
        padding-bottom: 0.1rem;
    }
    .icon-manual { margin-top: 0; }
    .btn.inline-flex .icon { display: flex; }
    .btn, a.btn, .btn:visited {
        font-size: 13px;
        font-family: Roboto, sans-serif;
        font-weight: 450;
        margin-bottom: 1.5rem;
        margin-top: 0.6rem;
        text-transform: uppercase;
        border-radius: 0;
    }
    a.btn.popup-btn-ajax {
        font-size: 13px;
        font-family: Roboto, sans-serif;
        margin-bottom: 1.4rem;
        margin-top: 0.1rem;
        height: 2rem;
        text-transform: uppercase;
        border-radius: 0;
        color: #fff;
    }
    .modactions .btn { margin-top: -0.05rem; height: 2.4rem; }
    .drop-down ul.sublist {
        list-style: none;
        margin-top: -1.6rem;
        padding: 0 0 5px;
        background-color: rgb(0, 0, 0);
    }
    .btn-inactive {
        opacity: 0.5;
        background-color: transparent;
        height: 1.8rem;
    }
    .inline-flex .icon { margin-bottom: 0; }
    ul.modactions li.dllabel { margin-top: 0.6rem; }
    ul.actions li.report-abuse-btn:only-of-type { height: 2.4rem; }
    .modpage .info-details .sideitem a.btn:last-of-type,
    .modpage .info-details .sideitem a.btn:only-of-type { height: 1.6rem; }
    .report-abuse-btn, .button-share { border: 0 solid var(--stroke-neutral-translucent-moderate); }
    .comments ul.actions .btn, .info a.btn {
        margin-top: -0.1rem;
        margin-bottom: 0.1rem;
        height: 1.75rem;
        color: #fff;
    }
    .comment-search { margin-top: -1.8rem; }
    body { *line-height: 1; }
    #featured #feature #pagetitle { position: absolute; top: 63%; }
    .rj-btn, a.rj-btn, button.rj-btn { border-radius: 0; }
    h2#description_tab_h2 { margin: 2rem 0 1rem; }
    #description_tab_h2 { font-size: 30px; }
    ul.actions { margin-bottom: -1rem; }
    .accordion dd { background-color: #3b3b3b; }
    .accordion dt.accopen { background-color: #313131; }
    .accordion dt:hover { background-color: #3b3b3b; }
    .container a, .popup a {
        font-family: Roboto, sans-serif;
        font-weight: 500;
    }
    /* Adjust header padding and gradient effects */
    #featured #pagetitle { padding-bottom: 0.5rem; }
    .tab-description { padding: 1rem 0; }
    .tab-description ~ .mod_description_container { padding-top: 0; }
    /* Update "About this mod" header styling */
    #description_tab_h2 { font-family: bebas_neuebook; font-weight: 400; }
    /* Image gallery counter is hidden unless hovered */
    #sidebargallery.modimages .counter { transition: opacity 0.33s; }
    #sidebargallery.modimages:not(:hover) .counter { opacity: 0; }
    /* Adjust thumbnail gallery spacing */
    #sidebargallery ul.thumbgallery {
        padding: 0.5rem 0.1rem;
    }
    /* Remove extra padding from file info section */
    .modpage .info-details .sidebargallery + #fileinfo {
        padding-top: 0;
        padding-bottom: 0;
    }
    /* Ensure antivirus status elements are sized correctly */
    .modpage #fileinfo .sideitem:last-child > div {
        height: auto !important;
        top: unset !important;
    }
    /* Adjust tags header style */
    .modpage .sideitems.side-tags h2 {
        font-family: 'bebas_neuebook';
        font-size: 1.5rem;
    }
    /* Reduce spacing for share and report buttons */
    .tab-description .accordionitems { margin-bottom: 0; }
    /* Adjust comment count and navigation spacing */
    #comment-count { padding-top: 0; }
    .comments .comment-nav { margin-bottom: 0.5rem; }
    /* Adjust article page title and background styling */
    #featured #feature.blank #pagetitle { padding-bottom: 0.5rem; }
    .articlepage article { background-color: var(--surface-mid); }
    /* Indent numerical lists for readability */
    ul.content_list_ordered > li { margin-left: 20px; }
    /* Remove unnecessary padding in comment sections */
    .container ~ #comment-container { padding-top: 0; }
    /* Game overview page specific tweaks */
    section[aria-labelledby="trending-mods-header"] {
        /* The second child div contains content with two grid areas */
        & > div:nth-of-type(2) {
            display: grid;
            grid-template-columns: auto 30%;
            grid-column-gap: 1.5rem;
            hr { display: none; }
            /* Nested grid for additional content tiles */
            & > div:nth-of-type(2) {
                margin: 0;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                grid-auto-rows: minmax(min-content, 1fr);
                grid-column-gap: 1.5rem;
                grid-row-gap: 1rem;
            }
        }
    }
    /* Hide the popular collections section */
    section[aria-labelledby="popular-collections-header"] {
        display: none;
    }
    /* Adjust More Mods section layout */
    section[aria-labelledby="more-mods-header"] {
        div.flex.sm\:flex-row {
            div:first-child { width: auto; }
            button:nth-child(2) { margin-left: unset; }
        }
    }
    /* Update news grid title size */
    .news-grid {
        .typography-heading-sm { font-size: 1.2rem; }
    }
    /* Theme color customizations for the mod page */
    body.scheme-theme-ReskinBlue {
        --theme-primary: #57a5cc !important;
        --theme-primary-translucent: #57a5ccd8 !important;
        --theme-secondary: #4584a3 !important;
        --theme-dark: #356983 !important;
    }
    /* Additional theme color definitions would follow here */
}

/* =========================
   Mod Browsing Page Styles
   These styles apply only to the mod browsing grid layout
   ========================= */
div.mods-grid {
    grid-template-columns: none;
    row-gap: 1.5rem;

    div.group\/mod-tile {
        min-height: 217px;

        > div.relative {
            width: 385px;
            position: absolute;
        }

        > div.px-3.pb-5.pt-3,
        > div.min-h-8.px-3 {
            padding-left: 400px;

            > div.divide-y > div.flex {
                display: inline-block;
                vertical-align: top;
                padding-right: 1.5rem;

                > a { vertical-align: top; }
                > p.text-neutral-subdued {
                    vertical-align: top;
                    display: inline-block;
                    padding-right: 1.5rem;

                    > svg {
                        display: inline-block;
                        margin-right: 3px;
                    }
                }
            }
        }
    }
}

 

Edited Thursday at 09:29 PM by Vouru
Took advise to use spoiler tag to reduce post bloat

[carpesangrea]

4 minutes ago, Glitchfinder said:

They have been making changes, especially when people point out specific issues with the new UI. They're not going to revert the change. While I wish they would, that isn't on the table. So instead they're leaving this thread as a dumping ground for feedback like that and pulling feedback they can use to improve (or at least assess) the UI we're stuck with out of this thread and organizing it elsewhere.

What changes have they made to this awful new UI that people actually asked for?  It looks and feels just as bad to me now as it did the day it launched.