Stable changes for simplifying UI on internal CMS by justinhu

Screenshot of Stable changes for simplifying UI on internal CMS

Details

Authorjustinhu

LicenseNo License

Categorywebsite

Created2 years, 3 months ago

Updated3 months, 2 weeks ago

Size10 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

No support and turn off if issues encountered. Barely tested.

Changes

CMS instances are now full height to the screen height
CMS instances have more room as article metadata sections are thinner - description section is thinner and may pose issues on normal width mode
More vertical height overall due to much narrower tab bars and production tag removal
Five more stories viewable in sidebar due to height adjustments.
Mimir sidebar search bar is now usable

Optional changes

All animations can be disabled
Instance boxes can be made longer using custom height settings
Bumper section at the bottom of CMS and linear instances which prevent you from accidentally scrolling too far and scrolling past the instance.
CMS button can pulsate to differentiate from social and broadcast

Known issues

Article instance and social instances are defined to have the exact same height in Dina. This means adjusting the overall height will adjust it for both CMS instances and social instances. This means social instances are now unnecessarily long. Trade-off between having nicer CMS area.
Previously, contacts height would be screwed up. This has been fixed.

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name         Stable changes for simplifying UI on internal CMS
@version      3
@namespace    userstyles.world/user/justinhu
@description  No support and turn off if issues encountered.
@author       justinhu
@license      Unlicense (public domain / no license)
==/UserStyle== */

@-moz-document domain("tvnz.7mountains.com"), domain("tvnz-sandbox.7mountains.com") {
/*      1304OPTIONAL CHANGES        */
/*      OPTIONAL CHANGES2        */
/*      OPTIONAL CHANGES         */    
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */

/* disabling animations     */
    *, *:before, *:after {
        animation-delay: 0.0001ms !important;
        animation-duration: 0.0001ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0.0001ms !important;
        transition-duration: 0.0001ms !important;
        transition: none !important;
    } 

/* FLASHING CMS INSTANCE BUTTON
     img[src^="/static/media/cms"] {
         -webkit-animation: blink 0.3s !important;
         -webkit-animation-iteration-count: infinite !important;
         -moz-animation: blink 1s !important;
         -moz-animation-iteration-count: infinite !important;
         -o-animation: blink 1s !important;
         -o-animation-iteration-count: infinite !important;
     } */
     
  
/* THINNER STORIES ROW HEIGHT - CHANGE CODE TO BE ACTIVE TO CHANGE HEIGHT BELOW */

    .MuiDrawer-paperAnchorLeft * .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiList-root > ul > div > div > div {
        height: 44px !important;
    }  


    
/* CUSTOMISABLE ARTICLE INSTANCE HEIGHT ADJUSTMENT   */

div[class^="jss"]:not([role=presentation]) > div > div > .MuiPaper-elevation24 > div > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > [role=presentation] > div[width="100%"]:nth-child(1) {
        height: 91vh !important;

    }
 
    
    
/* article instance height padding box */

    .MuiCollapse-wrapperInner > [role=presentation] > div[width="100%"] > [role=presentation] > div > p[data-slate-node="element"]:last-child {
        padding-bottom: 10px;
    }
    
    .MuiCollapse-wrapperInner > [role=presentation] > div[width="100%"] > [role=presentation] > div > [data-slate-node="element"]:last-child::after {
        margin-top:20px;
        padding-top:180px;
        padding-bottom:180px;
        display: block;
        text-align: center;
        vertical-align: middle;
        color: #5e6977;
        content:"ㅤyou have reached the end of the instance :))))";
        vertical-align: -50%;
        background: #39414b;
    }

     
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */
/*      OPTIONAL CHANGES         */
    
    
    
    
/* INSTANCE HEIGHT CHANGER */
    
.MuiPaper-elevation24:not(.MuiDialog-paperWidthSm) > div:nth-of-type(1) {
    height:76px;
}


.MuiPaper-elevation24 > div > div:nth-of-type(2) > div:nth-of-type(1):not([style="position: relative; overflow: hidden; width: 100%; height: 100%;"])  {
    
    max-height:33px;
}

    
/* SITE-WIDE HEADER */

div[id="root"] > div:first-child {
    height: 0px;
}

    div[id="root"] > div:nth-child(1) > div:first-child > span {
    display:none !important;
}

    
    
    div[id="root"] > div:first-child * p.MuiTypography-displayInline{
    height: 0px;
}


    

div[id="root"] > header:nth-child(2) > .MuiToolbar-regular > div:nth-child(1) > .MuiTabs-root > .MuiTabs-scroller > div[role="tablist"] > button {
    height: 40px !important;
}

    .MuiToolbar-regular > .MuiTabs-root {
        height: px;
    padding-top: 0px;
    }




.jss69 {
    min-height: 40px;
}

div[id="root"] > header:nth-child(2) {
    height: 40px !important;
}

div[id="root"] > header:nth-child(3) {
    height: 36px !important;
}

div[id="root"] > header:nth-child(2) > div {
    min-height: 40px !important;
}


/* SITE-WIDE HEADER ADJUSTMENTS PATCHING

.MuiDrawer-paperAnchorDockedLeft,.MuiDrawer-paperAnchorDockedRight {
    top: 84px !important;
}

 */

div[id="root"] > div:nth-child(1) > div:nth-child(4),
.MuiDrawer-paperAnchorDockedLeft,
.MuiDrawer-paperAnchorDockedRight {
    min-height: calc(100vh - 84px) !important;
}

/* SMALLER BLUE BAR */


 header:nth-child(3).MuiPaper-elevation4 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div > div[role="presentation"] {
    height: 28px !important;
}

header:nth-child(3).MuiPaper-elevation4 {
    height: 36px !important;
    min-height: 36px !important;
}
    
header:nth-child(3).MuiPaper-elevation4 > div:nth-child(1) {
    height: 36px !important;
    min-height: 36px !important;
}


button[mtype="rundown"]{
    margin-top: 1px;
}


/* SMALLER SIDEBAR HEADER TITLES */

.MuiDrawer-paperAnchorLeft * .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > .MuiList-root > ul > div > div > div {
    height: 48px;
}

.MuiDrawer-paperAnchorLeft > div > div:first-child {
    min-height: 31px;
    height: 31px;
}

.MuiDrawer-paperAnchorLeft > div > div > .MuiTypography-root {
    font-weight: 800 !important;
    font-size: 18px;
    text-transform: uppercase;
    color: white;
    padding-top: 6px;
}



.MuiToolbar-root * .MuiTabs-flexContainer > button {
    padding: 10px 10px !important;
    min-height: 38px;

}

.MuiTabs-root > .MuiTabs-scroller > .MuiTabs-flexContainer > button {
    padding: 5px 8px;
    min-height: 38px;

}

.MuiTabs-root {
    min-height: 40px;
}


textarea[placeholder="Give your Story a title..."] {
    font-weight: 800 !important;
}


/* THINNER SIDEBAR BOTTOM BIT */

.MuiDrawer-paperAnchorLeft > div:nth-child(1) > div:last-child > div {
    min-height: 32px !important;
    flex: 10 1 auto;
    padding-top: 5px;
    padding-bottom: 3px;
}

.MuiDrawer-paperAnchorLeft > div:nth-child(1) > div:last-child > div:nth-child(1),
.MuiDrawer-paperAnchorLeft > div:nth-child(1) > div:last-child > div:nth-child(2) {
    padding-top: 7px !important;
}


    
    .MuiInput-fullWidth > [placeholder="Type a brief description for the Story..."] {
        height: 70px;
    }    

.MuiInput-fullWidth {
    max-height: none;
}

/* ARTICLE INSTANCE HEIGHT ADJUSTMENT */

div:not([role=presentation]) > div > div > .MuiPaper-elevation24 > div > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > [role=presentation] > div[width="100%"]:nth-child(1) {
    height: 75vh;
}
    
div[class^="jss"]:not([role=presentation]) > div > div > .MuiPaper-elevation24 > div > .MuiCollapse-entered > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > [role=presentation] > div[width="100%"]:nth-child(1) {
    height: 87vh;

}
    
.MuiCollapse-wrapperInner > [role=presentation] > div > [role=presentation] > div:nth-child(1) > [data-slate-node="element"] > div > div {
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 8px;
    padding-left: 4px;
}

.MuiCollapse-wrapperInner > [role=presentation] > div > [role=presentation] > div > [data-slate-node="element"] > div > div > [contenteditable="false"] > div:nth-child(2) > div:nth-child(1) {
    padding-top: 12px;
    padding-bottom: 10px;
    height: 29px;
}

.MuiCollapse-wrapperInner > [role=presentation] > div > [role=presentation] > div > [data-slate-node="element"]:nth-child(2) > div > div:nth-child(2) > [contenteditable="false"] > div:nth-child(2) > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > div > div > .MuiFormControl-root > .MuiInputBase-root > textarea,
.MuiCollapse-wrapperInner > [role=presentation] > div > [role=presentation] > div > [data-slate-node="element"]:nth-child(2) > div > [readonly] > [contenteditable="false"] > div:nth-child(2) > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > div > div > .MuiFormControl-root > .MuiInputBase-root > textarea {
    height: 60px;

}


.MuiCollapse-wrapperInner > [role=presentation] > div > [role=presentation] > div > [data-slate-node="element"] > div > div > [contenteditable="false"] > div:nth-child(2) > .MuiCollapse-root > .MuiCollapse-wrapper > .MuiCollapse-wrapperInner > div {
    margin-bottom: 9px;
}



@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-o-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

}

@-moz-document domain("oceania.mjoll.no") {
/* MIMIR SIDEBAR SEARCH BAR THINNING */

@media (max-width: 800px) {
    
    
    
    
    .value-field-icon > button {
    display: none;
}

.v-input__prepend-outer {
    display: none;
 }

div[class="col col-12 mdf-col"] > .v-input  {
    padding-left: 2px !important;
}

div[class="col col-6 mdf-col"] > .pl-8  {
    padding-left: 2px !important;
}

div[class="v-input v-input--hide-details v-input--is-label-active v-input--is-dirty v-input--is-focused theme--dark v-text-field v-text-field--is-booted primary--text mb-1 pl-8"] > .v-input__control > .v-input__slot > .v-text-field__slot > input {font-size:13px;}

.v-toolbar__content > div[style="height: 100%; position: relative;"] > [class="col"]{
        padding: 0px;
    padding-top: 4px;
}



.header-nav-icons-container[data-v-dc219402] {
 min-width: 0px !important; 
}

    .header-nav-icons-container {
    min-width: 0px!important;
}

.v-input__prepend-inner{
    display:none !important;
}

.v-input__append-inner{
    display:none !important;
}
    
.search-checkbox{
    width: 20px !important;
}
    
.filterButton[data-v-af752de6] {
        height: 18px!important;
    width: 12px!important;
    position: absolute;
    top: 16px;
    right: 10px;
    color: var(--v-deepBlue-base)!important;
}
    
.v-text-field.v-text-fi...

Reviews

No reviews yet.