mastodon / mastodon

Your self-hosted, globally interconnected microblogging community
https://joinmastodon.org
GNU Affero General Public License v3.0
46.43k stars 6.81k forks source link

Advanced Web Interface - Customization Additions #21735

Open darkufo opened 1 year ago

darkufo commented 1 year ago

Pitch

Would be great on the Web UI when a user has selected the Enable advanced web interface that this would then open up some additional Customizations for use with the multi-column interface.

These would include

Motivation

This would allow power users who have lots of columns to better utilize the space and see more information at a glance.

For example if you're not Tooting stuff yourself the whole column for the Toot box is kind redundant and can be hidden away until needed. That provides space for a whole extra column to be visible without having to scroll horizontally.

frenchdevartist commented 1 year ago

It would be nice to have the possibility to set a specific css to change the look and fill.

eishiya commented 1 year ago

Setting the font sizes in em instead of pixels would be a good step towards fixing the font size problem. Because they font sizes are currently in pixels rather than % or em, they override any font size settings the user may have set in their browser, and because the pixel font sizes are set in so many different places, it's difficult to use custom CSS to fix them.

Just setting the body font size in pixels or % and using em for everything else would make the font sizes respond to browser settings and user CSS would have just one thing to change, and then if an option for font size is added to the web client, all it would have to do is change the body font size.

awebeer256 commented 1 year ago

@eishiya Making all sizes (including on body) relative is much more important than allowing the user to customize the size. If the default size inherited from the browser isn't a good fit, then the user should change it at the browser level rather than the site level.

Or put another way, the only use cases I can think of for when a user should change the font size at the site level are: 1) they can't change it at the browser level because the browser doesn't allow it (and I'm not aware of any such browser), or 2) the site doesn't default to respecting the size inherited from the browser (but does allow the user to change the size at the site level, because otherwise the user's desire to make that change is moot).

Incidentally, GitHub itself (infuriatingly) uses px sizes absolutely everywhere 🤬.

Edit: after a bit of searching, I've quickly found that this point has been pretty thoroughly discussed already, first in #873 and then in #14470.

eishiya commented 1 year ago

the only use cases I can think of for when a user should change the font size at the site level are: 1) they can't change it at the browser level because the browser doesn't allow it

Users may want different sizes on different websites, so while changing the default font size in the browser is a good start, there's still value in websites letting users customise their size further. In addition, because so many websites set pixel sizes, many users never change their browser default because it's nigh futile ):

I agree that making the sizes relative should be the priority, but I think that customisation would also be a nice add-on, as it would allow users to customise things with more granularity than their browsers would allow.

mattcoxonline commented 5 months ago

+1 on a few of these suggestions.

I would actually like the columns to have a min-width so they don't shrink too small, but if there are so few of them, that they fill the space available. Like so:

image

How this would work if you could show-hide the toot column (as suggested above):

image

When I'm using a larger resolution / larger monitor, I would genuinely use the Advanced View if I had some better options for column width. Today the columns are too narrow for me, personally. And I have so few columns open at one time there is always a massive empty space to the right of my window.

image