Jump to content


Photo

Some CSS Fixes & Tweaks :)

css fixes tweaks

  • Please log in to reply
60 replies to this topic

#1 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 173 posts
  • Local time: 10:46 AM
  • LocationDarkest Africa

Posted 10 July 2016 - 09:02 AM

 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"

5782418122e29_bepb.jpg

2. Fixed Reports Filter Menu getting cut off and not been able to select all options.

572036f71434b_EmbyFilterScroll.jpg

/*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

5782440fa8c6a_rlhs.jpg

 

2. Moved overlay button to top right so it doesn't cover progress bar.

57824475dbb01_prhs.jpg

 

Combo of above tweaks

578244d7f23de_combo.jpg

 

3. Center Text In Card Footers

57824562935df_ccf.jpg

 

4. Fixed Navigation Arrows In Place when Scrolling.

57824713c5c25_naf.jpg

/*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 by Oxide, 10 July 2016 - 12:23 PM.

  • Luke, swhitmore, Della Dog and 10 others like this

#2 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 390 posts
  • Local time: 09:46 AM

Posted 10 July 2016 - 05:30 PM

Nice work!


  • swhitmore likes this

#3 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1380 posts
  • Local time: 10:46 AM
  • LocationGermany

Posted 17 July 2016 - 01:44 AM

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.



#4 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 173 posts
  • Local time: 10:46 AM
  • LocationDarkest Africa

Posted 17 July 2016 - 03:44 AM

@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;}

  • shorty1483 likes this

#5 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1380 posts
  • Local time: 10:46 AM
  • LocationGermany

Posted 17 July 2016 - 06:01 AM

 

@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 :D This fixed the Homescreen!

 

And what to do in the libraries? :D

 

578b575b0788e_Unbenannt.jpg

 

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 by shorty1483, 17 July 2016 - 06:04 AM.


#6 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 173 posts
  • Local time: 10:46 AM
  • LocationDarkest Africa

Posted 17 July 2016 - 07:48 AM

@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;}

  • shorty1483 likes this

#7 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 173 posts
  • Local time: 10:46 AM
  • LocationDarkest Africa

Posted 18 July 2016 - 12:09 AM

@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;}


#8 swhitmore OFFLINE  

swhitmore

    Advanced Member

  • Moderators
  • 2700 posts
  • Local time: 04:46 PM
  • LocationPerth, Australia

Posted 18 July 2016 - 12:27 AM

Should these changes just be made default? They seem like good improvements to me.


  • Happy2Play, dethknite, Nickbert and 4 others like this

#9 dethknite OFFLINE  

dethknite

    Advanced Member

  • Members
  • 101 posts
  • Local time: 02:46 AM
  • LocationNebraska

Posted 25 July 2016 - 11:35 AM

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...


  • Diedrich and Oxide like this

#10 mediacowboy OFFLINE  

mediacowboy

    Advanced Member

  • Alpha Testers
  • 1809 posts
  • Local time: 03:46 AM
  • LocationTexas, United States

Posted 30 July 2016 - 04:51 PM

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

5782440fa8c6a_rlhs.jpg

 

2. Moved overlay button to top right so it doesn't cover progress bar.

57824475dbb01_prhs.jpg

 

Combo of above tweaks

578244d7f23de_combo.jpg

 

3. Center Text In Card Footers

57824562935df_ccf.jpg

 

4. Fixed Navigation Arrows In Place when Scrolling.

57824713c5c25_naf.jpg

/*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.

 

579d13c8ee194_show.png

 

579d13ddaebe1_episode.png


Edited by mediacowboy, 30 July 2016 - 04:53 PM.


#11 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 173 posts
  • Local time: 10:46 AM
  • LocationDarkest Africa

Posted 31 July 2016 - 08:13 AM

@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 by Oxide, 31 July 2016 - 08:19 AM.

  • Happy2Play likes this

#12 mediacowboy OFFLINE  

mediacowboy

    Advanced Member

  • Alpha Testers
  • 1809 posts
  • Local time: 03:46 AM
  • LocationTexas, United States

Posted 31 July 2016 - 01:09 PM

 

@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.



#13 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 173 posts
  • Local time: 10:46 AM
  • LocationDarkest Africa

Posted 03 August 2016 - 07:39 AM

Fixes for ribbon in version 3.1.6059.3847  :rolleyes:

/*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;}

  • mediacowboy, Happy2Play and David Martin like this

#14 mediacowboy OFFLINE  

mediacowboy

    Advanced Member

  • Alpha Testers
  • 1809 posts
  • Local time: 03:46 AM
  • LocationTexas, United States

Posted 03 August 2016 - 10:12 PM

 

Fixes for ribbon in version 3.1.6059.3847  :rolleyes:

/*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.


  • David Martin likes this

#15 mediacowboy OFFLINE  

mediacowboy

    Advanced Member

  • Alpha Testers
  • 1809 posts
  • Local time: 03:46 AM
  • LocationTexas, United States

Posted 08 August 2016 - 04:15 PM

Ribbions are broke again with the latest update of server 3.1.6064.238387. No rush just wanted to let you know.57a8e878e7d24_ribbions.png



#16 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14703 posts
  • Local time: 01:46 AM
  • LocationWashington State

Posted 08 August 2016 - 06:37 PM

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


  • mediacowboy, drashna and Oxide like this

#17 AlwinHummels OFFLINE  

AlwinHummels

    Advanced Member

  • Members
  • 410 posts
  • Local time: 10:46 AM
  • LocationThe Netherlands

Posted 09 August 2016 - 10:21 AM

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)

  • CarlosLima likes this

#18 Oxide OFFLINE  

Oxide

    Advanced Member

  • Alpha Testers
  • 173 posts
  • Local time: 10:46 AM
  • LocationDarkest Africa

Posted 09 August 2016 - 11:58 AM

@AlwinHummels this should do the trick  ;)

.cardOverlayButton {display:none !important;}

  • AlwinHummels likes this

#19 AlwinHummels OFFLINE  

AlwinHummels

    Advanced Member

  • Members
  • 410 posts
  • Local time: 10:46 AM
  • LocationThe Netherlands

Posted 09 August 2016 - 02:06 PM

Thanks @Oxide, so simple but never thought it's so !important  ^_^



#20 AlwinHummels OFFLINE  

AlwinHummels

    Advanced Member

  • Members
  • 410 posts
  • Local time: 10:46 AM
  • LocationThe Netherlands

Posted 09 August 2016 - 03:28 PM

Change .card .indicators to .cardIndicators

I tried this but I think it should be .cardIndicators with the capital "I"


Edited by AlwinHummels, 09 August 2016 - 03:29 PM.






Also tagged with one or more of these keywords: css, fixes, tweaks

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users