Center web app on larger windows sizes

[hugogameiro]

On larger screens the web app aligns to the left:

With this commit it would center:

[jemus42]

Is it just me or would anyone else prefer the column width to just increase slightly to fill the available space instead of having empty bars on either sides? :/

Example: Similar to what @chronister did on cybre.space

[hugogameiro]

That could work too. It was just annoying me to see it on the left and did it for my instance. I liked it more like this and decided to do this PR.
Not sure if increasing the columns width wouldn't break something. Didn't even think about that.

[jemus42]

I'm not sure what the best way forward is either, however, I think we're not alone in being mildly unhappy with the default "big empty space to the right"-behaviour, and I'd like to get a discussion with some more input going.

[woganmay]

I might PR for this a bit later today, but I really think Mastodon could use a Custom CSS feature. Nothing hardcore, just a string site-setting that gets rendered out in an on-page <style> tag.

[ericblade]

woganmay,

1.2 added a custom.scss file that can be installed as app/assets/stylesheets/custom.scss. You should do "@import 'application';" in it. Above the import, you can define $color1 through $color9 to change some of the main colors, and below the import, you can override existing styles. (i'm not familiar enough with SCSS to say if it doesn't matter where you put the definitions, i figured putting the variables at the top would define them for the import, and putting overrides at the bottom would take precedence over the import)

That said, the CSS inside the application can be very complex, and you should thoroughly test every change you make, as it may have cascading side effects beyond what you intended, as is the nature of CSS. Particularly, the $color variables, have huge sweeping effects, and changing them to tones that aren't roughly equivalent to the current levels can make your public pages look like a nightmare, despite your UI looking great, or vice versa. I would like to see (or create, if no one gets to it before I do.. busy life.. sigh) a lot more colors broken out into specific variables, instead of being relative to other values.

[mjankowski]

There's currently a rule for @media screen and (min-width: 2560px) which means that on very large screens, what you are describing already happens.

Do you want to look at that rule and see if the min-width there can be reduced instead of adding this new rule? Or did you already do that and this needs to be separate?

[hugogameiro]

@mjankowski I didn't even see that rule + I don't have a screen to test 2560px :)
Still, there is a problem there. The solution implemented there is awesome for huge screens because it centers horizontally + creates a margin vertically + increases column width +50px:

The min-width of 1300px rule is because each column uses 300px and all padding+margins 100px. If we account for the +50px per column on the 2560px rule, the rule I proposed needed to change to at least 1500px.

This causes 2 issues:

• The app is still not centered from 1300px to 1500px
• A window with >1500px and <2500px could probably use the extra vertical space and the top bottom margins look good but take some valuable screen real estate.

I did some testing and I believe we need 2 rules for this. I would suggest, closing this PR and submitting a new one with the following changes to mastodon/app/assets/stylesheets/components.scss

@media screen and (min-width: 1300px) { .columns-area { justify-content: center; } }

@media screen and (min-width: 1900px) { .column, .drawer { width: 400px; border-radius: 4px; height: 96vh; margin-top: 2vh; } }

Preview

Windows larger than 1300px and less 1900px (window in the image 1680px)

Windows larger than 1900px (window in the image 1920px)

Notice that I changed the column size to 400px and the top and bottom margins to 2vh.

Sorry for the huge comment, just wanted to be clear :)

what do you think should I close this PR and submit a new one with the mentioned changes or should we wait for other solutions?

[mjankowski]

That was a very thorough and well explained change!

If you want to either change this PR or open a new PR with those changes ... either way is fine.

[hugogameiro]

@mjankowski Sorry, I suck at Git and didn't know it was this easy to do the changes :P

Did the changes and tested it on my live instance, it is working as expected.

[ashfurrow]

Looks slick!

[ghost]

Hey guys,
I also tried to think about the platform design on web app.

The main idea is to clear the member area on the left, in order to make the writing section bigger and to give place to any future features that would end in this column (I'm thinking about hashtags section, custom header, profile edition buttons, etc).
The switch buttons to gio from a local feed to the global are now above the same section.
the menu on the right is totally new, and allows a better reading of the sections.
Columns/sections are entirely free to resize.

Probably too many options/enhancements/propositions here... and I obviously forgot the search bar above the writing field... but you have the idea :)

[mjankowski]

Does this actually accomplish the centering now?

I would think you'd need something like margin: 0 auto; in the outer thing...

[hugogameiro]

@mjankowski Yes it does. I tested it.
When you first suggested that I looked at @media screen and (min-width: 2560px) (previous comment). I noticed that it worked by just justify-content: center;
So, when I submitted the change I removed the margin:0 auto; and it works.

[mjankowski]

Can you rebase and confirm? I made that change locally and don't see it centered anymore ... it's possible something changed in master since you did this?

[hugogameiro]

@mjankowski I deleted my development instance. I will try and install a new one to test this. Can't promise it will be today but tomorrow tops.

[hugogameiro]

@mjankowski sorry about the delay, only now could get a development instance up.
So, removed the @ media screen and min-width: 1300px and used the current @ media screen and min-width: 1025px to avoid creating another @ media rule.
You were right, the current master will only center with margin: 0 auto.