search

loof2736 / scyfin

Custom theme for Jellyfin WebUI
GNU General Public License v3.0
175 stars 18 forks source link

enhancement suggestion about width breakpoints #24

Open Ewillian9 opened 1 month ago

Ewillian9 commented 1 month ago

Hi again So not an issue but a suggestion, https://github.com/jellyfin/jellyfin-web/issues/5411 What do you think? Could it be done, maybe in a fancier way?

loof2736 commented 1 month ago

If I am understanding the issue correctly, wouldn't it be best to just lock the width to a set real world value rather than view width, pixels, etc? ie like this:

/* Ultrawide modifications */
.overflowPortraitCard,
.overflowSquareCard,
.portraitCard,
.squareCard {
    width: 2.2in !important;
}
.overflowBackdropCard,
.overflowSmallBackdropCard {
    width: 3.74in !important;
}

Or are you looking for something different?

Edit: I suppose the inch value in CSS isn't the most reliable thing across different devices, so maybe that other method from the issue you linked would be better

Ewillian9 commented 3 weeks ago

Sorry for the delay, what you provided works fin on ultra wide and even standard 1080p 16:9 but indeed doesn't scale anymore for smaller screen like phones/tablets or small laptops

Ewillian9 commented 3 weeks ago

I'm thinking, could it be possible to apply this css on desktop layout only

HBIDamian commented 3 days ago

After thinking about it, you could achieve the functionality using CSS Media Queries. For example: 

@media only screen and (max-width: 450px) {
  body {
    background-color: #F00;
  }
}

For Mobile devices: 320px - 480px For Tablets or iPad: 480px - 768px For Laptop or small-size screen: 768px - 1024px For Desktop or large-size screen: 1024px - 1200px For Extra-large size devices: 1200px and more

Other media queries could also work, such as aspect-ratio, min-aspect-ratio & max-aspect-ratio