Skip to content

Stable changes for simplifying UI on internal CMS by justinhu

Screenshot of Stable changes for simplifying UI on internal CMS
Write a review Install Get Stylus

Details

Authorjustinhu

LicenseNo License

Categorywebsite

Created

Updated

Size11 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Test

Notes

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.

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 old version of dina */
    
.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;
}

       
    
/* INSTANCE HEIGHT CHANGER new version of dina */
    
    
    .MuiPaper-elevation1 > div > .css-18qa4sw-HeaderTop {
    max-height:33px;
    }
    
    
    .MuiPaper-elevation1 > div > .css-1liinyg-HeaderBottom {
    max-height:38px !important;
        
    }
    

        
    .MuiPaper-elevation1 > .css-5r2qzu-FooterWrapper > .css-1hz59r3-FooterTop {
    max-height:39px !important;
    }
    
    .MuiPaper-elevation1 > .css-5r2qzu-FooterWrapper > .css-kwl91q-Container {
    max-height:30px !important;
    }
    
 
/* 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-t...

Reviews

No reviews yet.