Apps not correctly align on apps page

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

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...

@eppfel

@eppfel try table layout ;D

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?

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.

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

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.

@jancborchardt

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.

@eppfel

@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 😳

@jancborchardt

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

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.

@eppfel

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.

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.

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.

@skjnldsv

@skjnldsv

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

I think the majority opted for the grid look..

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. :)

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

this pr will fix it: #2434

Navigation Menu

Repository navigation

Apps not correctly align on apps page #1938

9 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Apps not correctly align on apps page #1938

Description

Activity

eppfel commented on Oct 27, 2016

jancborchardt commented on Oct 27, 2016

schiessle commented on Oct 28, 2016

te-online commented on Oct 28, 2016

rullzer commented on Oct 28, 2016

te-online commented on Oct 28, 2016

eppfel commented on Oct 28, 2016

te-online commented on Oct 31, 2016

9 remaining items

skjnldsv commented on Nov 4, 2016

eppfel commented on Nov 4, 2016

te-online commented on Nov 4, 2016

eppfel commented on Nov 4, 2016

skjnldsv commented on Nov 4, 2016

eppfel commented on Nov 5, 2016

skjnldsv commented on Nov 5, 2016

eppfel commented on Nov 5, 2016

jancborchardt commented on Nov 18, 2016

skjnldsv commented on Nov 18, 2016

schiessle commented on Dec 1, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions