New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Please make it possible to force the single column view regardless of screen width #5341

Open
adamemerson opened this Issue Oct 11, 2017 · 17 comments

Comments

Projects
None yet
@adamemerson

adamemerson commented Oct 11, 2017

Due to a visual impairment, it's very difficult for me to use the multi-column view. In pre-2.0 versions of Mastodon, I could zoom in a reasonable amount and it would pop into single-column mode.

That behavior changed in the 2.0beta, such that zooming in the usual amount didn't work and instead gave a horizontal scroll bar, which is terrible. The amount I had to zoom in to get the single column view was /far/ too much to be usable and the unscrollable header took up a vast amount of the screen.

So some way to force the single column mode would be very useful.

Thank you.


  • I searched or browsed the repo’s other issues to ensure this is not a duplicate.
  • This bug happens on a tagged release and not on master (If you're a user, don't worry about this).
@nolanlawson

This comment has been minimized.

Collaborator

nolanlawson commented Oct 12, 2017

For the time being, you can add a user style:

.column, .drawer {
  width: 100vw;
}

But yes, this issue has come up a few times (e.g. "how to make the columns wider than 330px") and it would be nice to have a consistent solution. Perhaps users could set their maximum desired width in the settings?

@rtucker

This comment has been minimized.

Contributor

rtucker commented Oct 12, 2017

Can this user style be added from the server end? I am not a front-end designer so I have no idea how to do this (my previous attempts to customize the UI have been... unwise), and I'm hesitant to upgrade to 2.0 as this would significantly impact one of our members.

@nolanlawson

This comment has been minimized.

Collaborator

nolanlawson commented Oct 14, 2017

You can have custom user themes now: tootsuite/documentation#421

@digitalcircuit

This comment has been minimized.

digitalcircuit commented Oct 18, 2017

@nolanlawson In testing via Firefox developer tools (paste into a new temporary stylesheet), that doesn't render the mobile UI, only forces horizontal scrolling, which is explicitly not desired.

It seems that single-column mode depends on window.innerWidth via isMobile...

In app/javascript/mastodon/features/ui/index.js:

<ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={isMobile(width)}>

CSS alone does not seem to cause the server to render what's missing.

Some preference-based addition might work, e.g. singleColumn=(isMobile(width) || forceSingleColumn). I'm not yet sure how to implement this, and it likely still needs to update the theme CSS, too.

For testing, I also tried overriding the window.innerWidth function via the dev-tools console and that failed, too. I might be doing it wrong.

delete window.innerWidth;
window.__defineGetter__('innerWidth',function(){
          return 600; 
})
@thiagomgd

This comment has been minimized.

thiagomgd commented Oct 18, 2017

@nolanlawson yeah, but only admins can add a custom theme, right?
At least I don't see any place to upload or change anything (2 different 2.0 instances)

@unarist

This comment has been minimized.

Collaborator

unarist commented Oct 19, 2017

For the innerWidth hack, also you need to 1) fire resize event to update React state, and 2) override styles with Media Queries (see dae0af1) because it won't be affected by the innerWidth hack.

For example, I'm using the userscript like this to enable multi column in the narrow window, though you want to do the opposite.
https://gist.github.com/unarist/71067609416aed633cf74eddb6feb725#file-mastodon-add-2col-layout-user-js-L40

@unarist

This comment has been minimized.

Collaborator

unarist commented Oct 30, 2017

I'm thinking about changing styles by setting class attribute like .ui-pc .ui-mobile from JS instead of Media Queries which is hard to change for each users. This will also fix flushing of inconsistent state on layout changing (e.g. https://mstdn.maud.io/@Otakan951/98915719323681165).

Then...something like this?

image

@nolanlawson

This comment has been minimized.

Collaborator

nolanlawson commented Oct 30, 2017

Your suggestion looks great to me @unarist

@digitalcircuit

This comment has been minimized.

digitalcircuit commented Oct 31, 2017

@unarist That seems excellent from the technical perspective!

However, may I suggest going one step further for the UI?

If someone always wants single column layout (e.g. @adamemerson), or never wants it, they must set it to 0 px or 9999+ px, which isn't as friendly. There's also no easy way to reset to the defaults if you change it then forget the original value.

Would a HTML <select> with a few options work? E.g.


When to use single column layout: ________

  • Automatic
  • Always
  • Never
  • Custom
    • This adds the pixel number textbox with the px wide or less explanation

With better strings, of course.

This is a bit closer to how some other services handle it, e.g. GMail offers a select menu for overriding Display density, and this allows people to use/avoid single column without having to pick an arbitrarily high or low pixel number.

@nolanlawson

This comment has been minimized.

Collaborator

nolanlawson commented Oct 31, 2017

One important caveat about this fix is that it would affect all web clients. So for instance if you use Mastodon on your 4K monitor at work, your 13-inch laptop at home, and in your mobile browser on your phone, then the same setting will apply to all three, which may not be what the user wants.

Is there some way we could add this as a UI feature (which doesn't persist across clients) without complicating the UI too much? If we did, arguably it could just be a single toggle ("force single-column mode") rather than a pixel breakpoint.

@scififyi

This comment has been minimized.

scififyi commented Nov 24, 2017

@nolanlawson per-device theme choices would be a great feature. There are times that I would like to use one theme on mobile and another on my laptop.

@digitalcircuit

This comment has been minimized.

digitalcircuit commented Feb 1, 2018

Aside, the glitch.social Mastodon fork provides a device-specific option for this:

glitch.social App Settings configuration window, showing the 'General' tab with the 'Layout' dropdown expanded, showing 'Auto', 'Desktop', and 'Mobile'.

There's certainly room for debate over where the options should go, what else might be considered (maybe include a global 'Push notifications on this device' toggle?), etc, but I think device-specific layout overrides remain worthwhile considering. Most websites at least have a way to force the desktop version, e.g. Github's Desktop version link.

@neo-anderson

This comment has been minimized.

neo-anderson commented Mar 23, 2018

Will this happen?
A lot of people (read: my parents and friends) get confused with current UI. I'm trying to get everyone off of FB and introduce them to Mastodon and currently this is the main "blocker".

@moshpirit

This comment has been minimized.

moshpirit commented Mar 28, 2018

Is there any way to detect the length of the screen? if so, it would be much easier to implement, right? (not a dev myself)

@FedericoCeratto

This comment has been minimized.

FedericoCeratto commented Jul 17, 2018

I find the current 4-column layout awkward to the point of not using the service.
The columns force the reader to scroll them very frequently instead of scrolling the whole page once in a while. It forces using the mouse wheel instead of space/page down.
It also wastes almost 50% of the screen space on a wide monitor.

@STPKITT

This comment has been minimized.

STPKITT commented Jul 17, 2018

@FedericoCeratto Try the Pinafore (pinafore.social) frontend in the meantime before quitting Mastodon completely.

@AndreaMonzini

This comment has been minimized.

AndreaMonzini commented Sep 14, 2018

Hello, quick tip: to view a single column in desktop try increase the zoom and resize the window untill you see a single column.
I would like to use a single centered column in desktop but for now i use this workaround (Linux+Firefox).

screenshot from 2018-09-14 11-28-31

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment