Inconsistent Sort Order for the "My Media (small)" Home Screen Buttons

[Guest CodeCat5]

I'm using the "My Media (small)" home screen section and noticed that the ordering is not consistent between apps. For example, in a web browser the order is displayed horizontally like this:

Library 1	Library 2	Library 3
Library 4	Library 5	Library 6

But in the Android app they're sorted vertically like this:

Library 1	Library 3	Library 5
Library 2	Library 4	Library 6

Shouldn't the sort order here be consistent between devices?

[ebr 16184]

Hi.  The top order is used in a vertically scrolling list and the bottom one in a horizontally scrolling one.

That is the difference.

[Guest CodeCat5]

These are both horizontal lists, neither one scrolls vertically... They both appear in the same way, from the same feature, so I would think most people would expect them to be sorted in the same order. Currently it seems you either have to pick one or the other to have things sorted correctly and then just have to live with the inconsistent sorting elsewhere.

Edited February 15, 2024 by CodeCat5

[ebr 16184]

25 minutes ago, CodeCat5 said:

These are both horizontal lists, neither one scrolls vertically...

I think the top one does - its just that, if you only have six libraries, you can't tell.

[Guest CodeCat5]

5 minutes ago, ebr said:

I think the top one does - its just that, if you only have six libraries, you can't tell.

The top one (my web browser) scrolls horizontally, just like the bottom one. In my setup I currently have 13 libraries, I just used 6 above to illustrate an example. On a smaller screen an arrow appears on the right and left to enable the horizontal scrolling.

[ebr 16184]

If the web one is scrolling horizontally, then it is displaying in the incorrect order.

[Guest CodeCat5]

3 hours ago, ebr said:

If the web one is scrolling horizontally, then it is displaying in the incorrect order.

So hopefully this will be corrected then?

[beckfield 173]

I think what's causing some confusion is this:  If the browser window is 1600px wide or larger, the My Media section sorts like this, and the section exceeds the width of the browser, requiring horizontal scrolling:

If the browser window is 1599px wide or less, it sorts like this, and the items wrap, so there's no horizontal scrolling:

As I have always been opposed to horizontal scrolling, I wish it would just always be like the second example.

[Happy2Play 9780]

exactly as flex-direction: row; is lost on lower resolutions.

[Happy2Play 9780]

Full screen

 

Reduced screen

 

 

[Guest CodeCat5]

33 minutes ago, beckfield said:

I think what's causing some confusion is this:  If the browser window is 1600px wide or larger, the My Media section sorts like this, and the section exceeds the width of the browser, requiring horizontal scrolling:

 

Ahhh, yup. I did miss some of the responsive behavior since I just went from 1920px down to 800px~ to make the arrows appear on each side when I was testing. I definitely agree and would prefer the 2nd example as well, but either way if it was just consistent so the order was the same everywhere then I'd be happy enough.

[ebr 16184]

12 minutes ago, CodeCat5 said:

if it was just consistent so the order was the same everywhere then I'd be happy enough.

The order does need to be different with different scrolling directions.

[beckfield 173]

Actually I misspoke about my preference.  I prefer the horizontal ordering, but without the horizontal scrolling.

I have actually achieved this with a bit of custom CSS:

div.homeSectionsContainer div[is="emby-itemscontainer"].itemsContainer {
    flex-flow: wrap !important;
}

[ebr 16184]

15 hours ago, beckfield said:

Actually I misspoke about my preference.  I prefer the horizontal ordering, but without the horizontal scrolling.

I have actually achieved this with a bit of custom CSS:

div.homeSectionsContainer div[is="emby-itemscontainer"].itemsContainer {
    flex-flow: wrap !important;
}

That should be the layout for vertical scrolling, not horizontal...

[beckfield 173]

I'm confusing myself with terminology.

I want it to always be like this, and never see horizontal scrolling, regardless of the browser width:

The CSS bit I showed above makes that happen.

[ebr 16184]

4 minutes ago, beckfield said:

I'm confusing myself with terminology

Yeah, it can get confusing.

4 minutes ago, beckfield said:

I want it to always be like this, and never see horizontal scrolling, regardless of the browser width:

The CSS bit I showed above makes that happen.

If the list is scrolling vertically, then that is the proper layout/order of the items.

[beckfield 173]

1 minute ago, ebr said:

If the list is scrolling vertically, then that is the proper layout/order of the items.

Yes, and the CSS bit I mentioned prevents it from switching to the other way when the browser window narrows below 1600px.  That was my goal.

[Happy2Play 9780]

Better example full screen no scroll

adjust screen changes to scroll

 

But to handle lower resolutions a lower em, 

@media (pointer:fine) and (min-width:80em)
{.itemsContainer-finepointerwrap
  {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

.itemsContainer-finepointerwrap.itemsContainer-sideFooters:not(.virtualItemsContainer)
  {
    -webkit-flex-direction: row;
    flex-direction: row;
    height: auto;
    max-height: initial;
  }

}

 

[ebr 16184]

4 hours ago, Happy2Play said:

Better example full screen no scroll

adjust screen changes to scroll

 

But to handle lower resolutions a lower em, 

@media (pointer:fine) and (min-width:80em)
{.itemsContainer-finepointerwrap
  {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }

.itemsContainer-finepointerwrap.itemsContainer-sideFooters:not(.virtualItemsContainer)
  {
    -webkit-flex-direction: row;
    flex-direction: row;
    height: auto;
    max-height: initial;
  }

}

 

And that example is an excellent illustration of why the order needs to change for a horizontal scroll.  Thx.

[Happy2Play 9780]

1 hour ago, ebr said:

And that example is an excellent illustration of why the order needs to change for a horizontal scroll.  Thx.

True I can see from a lot of libraries, but previous example make it look like there is an issue.

Where there have been other topics on this min-width option being issues on all older 1366 displays.

[beckfield 173]

2 hours ago, ebr said:

And that example is an excellent illustration of why the order needs to change for a horizontal scroll.  Thx.

Could you explain that, please?  I'm not intending to argue against it - I just don't understand what it is that makes it important for the order to change.  For me, it just shows the impracticality of horizontal scrolling, regardless of how the ordering goes.

[Happy2Play 9780]

9 minutes ago, beckfield said:

Could you explain that, please?  I'm not intending to argue against it - I just don't understand what it is that makes it important for the order to change.  For me, it just shows the impracticality of horizontal scrolling, regardless of how the ordering goes.

Full screen will go left to right without scroll, but once scrolling is initiated due to resolution it changes to top to bottom.

 

But the issue is it is not as noticeable when you only have a few libraries.  My previous images with few libraries do not show the scroller like the large test system.

[beckfield 173]

2 minutes ago, Happy2Play said:

Full screen will go left to right without scroll, but once scrolling is initiated due to resolution it changes to top to bottom.

Yes, but @ebris saying it's important that the ordering change when horizontal scrolling appears.  I don't get why.

[Happy2Play 9780]

Just now, beckfield said:

Yes, but @ebris saying it's important that the ordering change when horizontal scrolling appears.  I don't get why.

To a point it is if you want to keep the most libraries on screen so you don't have to scroll.

As my last images show you get your first 12 libraries when it changes without scrolling but with your way you only get first 6 before forced to scroll.

[ebr 16184]

12 hours ago, Happy2Play said:

To a point it is if you want to keep the most libraries on screen so you don't have to scroll.

Well, also, at what point would the first row stop and the second one begin, if horizontally scrolling...?  Then imagine getting from the last item in the first row to the first item in the second row - two items that are supposed to be right next to each other.