Server: Apps not correctly align on apps page

[schiessle]

I really like the latest changes to the apps page, the raster looks much better than the list. But it seems that sometimes the apps are not correctly align, see this screenshot:

I would expect that the "Versions" app is in the second column, under the text editor and not between the second and the third column.

cc @nextcloud/designers

[eppfel]

Yeah, I was thinking about this might be an issue, but when I created it, it had borders and then it was more clear:
Flexbox distributes it not in columns, but uses the space more flexible. I can look again, but I think there was no "take same size for all elements option". We could revert this and try with floats...

[jancborchardt]

@eppfel try table layout ;D

[schiessle]

Yes, I already assumed that it might be not that easy. But maybe someone finds a creative way to create a "clean table layout" with some css magic. Maybe we could fill up the rows with invisible dummy elements?

[te-online]

If I remember correctly the only way to enhance that is defining widths for the elements.

So for example you would need a width of 33.3333% for each element for a 3-column layout and then change the number of columns depending on the breakpoint. But that's a lot of manual work.

You could also set flex-grow to 0. This would make for a perfect grid, but the elements wouldn't fill up the full page width at some window sizes.

Another method is using a hack like this one: http://stackoverflow.com/questions/16377972/how-to-align-left-last-row-line-in-multiple-line-flexbox/31478004#31478004 (I don't like it...)

I wouldn't use floats (or tables :D) over flexbox in general, though.

[rullzer]

https://github.com/nextcloud/server/blob/master/settings/css/settings.css#L444 <-- shouldn't this to flex: 0 0 330px; do the trick?

[te-online]

Yeah, that's what I mean with flex-grow: 0; 😉
But then it looks like in the screenshot. So it's not using all the available space all the time.

[eppfel]

Thx, @jancborchardt, @rullzer, @te-online Correct me if I'm wrong, but flex-grow: 0 makes using flexbox completely obsolete, because we would have a fixed width and nothing "flexible". That's what I meant with reverting to floats.

The hack needs empty divs, really ugly.

Another option would be to use a responsive grid, so media-queries and percentages, because right now for most screens it would be 1-4 columns.

So, in the end it comes down to what we want.... Again, if you look into the original PR #1355 with borders it gets more clear.

[te-online]

@eppfel Essentially you're right with your summary 😉

Personally, I like the purecss grid, which makes use of flexbox. http://purecss.io/grids/
Maybe we can build our own small grid-css? http://purecss.io/start/#build-your-pure-starter-kit

However, maybe that's also an overcomplicated idea...
I don't really know at the moment 😳

[skjnldsv]

Or we can use pre-defined column values based on width:
http://codepen.io/kunji/pen/yNPVVb

[te-online]

@skjnldsv Thanks for the codepen! 😊
And that's exactly what I named as yet another option.

If I remember correctly the only way to enhance that is defining widths for the elements.

So for example you would need a width of 33.3333% for each element for a 3-column layout and then change the number of columns depending on the breakpoint. But that's a lot of manual work.

We just need to pick one, but I'm still not sure which way we should go.
What do you think @eppfel? Would you write dedicated media queries for this page only?

[eppfel]

@te-online If I am honest I favor flexbox over the grid look. So I'm not the right one to decide on this 😁
If we introduce media-queries or a standard grid, we should choose wisely, so we can reuse it on other occasions.

[jancborchardt]

(@schiessle @skjnldsv @te-online I hope it was obvious that using table layout was a joke. :D This is not tabular data and it doesn’t belong in a table.)

[jancborchardt]

We basically have 2 issues to solve here:

1. The original screenshot posted by @schiessle about the last line being out of alignment if it’s a certain number of entries. This looks quite ugly and unfinished and needs to be fixed.
2. The columns not taking up the whole width, as posted in the screenshot by @te-online. I see this as less of an issue, and if we need to decide for one or the other, I’d definitely say fixing 1. is more important.

[schiessle]

@te-online

But then it looks like in the screenshot. So it's not using all the available space all the time.

What happens if the screen gets smaller? Will the user have to scroll horizontal then or will the layout switch from three to two columns? If it can handle smaller screens we could chose values for large screens (maybe 4-5 columns) to avoid to much empty space at the left and for small screens it will adjust automatically.

If that's the case I agree with @jancborchardt and would opt for this solution but if we risk that people have to scroll horizontally on small screens I'm against it.

[MorrisJobke]

Will the user have to scroll horizontal then or will the layout switch from three to two columns?

I guess we will try to avoid horizontal scrolling as good as we can :) So the layout should adjust to the screen size.

[jancborchardt]

There should definitely be no horizontal scrolling ever. The only case so far is the user management, and even there we should try to get rid of it.

[skjnldsv]

@jancborchardt I have to said I was really scared for a moment! 😂

[eppfel]

So, I sense opting for flex-grow: 0 , this would make columns 330px, but the number of columns completely flexible. Horizontal occurs under 400 something pixel, so maybe there has to be added one media-query.

[te-online]

Where did the horizontal-scroll-bar-topic come from? 😂
(We want them as much as we want tables for layout...)

We have to add one media query for small screens to have a flex of 100%, avoiding horizontal scrolling for screens smaller than 400 something pixel, as @eppfel suggests.

However, I feel that the solution as shown in the codepen posted by @skjnldsv is the most appropriate solution. With small to no overview of the CSS base 😳 I don't really know if we can afford that, but adding a few media queries to make it work properly doesn't seem too far off.

After the time we spent on this issue now, I'd consider the flex-grow: 0 solution a less valuable compromise.

[eppfel]

OK, but the code-pen has to be adjusted, because it ends with a 4 columns. I think it's not a bad idea, I just wont have the time right now.

[skjnldsv]

I have a better solution I think.

#apps-list .section {
    position: relative;
    margin: 0;
    padding-right: 50px;
    width: 330px;
    flex-grow: 2;
    max-width: 660px;
    min-width: 250px;
}

This have a pretty display I think.
We just need to exclude the experimental div separator from the flex flow. by creating two containers or by simply breaking the flex flow.

[eppfel]

@skjnldsv

[skjnldsv]

Yes, it doesn't fit the column, but it looks better, no?

[eppfel]

I think the majority opted for the grid look..

[jancborchardt]

Yeah – we use a grid so all items should be aligned on the grid. Even if the last row doesn’t have all elements to fill the width. :)

[skjnldsv]

So we need to go for the same stuff than the codepen.

[schiessle]

this pr will fix it: https://github.com/nextcloud/server/pull/2434