bfir3 114 Posted July 31, 2019 Share Posted July 31, 2019 (edited) 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 5 Link to comment Share on other sites More sharing options...
neik 837 Posted July 31, 2019 Share Posted July 31, 2019 Nice work you did there! :-) Link to comment Share on other sites More sharing options...
bfir3 114 Posted August 3, 2019 Author Share Posted August 3, 2019 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. 1 Link to comment Share on other sites More sharing options...
neik 837 Posted August 4, 2019 Share Posted August 4, 2019 Would you mind sharing your CSS code? Link to comment Share on other sites More sharing options...
bfir3 114 Posted August 4, 2019 Author Share Posted August 4, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
neik 837 Posted August 4, 2019 Share Posted August 4, 2019 Looking forward to it. Thank you! Link to comment Share on other sites More sharing options...
igeoorge 26 Posted August 13, 2019 Share Posted August 13, 2019 Hi Could you please help me make the cast "round" Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted August 13, 2019 Share Posted August 13, 2019 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 Link to comment Share on other sites More sharing options...
bfir3 114 Posted August 13, 2019 Author Share Posted August 13, 2019 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! Link to comment Share on other sites More sharing options...
igeoorge 26 Posted August 13, 2019 Share Posted August 13, 2019 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. Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted August 13, 2019 Share Posted August 13, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
bfir3 114 Posted August 16, 2019 Author Share Posted August 16, 2019 (edited) 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 3 Link to comment Share on other sites More sharing options...
Oracle 74 Posted August 18, 2019 Share Posted August 18, 2019 I am 100% on board with this. Love this layout. Link to comment Share on other sites More sharing options...
killianbe 0 Posted September 18, 2019 Share Posted September 18, 2019 LINK ,+? Link to comment Share on other sites More sharing options...
chef 3746 Posted September 26, 2019 Share Posted September 26, 2019 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. Link to comment Share on other sites More sharing options...
bfir3 114 Posted September 26, 2019 Author Share Posted September 26, 2019 (edited) 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 Link to comment Share on other sites More sharing options...
chef 3746 Posted September 26, 2019 Share Posted September 26, 2019 Link to comment Share on other sites More sharing options...
killianbe 0 Posted September 28, 2019 Share Posted September 28, 2019 (edited) Any update ? Any @import css ? XD Edited September 28, 2019 by killianbe Link to comment Share on other sites More sharing options...
Dhop84 1 Posted January 26, 2020 Share Posted January 26, 2020 Hay did anything come of this? its so good! Link to comment Share on other sites More sharing options...
GFG80 0 Posted September 20, 2021 Share Posted September 20, 2021 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? Link to comment Share on other sites More sharing options...
Happy2Play 8296 Posted September 24, 2021 Share Posted September 24, 2021 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; } 1 Link to comment Share on other sites More sharing options...
GFG80 0 Posted September 24, 2021 Share Posted September 24, 2021 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. 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