Oxide 139 Posted July 10, 2016 Share Posted July 10, 2016 (edited) Some backend fixes: (Tested on 3.1.6034.23988) 1. Fixed when scrolling down in the Dashboard the Progress Bars would appear in the "Menu Header" 2. Fixed Reports Filter Menu getting cut off and not been able to select all options. /*Backend Fixes*/ /*Fix Dasboard Menu Bar Showing Progress Bars*/ .dashboardDocument .viewMenuBar {z-index: 1000;} /*Reports Filter Menu Fix*/ .ui-panel-inner {position: static !important; background: #222;} .ui-panel.ui-panel-open {position: absolute !important;} .ui-body-b.ui-panel {height: initial; min-height: initial; bottom: initial;} Some Frontend Tweaks: (Tested on 3.1.6034.23988) 1. Turn Played Indicator from circle to ribbon and move it to the left, added white boarder 2. Moved overlay button to top right so it doesn't cover progress bar. Combo of above tweaks 3. Center Text In Card Footers 4. Fixed Navigation Arrows In Place when Scrolling. /*Frontend Tweaks*/ /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5);} /*Move Overlay Button to top right*/ .cardOverlayButtonContainer {top: -11px !important; right: -5px !important;} /*Center Card Footer*/ .cardContent .cardFooter {width: 100%; text-align: center;} /*Fixed Navigation Arrows In Place*/ .lnkSibling {position: fixed; top: 25%;} Edited July 10, 2016 by Oxide 13 Link to comment Share on other sites More sharing options...
bfir3 117 Posted July 10, 2016 Share Posted July 10, 2016 Nice work! 1 Link to comment Share on other sites More sharing options...
shorty1483 484 Posted July 17, 2016 Share Posted July 17, 2016 It seems with latest dev the ribbons do not work anymore, just fyi @@Oxide . You just see the ribbon without played indicator and on other views than home, it's still the circle. the play count is just a green number without bg. Link to comment Share on other sites More sharing options...
Oxide 139 Posted July 17, 2016 Author Share Posted July 17, 2016 @@shorty1483 this should fix it /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;} 1 Link to comment Share on other sites More sharing options...
shorty1483 484 Posted July 17, 2016 Share Posted July 17, 2016 (edited) @@shorty1483 this should fix it /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;} I'm a real dumbass in css This fixed the Homescreen! And what to do in the libraries? Edit: When I go back from libraries to Homescreen, the counter looks again like in the pic above. When I refresh, it changes to ribbon. Tested on Chrome and FF. Edited July 17, 2016 by shorty1483 Link to comment Share on other sites More sharing options...
Oxide 139 Posted July 17, 2016 Author Share Posted July 17, 2016 @shorty1483 sorry they changed more than i thought, I've tested and this works /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .card .playedIndicator {position: absolute; top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;} 1 Link to comment Share on other sites More sharing options...
Oxide 139 Posted July 18, 2016 Author Share Posted July 18, 2016 @shorty1483 more changes in build 3.1.6042.21606 This will get the ribbon back /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .card .playedIndicator, .card .countIndicator {position: absolute; top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;} Link to comment Share on other sites More sharing options...
swhitmore 781 Posted July 18, 2016 Share Posted July 18, 2016 Should these changes just be made default? They seem like good improvements to me. 7 Link to comment Share on other sites More sharing options...
dethknite 36 Posted July 25, 2016 Share Posted July 25, 2016 Would love to have this merged in.. the "2. Fixed Reports Filter Menu getting cut off and not been able to select all options." has been bugging me for a long time... 2 Link to comment Share on other sites More sharing options...
mediacowboy 438 Posted July 30, 2016 Share Posted July 30, 2016 (edited) Some Frontend Tweaks: (Tested on 3.1.6034.23988) 1. Turn Played Indicator from circle to ribbon and move it to the left, added white boarder 2. Moved overlay button to top right so it doesn't cover progress bar. Combo of above tweaks 3. Center Text In Card Footers 4. Fixed Navigation Arrows In Place when Scrolling. /*Frontend Tweaks*/ /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5);} /*Move Overlay Button to top right*/ .cardOverlayButtonContainer {top: -11px !important; right: -5px !important;} /*Center Card Footer*/ .cardContent .cardFooter {width: 100%; text-align: center;} /*Fixed Navigation Arrows In Place*/ .lnkSibling {position: fixed; top: 25%;} Appears broken in dev server v 3.1.6055.27290. Edited July 30, 2016 by mediacowboy Link to comment Share on other sites More sharing options...
Oxide 139 Posted July 31, 2016 Author Share Posted July 31, 2016 (edited) @@mediacowboy this should fix it /*Center Card Footer*/ .innerCardFooter {width: 100%; text-align: center !important;} /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;} .card .indicators {right: initial !important; top: -1px !important; left: 61px;} /*Move Overlay Button to top right*/ .cardOverlayButton {bottom: initial !important; top: 5px !important;} Edited July 31, 2016 by Oxide 1 Link to comment Share on other sites More sharing options...
mediacowboy 438 Posted July 31, 2016 Share Posted July 31, 2016 @@mediacowboy this should fix it /*Center Card Footer*/ .innerCardFooter {width: 100%; text-align: center !important;} /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;} .card .indicators {right: initial !important; top: -1px !important; left: 61px;} /*Move Overlay Button to top right*/ .cardOverlayButton {bottom: initial !important; top: 5px !important;} Awesome thank you. Link to comment Share on other sites More sharing options...
Oxide 139 Posted August 3, 2016 Author Share Posted August 3, 2016 Fixes for ribbon in version 3.1.6059.3847 /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;} .card .indicators {right: initial !important; top: 4px !important; left: -21px;} 3 Link to comment Share on other sites More sharing options...
mediacowboy 438 Posted August 4, 2016 Share Posted August 4, 2016 Fixes for ribbon in version 3.1.6059.3847 /*Make Played Indicator into Ribbon LHS*/ .playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);} .card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;} .card .indicators {right: initial !important; top: 4px !important; left: -21px;} You are the man. Just got home after a update and saw it was broke. Was coming to look for this or report it. 1 Link to comment Share on other sites More sharing options...
mediacowboy 438 Posted August 8, 2016 Share Posted August 8, 2016 Ribbions are broke again with the latest update of server 3.1.6064.238387. No rush just wanted to let you know. Link to comment Share on other sites More sharing options...
Happy2Play 9024 Posted August 8, 2016 Share Posted August 8, 2016 Ribbions are broke again with the latest update of server 3.1.6064.238387. No rush just wanted to let you know. Change .card .indicators to .cardIndicators 3 Link to comment Share on other sites More sharing options...
AlwinHummels 134 Posted August 9, 2016 Share Posted August 9, 2016 How can I hide the button instead of place it on top right? I tried /*Hide poster play button*/ .cardOverlayButton {display: none;} But that wont work on my server version 3.0.6050.0 (synology install) 1 Link to comment Share on other sites More sharing options...
Oxide 139 Posted August 9, 2016 Author Share Posted August 9, 2016 @@AlwinHummels this should do the trick .cardOverlayButton {display:none !important;} 1 Link to comment Share on other sites More sharing options...
AlwinHummels 134 Posted August 9, 2016 Share Posted August 9, 2016 Thanks @@Oxide, so simple but never thought it's so !important Link to comment Share on other sites More sharing options...
AlwinHummels 134 Posted August 9, 2016 Share Posted August 9, 2016 (edited) Change .card .indicators to .cardIndicators I tried this but I think it should be .cardIndicators with the capital "I" Edited August 9, 2016 by AlwinHummels Link to comment Share on other sites More sharing options...
Happy2Play 9024 Posted August 9, 2016 Share Posted August 9, 2016 I tried this but I think it should be .cardIndicators with the capital "I" Yes it already is a capital "I" in Indicators. Link to comment Share on other sites More sharing options...
AlwinHummels 134 Posted August 9, 2016 Share Posted August 9, 2016 Sorry I had my wrong pair of glasses on my nose You're absolutely right there was already a capital I. Link to comment Share on other sites More sharing options...
Happy2Play 9024 Posted June 23, 2017 Share Posted June 23, 2017 (edited) Had to make an update to move new progress indicator since this "Make Played Indicator into Ribbon LHS" code moves indicator partial off Library card. Beta 3.2.20.11 /*Move Progress Ring*/ .progressring { left: 30px; } Edited June 23, 2017 by Happy2Play Link to comment Share on other sites More sharing options...
Oxide 139 Posted July 10, 2017 Author Share Posted July 10, 2017 Here is the css for the new vertical episode list in 3.2.24 for the watch ribbon. Also added a slightly dark transparent background to make the text more readable. /* Episode Vertical List Played Indicator into Ribbon LHS*/ .listItem[data-action=none] {padding: 0 0 30px 0 !important;} .listItemIndicators {top: 4px !important; left: -21px;} .listItemImage-large {width: 400px !important; height: 225px !important;} .playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important;} .listItem-content {background: rgba(0, 0, 0, 0.3);} Link to comment Share on other sites More sharing options...
loomes 40 Posted July 10, 2017 Share Posted July 10, 2017 (edited) Can you please post code for all the ribbon in the right corner? Edited July 10, 2017 by loomes Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now