Jump to content


Photo

Full Page UI


  • Please log in to reply
12 replies to this topic

#1 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 02:46 AM

Posted 31 July 2019 - 02:14 PM

So I've started working on a full page UI for desktop resolutions >1400px width. My main goal is to reduce the amount of items or information that are hidden below the scroll line so that users don't miss out on content that they haven't scrolled to see. In addition, I would like to leverage the additional artwork items that Emby stores for each media item like the ClearArt, extra Fanart, etc.

 

I've used the cast CSS in the Midnight Campfire thread, so credits to @VaporTrail for that. I haven't worked on anything except a mockup for the Movie detail page. I'm still trying to figure out the best way to place all the elements, but I wanted to post here in case anyone was inspired or had any feedback.

 

OFBGwvG.png

 

Ideally I'd like to have all the controls on the left side above the poster, but that will lead to a fairly small poster size unless I can figure out a better solution. Still thinking about how to best approach this. I'd like to maintain some consistency between the views for Movies, Series, Seasons and Episodes.


Edited by bfir3, 31 July 2019 - 02:15 PM.

  • arche and neik like this

#2 neik OFFLINE  

neik

    Advanced Member

  • Members
  • 738 posts
  • Local time: 03:46 AM

Posted 31 July 2019 - 02:18 PM

Nice work you did there! :-)



#3 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 02:46 AM

Posted 03 August 2019 - 03:02 PM

So I think I came up with a fairly decent solution to have the page layout be consistent across all views (though I've only done mockups for Movies and Series page so far) and make use of as much media artwork as possible while also falling back to other artwork options if some are unavailable. So we use the Logo or plain text in the top left depending on what's available, and we use the ClearArt above the poster or a Backdrop if the ClearArt is not available.

 

XEKuh39.png

 

6ncOF94.png

 

6l8nchW.png

 


  • neik likes this

#4 neik OFFLINE  

neik

    Advanced Member

  • Members
  • 738 posts
  • Local time: 03:46 AM

Posted 04 August 2019 - 04:20 AM

Would you mind sharing your CSS code?

#5 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 02:46 AM

Posted 04 August 2019 - 01:07 PM

Would you mind sharing your CSS code?

 

I could, but it won't be very helpful as it affects all pages and currently I'm only done with the Movies and Series page. Seasons and Episodes and the other views will have slight to major problems using it, lol. It also involves modifying a bunch of the javascript files to put the extra artwork on the page, as well as modifying at least one html file. For these reasons I'd prefer not to get everything together for a release until it's all ready.

 

I also include some improvements to the normal Emby behavior in addition to using more artwork. The cast section now prefers cast members with artwork available and sorts them as such. The title of an item will be replaced with a logo where available, and other fallbacks for other artwork is used to ensure the page maintains a consistent feeling even for items with less artwork. And more to come.


Edited by bfir3, 04 August 2019 - 01:11 PM.


#6 neik OFFLINE  

neik

    Advanced Member

  • Members
  • 738 posts
  • Local time: 03:46 AM

Posted 04 August 2019 - 04:40 PM

Looking forward to it.
Thank you!

#7 igeoorge ONLINE  

igeoorge

    Advanced Member

  • Members
  • 183 posts
  • Local time: 10:46 PM

Posted 12 August 2019 - 08:13 PM

Hi
 
Could you please help me make the cast "round"


#8 Happy2Play ONLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15046 posts
  • Local time: 06:46 PM
  • LocationWashington State

Posted 12 August 2019 - 09:43 PM

 

Hi
 
Could you please help me make the cast "round"

 

 

What is wrong with the code from the other topic?

https://emby.media/c...-cast/?p=770709



#9 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 02:46 AM

Posted 13 August 2019 - 06:38 PM

What is wrong with the code from the other topic?

https://emby.media/c...-cast/?p=770709

That's what I used, works great!



#10 igeoorge ONLINE  

igeoorge

    Advanced Member

  • Members
  • 183 posts
  • Local time: 10:46 PM

Posted 13 August 2019 - 07:05 PM

What is wrong with the code from the other topic?

https://emby.media/c...-cast/?p=770709

 

 
The other topic code leaves a distorted elecon image. :(


#11 Happy2Play ONLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 15046 posts
  • Local time: 06:46 PM
  • LocationWashington State

Posted 13 August 2019 - 07:20 PM

 

 
The other topic code leaves a distorted elecon image. :(

 

 

Need to see an example but as noted in other topic all I did was add overflow.

 

5d5345b653f0a_round.jpg

 

But I would continue discussion/issue in your other topic.


Edited by Happy2Play, 13 August 2019 - 07:21 PM.


#12 bfir3 OFFLINE  

bfir3

    Advanced Member

  • Members
  • 412 posts
  • Local time: 02:46 AM

Posted 16 August 2019 - 02:24 AM

I've made more progress with the layout changes. I've worked on the Person page and I'm pretty happy with the Series/Season/Episode pages now. Some more shots:

 

https://gfycat.com/p...ballbichonfrise

 

j0UcBPB.png


Edited by bfir3, 16 August 2019 - 02:24 AM.

  • neik and Liquidbings like this

#13 Arly (Sprinkles) OFFLINE  

Arly (Sprinkles)

    Advanced Member

  • Members
  • 286 posts
  • Local time: 09:46 PM
  • LocationCanada

Posted Today, 07:23 PM

I am 100% on board with this. Love this layout.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users