Jump to content


Photo
- - - - -
resolution

another CSS size breakpoint for large screens

poster images size large display monitor css breakpoint

  • Please log in to reply
6 replies to this topic

#1 computerprep OFFLINE  

computerprep

    Advanced Member

  • Members
  • 341 posts
  • Local time: 04:00 AM
  • LocationCentral Florida

Posted 15 August 2016 - 11:56 AM

I work on a 27" Thunderbolt display often... and it'd be nice if we could get another breakpoint for .scalableCard.portraitCard posters...

 

something around the 2000px mark for 10% width is what I'm thinking, but it might need to be specific to non-retina displays. So the media query should include -webkit pixel ratios and min-resolution.

kinda like this. https://css-tricks.c...ay-media-query/

 

Currently on this screen, poster images are coming out at 311x511px, real life 2.75x4.125" ... they're just monsters.

 

Smaller subset of people, but that group of people will grow as technology gives us larger screens for less $$


Edited by computerprep, 15 August 2016 - 11:57 AM.


#2 anderbytes OFFLINE  

anderbytes

    Advanced Member

  • Members
  • 1087 posts
  • Local time: 07:00 AM
  • LocationRio de Janeiro - Brazil

Posted 18 August 2016 - 10:09 AM

@ Luke , I was going to open a new thread for a similar matter, but instead I'll complement @ computerprep request.

 

My screen is 1600x900, and when I try to view items details, it seems that Emby puts a max width to content that leaves two huge blank areas beside posters and everything (full size.jpg).

 

- If I resize window to smaller sizes, it gets auto-adjusted (as seen in attached small.jpg, medium.jpg and large.jpg)

- If I do custom CSS, like .detailPageContent { max-width: 90%; }  , I can force that the whole window is used, but that is not good because images gets stretched and appears very blurry.

 

 

     All sections are impacted by this width limit: Main info, Cast & crew, Check these out... , Details, Media info...

 

 

Could you please take a look?

Attached Files



#3 anderbytes OFFLINE  

anderbytes

    Advanced Member

  • Members
  • 1087 posts
  • Local time: 07:00 AM
  • LocationRio de Janeiro - Brazil

Posted 19 August 2016 - 04:30 PM

:ph34r: "Fix me! I'm a bad, bad bug !"


Edited by anderbytes, 19 August 2016 - 04:32 PM.


#4 computerprep OFFLINE  

computerprep

    Advanced Member

  • Members
  • 341 posts
  • Local time: 04:00 AM
  • LocationCentral Florida

Posted 19 August 2016 - 05:57 PM

it seems that Emby puts a max width to content that leaves two huge blank areas beside posters and everything


I need time check this out oh a computer before giving a more detailed response, but we "should" be able to solve this properly with custom CSS.

Again, I'll see what I can finagle.

Ultimately, your issue might be best solved with custom CSS. In the world of UI/UX design, you want to keep the total number of characters per line pretty low. Otherwise the average human eye/brain had a hard time tracking to the next line and is more likely to lose interest ave not truly absorb the information they're reading.

The content passes already break the "rule" ... But they do it in a similar way to Netflix, Hulu, and others.

All thus is just to say that removing the margins on the right and left will have very adverse effects to must users. These pages could be organized better, but simply removing the margins is not ideal to implement for everyone.

I like the critical eye, though. Keep posting when you find things that could be improved.

I'll try to look at writing some better custom CSS for you early next week.

#5 anderbytes OFFLINE  

anderbytes

    Advanced Member

  • Members
  • 1087 posts
  • Local time: 07:00 AM
  • LocationRio de Janeiro - Brazil

Posted 19 August 2016 - 06:05 PM

Well, if you consider that main screen and library browser already fill the screen beautifully, I just don't see why this screen can't be that way, too.

About quantity of lines, I already suggested in the past that the number of lines be also customizable. For me, only 1 line would be perfect.

Edited by anderbytes, 19 August 2016 - 06:05 PM.


#6 anderbytes OFFLINE  

anderbytes

    Advanced Member

  • Members
  • 1087 posts
  • Local time: 07:00 AM
  • LocationRio de Janeiro - Brazil

Posted 19 August 2016 - 06:08 PM

Oh.. and more. I saw that server calculates how many photos it returns in real time, so other than what I did with CSS above, don't know what can be done...

#7 anderbytes OFFLINE  

anderbytes

    Advanced Member

  • Members
  • 1087 posts
  • Local time: 07:00 AM
  • LocationRio de Janeiro - Brazil

Posted 21 August 2016 - 07:33 AM

@ Luke , just remembering that Emby TV (https://tv.emby.media) and Emby Theater already arranges everything beautifully.

 

This way, I really believe this is some sort of bug







Also tagged with one or more of these keywords: resolution, poster, images, size, large, display, monitor, css, breakpoint

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users