Full Page UI

[bfir3 113]

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.

 

 

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 July 31, 2019 by bfir3

[neik 835]

Nice work you did there! :-)

[bfir3 113]

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.

 

 

 

 

[neik 835]

Would you mind sharing your CSS code?

[bfir3 113]

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 August 4, 2019 by bfir3

[neik 835]

Looking forward to it.

Thank you!

[igeoorge 26]

Hi

 

Could you please help me make the cast "round"

[Happy2Play 8248]

 

Hi

 

Could you please help me make the cast "round"

 

 

What is wrong with the code from the other topic?

https://emby.media/community/index.php?/topic/76049-transparent-menu-bar-and-round-cast/?p=770709

[bfir3 113]

What is wrong with the code from the other topic?

https://emby.media/community/index.php?/topic/76049-transparent-menu-bar-and-round-cast/?p=770709

That's what I used, works great!

[igeoorge 26]

What is wrong with the code from the other topic?

https://emby.media/community/index.php?/topic/76049-transparent-menu-bar-and-round-cast/?p=770709

 

Hi @@Happy2Play

 

The other topic code leaves a distorted elecon image.

[Happy2Play 8248]

 

Hi @@Happy2Play

 

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.

 

 

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

Edited August 13, 2019 by Happy2Play

[bfir3 113]

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

 

Edited August 16, 2019 by bfir3

[Oracle 74]

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

[killianbe 0]

LINK ,+?

[chef 3745]

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.

Would love to see the request code made for only cast members with artwork.

[bfir3 113]

Would love to see the request code made for only cast members with artwork.

 

 Simple enough, just add this where appropriate in item.js:

people = people.filter((p) => { return p.PrimaryImageTag;}).concat(people.filter((p) => { return !p.PrimaryImageTag;}))

Or combine it with the existing line that filters out the directors.

Edited September 26, 2019 by bfir3

[chef 3745]

[killianbe 0]

Any update ? 
Any @import css ? XD 

Edited September 28, 2019 by killianbe

[Dhop84 1]

Hay did anything come of this? its so good!

[GFG80 0]

I would LOVE to see the css for this, I only use Emby for movies anyway so I would absolutely run with this...

Please please pretty please with as cherry on top?

[Happy2Play 8248]

On 9/20/2021 at 4:45 PM, GFG80 said:

I would LOVE to see the css for this, I only use Emby for movies anyway so I would absolutely run with this...

Please please pretty please with as cherry on top?

quick and dirty but works pretty good on movies, can scroll right side but hide the scrollbar (mouse or arrow keys).  But as mentioned about this affects all content types unless you apply pageids to each content type htlml and target code per page. 

But obviously can be tweaked to fill space better. 

Removed logos as there size differences was problematic depending on where you want it. 

Each sections is still scrollable but overlaycards are not scaled.

div.detailMainContainer {
    width: 45%;
}

div.detailImageContainer {
    left: 68%;
}

div.detailTextContainer {
    position: absolute;
    width: 28%;
}

div.details-additionalContent {
    left: 54%;
    width: 45%;
    top: 0;
    position: absolute;
    margin-top: 4.5em;
    height: 30em;
    overflow: scroll;
}

div.details-additionalContent::-webkit-scrollbar {
    display: none;
}

div.details-additionalContent .portraitCard-horiz, div.details-additionalContent .smallBackdropCard-horiz, div.details-additionalContent .squareCard-horiz, div.details-additionalContent .backdropCard-horiz {
    width: 5vw;
}

div.detailLogoContainer {
    display: none;
}

div.detailImageContainer-main.detailImageContainer-portrait {
    width: 40%;
}

div.overview-text {
    display: block;
}

div.details-additionalContent div.scrollSlider, div.details-additionalContent h2 {
    padding-left: 0;
}

[GFG80 0]

2 hours ago, Happy2Play said:

quick and dirty but works pretty good on movies, can scroll right side but hide the scrollbar (mouse or arrow keys).  But as mentioned about this affects all content types unless you apply pageids to each content type htlml and target code per page. 

But obviously can be tweaked to fill space better. 

Removed logos as there size differences was problematic depending on where you want it. 

Each sections is still scrollable but overlaycards are not scaled.

You sir are a gentlemen and a scholar; this already gives me 90% of what I'm after and now you've given me the tools to do my own tweaking, so I owe you a pint of Guinness mate. Hopefully I can get to the point where I can add some value by posting my end result.