Use flexbox on app page - #1355

@rullzer, thanks for your PR! By analyzing the annotation information on this pull request, we identified @jancborchardt, @MorrisJobke and @DeepDiver1975 to be potential reviewers

Personally, I find it a bit too noisy now since the left ones have the heading on the left and the centre ones have the heading below the image. There is no visual consistency here. May be you want to use two of them instead of the three and make sure the image comes on the left and the content on the right.

Aaah, I missed the second image. Never mind. :P

I think margin for only two columns would be fine.

I like the idea, but it could really be a bit too "noisy". The styling of the per app layout is not so easy, because these are inline-box elements right now.
Experimental apps are separated now:

Thanks for the feedback. I just wanted to get things started. As I have the artistic insight of a table I'll happily hand this over :) I just found that the current design had way to much wasted space.

@eppfel thnx!

My try in making it less noisy:

I think the elements of each app have to be rearranged for a proper overall look. Maybe we have to take the design of the app store into account as well: https://apps.nextcloud.com/

@eppfel looks awesome! (Did I ask you already if you’re going to come to the Nextcloud conference?) ;)

@jancborchardt You did and I will 😉

@eppfel @rullzer is a first version of this ready for getting in, or where do you need help? We should merge it to master soon so we can see how it works and polish it for Nextcloud 11. :)

@jancborchardt It needs to be fixed, because right now it affects the personal settings page as well. Besides that, the flexing seems robust, but the current version still has borders and I would like to get another opinion on that besides yours ;) Maybe there is time during the meetup, but otherwise the week is packed tight.

@eppfel Ready to review? Then change the label ;)

@MorrisJobke Not, yet. I just fixed the spaces with an evil force push. But pssst 🙊 don't tell anyone

@MorrisJobke do you have any take on grid lines vs no grid lines? As @eppfel asked above ;)

@MorrisJobke do you have any take on grid lines vs no grid lines? As @eppfel asked above ;)

I would either go with a higher padding of 40px and no grid lines or leave the grid lines and 30px padding. The higher padding is needed to compensate for the missing visual guidelines. Generally speaking I like the no-gridlines version more, because we only have the line for the sidebar and horizontal lines in the files app for example, but never used vertical grid lines.

@eppfel you wanna try out the higher padding? Then let’s get this in and refine later. I’d hate to have this great improvement laying around for too long. ;)

Jep. I'll try that out. Was just a crazy last week, no time at all.

I only used the padding-right, but 50px, because this side has no sharp edge. Works for me, but I will open another issue for organizing the elements of each app.
I squashed my commits, so ready for gogo!

LGTM

Tested and works 👍

Tested in Firefox, Chrome, Safari, IE11 and Edge

Awesome work @eppfel @rullzer! :) 🚀