Gallery layout bugs in Nextcloud 10

I found two so far - well, one and then an extremely bad animation transition.

So first the bug -

#gallery .row:first-child { margin-top: 2px; }

needs a

added to display the desired margin of 1px (doubled - so 2px between every row) - right now, the first row is displaying a margin of 4px between it and the next row. All the others show a margin of 2px.

Please also understand that allthough the vertical margin between images is 4px - the horizontal margin beween rows should remain 2px - as 4px gives the page an undesired look of using margins that are too big.

The second issue is the more disturbing one in my opinion (although OCD horror on the 4px in the first row is not to be underestimated… :wink: ) - and it concerns the transition animations you added to images loading in - its urksome, it registers as lag, it just takes more time on load in, which is exactly what you don’t want - in short, it does all the wrong things for the wrong reasons.

You have never seen another page elswhere, that accentuates loadingtimes, by flying in images one by one in a row, using a fade in effect as well - to notify the user, that they finished loading - its just bad. So bad. shiver

The worst one by far is:

a.row-element .container { -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }

Just removing that one alone - improves the subjective appearance of loading the site, and scrolling down to unloaded elements much more pleasant - but there are still some others that I argue - arent needed, as they just underline the fact, that the page is loading, as you scroll down.

I just noticed, that the first issue/bug is dependent on the horizontal resolution of the window - as this margin is set up to scale dynamically.

Try it with window sizes of 1024, and 1366 (vertically), and you will see - that the height of that margin changes in an unexpected way. (at 1024 it is too big, at 1366 its just right - :slight_smile: )

This wasn’t the case in 9.x afaik.

edit: Looked at the changelog on github - issues arent as new as previously thought.

I just noticed, that the first issue/bug is dependent on the horizontal resolution of the window - as this margin is set up to scale dynamically.

You’re right. In my tests margin-top should be set either to 1px or 0px, but then the margin between some rows varies as well.
That’s because the browser is scaling rows to fit in the allowed width.

I know what you mean, but that only happens when previews haven’t been generated yet and at the moment it would be worse to remove the transition as we would go from a row bigger than the width of the screen to a row the proper size in an instant.
Once images have previews, I think it’s a nice way to build the wall.

Also, when I resize the window, I like the image resizing effect from the old size to the new one as opposed to just showing them with their new size.

It doesn’t add any time or I don’t understand what you mean.

In any case, if you have a better idea on how to display images as we have them, I’m listening, but I probably won’t make too many changes as the whole resizing will be gone as soon as we collect image sizes on upload.

Maybe you’re looking for this?

Thank you for the quick response.

On the last part - just the additional animation time.

I looked up the changelog on github, and saw - that they werent implemented that recently…

Its just that something felt way off, after the 10.x upgrade… But then, maybe its just “new car smell syndrom…” after all. :wink:

On the mobile skin f.e. you always get only 2 images to load on every “scroll down” - so you are sitting through all those animations every time you move the page along and it takes a long time to load all pictures in a 40 set for example.

I experienced that and a very slow load in (when maybe the previews werent created yet) in a short succession - so maybe that was all it was, in which case, I’m sorry for the confusion caused.

I’ll do some more A/B comparisons tomorrow (currently I’m on the second to last stylesheet on github (that hasn’t all load in transitions the new one has)) - but also, It didn’t register with me as an issue on 9.x - and as the last change on that stylesheet was made a while ago - maybe it WAS just the previews not having been created yet.

edit: And thanks for the link as well, I’ll look it up. edit: Jep, the load in definitely wasn’t as smooth as in the cached example. Also I had this “row by row effect” thats featured in the “uncached” video. It could have very well been the resizing effect that struck me as out of place.

OK

You’re not wrong. I’m not a 100% satisfied with the current solution.

I agree, I wasn’t able to make it smooth on mobile. It stutters, even on reasonably powerful SoCs.

Don’t be sorry. That was your experience of the software and it wasn’t awesome, so we should try and work on that :slight_smile:

For NC11, we should be able to have image sizes for new images stored in the database, which will allow us to have a much nicer “first load” experience and to probably introduce a new slideshow engine.