Watched Indicator - Color Change (Web Client)

[Oxide 139]

It would be nice for the watched indicator on the Shows and Series pages to change color depending on if the show has completely been watched, if some episodes have been watched or if no episodes have been watched, I feel this would enhance the end users experience, see mock up below 

 

 

 

[Luke 42077]

We do use the same color right now to denote both progress and completion, so a color change is something we've talked about. The problem is choosing the color. blue blends in too easily, and red is often perceived as an error status.

[Oxide 139]

How about a little boarder around the indicator, I think it looks awesome 

 

I agree with the red being related to an error, maybe yellow, orange etc 

 

Edited June 19, 2016 by Oxide

[aspdend 177]

I like this idea with the white border - looks good to me

[Oxide 139]

@@aspdend if you want the white boarder just add this to Settings -> Branding 

.playedIndicator {border-style: solid; border-width: 2px;}

or use this if you want to make the circle slightly bigger 

.playedIndicator {width: 30px; height: 30px; border-style: solid; border-width: 2px;}

Edited June 20, 2016 by Oxide

[aspdend 177]

 

@@aspdend if you want the white boarder just add this to Settings -> Branding 

.playedIndicator {border-style: solid; border-width: 2px;}

or use this if you want to make the circle slightly bigger 

.playedIndicator {width: 30px; height: 30px; border-style: solid; border-width: 2px;}

Not tried anything like this with the branding yet - may have to have a play!

[computerprep 148]

I would look at css shadows to help with contrast rather than a border, if it's going to be a system-wide implementation.

 

Shadows would be more in keeping with Emby's current "style guide" if there was a formalized style guide. Easy to implement in HTML/CSS based environments.

 

Then admins just consolidate the color choices into shared CSS classes and admins can change the color in our custom CSS section.

 

But +1 on the different colors/classes for "unstarted" vs "in-progress" counts.

 

Question: do color changes in that custom CSS area affect any devices/apps UI?

[speechles 2055]

 

 

Question: do color changes in that custom CSS area affect any devices/apps UI?

You would need to play around in this section:

https://github.com/MediaBrowser/Emby/blob/master/Emby.Drawing/GDI

 

Changes to this section must be compiled into the source object and made into a dll/so. So it isnt for your average bear. Some of this should be more easily exposed to allow changing without a recompile. The same green, and same checkmark gets boring..heh

 

 

 

 

 

Sent from my Nexus 7 using Tapatalk

[computerprep 148]

You would need to play around in this section:

https://github.com/MediaBrowser/Emby/blob/master/Emby.Drawing/GDI

I'm starting to get more involved with the community forums... but I don't have the time of day to work on this code after a day at the office. If I get approval to hire a new employee, then that'll be a different story.

 

Thanks for the link.