Skip to content
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

Allow mounting arbitrary columns #3207

Merged
merged 7 commits into from Jun 3, 2017

Conversation

@Gargron
Copy link
Member

commented May 21, 2017

Fix #351

image
image
image

@Gargron

This comment has been minimized.

Copy link
Member Author

commented May 21, 2017

Pain points: We still need to have a context column somewhere to open all the routes in when you click links. Also, it's hard to insert controls for "pinning" and "unpinning" columns into the headers (by hard I mean a lot of annoying code needs to be written or rewritten)

@Gargron Gargron added this to In Progress in v1.5 May 29, 2017
@Gargron Gargron changed the title [WIP] Allow mounting arbitrary columns Allow mounting arbitrary columns May 31, 2017
@beatrix-bitrot

This comment has been minimized.

Copy link
Contributor

commented Jun 1, 2017

hi! I have a couple requests

  1. I had some issues with a column (federated timeline) that I created and pinned failing to update. it seemed ok after a refresh. maybe see if you can reproduce?
  2. I think in the * menu any columns not currently being displayed should be listed, and any currently displayed don't need to be, so maybe they shouldn't? If I hide the notifications column it should be easy for me to get it back using the * menu.

Thanks!

@Gargron Gargron referenced this pull request Jun 3, 2017
1 of 1 task complete
@akihikodaki akihikodaki added the ui label Jun 3, 2017
@Gargron Gargron force-pushed the feature-multicolumn branch from 096caa7 to cbdb54d Jun 3, 2017
Copy link
Contributor

left a comment

nice

@Gargron Gargron merged commit 8ee2eb5 into master Jun 3, 2017
3 checks passed
3 checks passed
codeclimate no new or fixed issues
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
@Gargron Gargron deleted the feature-multicolumn branch Jun 3, 2017
@Gargron Gargron moved this from In Progress to Done in v1.5 Jun 4, 2017
@DJSundog

This comment has been minimized.

Copy link

commented Jun 5, 2017

I'm kind of disappointed this functionality is not exposed via the mobile web interface. Adding functionality that is desktop-only slights the significant portion of the world that has a mobile device but no computer.

I'd request taking a look at adding this new functionality for all web-based layouts so the divide doesn't get any wider than it already is.

@Gargron

This comment has been minimized.

Copy link
Member Author

commented Jun 5, 2017

@DJSundog What exactly is the point of having multiple columns on a small screen?

@Cassolotl

This comment has been minimized.

Copy link

commented Jun 5, 2017

I'm with @DJSundog - I think it'd be cool to have your custom columns show on mobile too, and be able to swipe between them. It seems to me that if we can have 6 buttons at the top on mobile view, why not be able to have more that we chose ourselves? :)

@DJSundog

This comment has been minimized.

Copy link

commented Jun 5, 2017

@Gargron the same as having them on desktop, honestly. I'd like to be able to flip back and forth between feeds outside of the standard four. Having a feed for an active tag I'm interested in, a feed for a conversation I'm participating in, etc. would significantly increase the utility of the web client, regardless of the form factor of the device the web client is being viewed on.

@joyeusenoelle

This comment has been minimized.

Copy link
Contributor

commented Jun 8, 2017

Adding my vote to having this available on the mobile interface. It's not about multiple columns, it's about custom columns. The mobile view kicks in at a VERY wide aperture - so wide that I get it on my desktop just because I prefer to have my browser 2/3-screen instead of full screen. I'm frustrated to hear that this functionality might not be extended to every web user.

@chosafine

This comment has been minimized.

Copy link

commented Jun 8, 2017

@Gargron for phones in landscape, having multiple columns (Tweetbot on iOS for iPhone Plus devices is a good example) can serve useful. Having one very wide column ruins usability in landscape on mobile.

@nightpool

This comment has been minimized.

Copy link
Collaborator

commented Jun 8, 2017

@sydneyfalk

This comment has been minimized.

Copy link

commented Jun 8, 2017

Also, cheaper tablets are a thing. Low res but wider display means one huge wide column every time.

It might be useful to have a ticky that just 'turns off' automatic one-column layout, or at least lower the bar for enforcing it? Or maybe a ticky to force one-column, and a mutually exclusive other ticky that forces multi-column?

@DJSundog

This comment has been minimized.

Copy link

commented Jun 11, 2017

For reference, this is two separate instances of the web app running split screen on my 10" Samsung tablet:

screenshot_20170611-122541

There are definitely devices in use that could benefit from being able to toggle multi-column display.

@Gargron

This comment has been minimized.

Copy link
Member Author

commented Jun 11, 2017

What's a good break point for turning into single-column layout? Currently it's 1024px. 680px?

@DJSundog

This comment has been minimized.

Copy link

commented Jun 11, 2017

Due to HiDPI, this device shows 1024x768 landscape and 768x1024 portrait, so maybe 768px? (Not that my device is the important one, just as a data point)

@sydneyfalk

This comment has been minimized.

Copy link

commented Jun 11, 2017

A lower threshold would help people using laptops or working with smaller screens (netbooks and such), I suppose.

But if a toggle's not off the table: Perhaps a three-state toggle?

      C O L U M N S
 One------Auto------Multi

They can force one column (some people might like that on desktop, visual focus issues can be a thing), they can force multicolumn, they can let the auto-select happen.

@unarist unarist referenced this pull request Jun 24, 2017
koteitan added a commit to koteitan/mastodon that referenced this pull request Jun 25, 2017
* Allow mounting arbitrary columns

* Refactor column headers, allow pinning/unpinning and moving columns around

* Collapse animation

* Re-introduce scroll to top

* Save column settings properly, do not display pin options in
single-column view, do not display collapse icon if there is
nothing to collapse

* Fix one instance of public timeline being closed closing the stream
Fix back buttons inconsistently sending you back to / even if history exists

* Getting started displays links to columns that are not mounted
@nightpool nightpool moved this from Done to Shipped in v1.5 Jul 18, 2017
YaQ00 added a commit to YaQ00/mastodon that referenced this pull request Sep 5, 2017
* Allow mounting arbitrary columns

* Refactor column headers, allow pinning/unpinning and moving columns around

* Collapse animation

* Re-introduce scroll to top

* Save column settings properly, do not display pin options in
single-column view, do not display collapse icon if there is
nothing to collapse

* Fix one instance of public timeline being closed closing the stream
Fix back buttons inconsistently sending you back to / even if history exists

* Getting started displays links to columns that are not mounted
@Zazcallabah

This comment has been minimized.

Copy link

commented Nov 14, 2017

@Gargron You closed several issues relating to column size, referring to this one. But nothing here mentions column size?

@faissaloo

This comment has been minimized.

Copy link

commented Jun 22, 2018

So how do I get the column to stretch the width of the window? @Gargron

@Strit

This comment has been minimized.

Copy link

commented Jul 11, 2018

I think a way to manage column sizes could be done fine with percentages.

100% is the entire screen width of the window. Simply divide that by the number of active columns, so 4 as default, which would give each column 25% width of the window.
HTML websites have been doing similar things for decades at this point.

@fbruetting

This comment has been minimized.

Copy link

commented Aug 12, 2018

The current width is way too narrow. Can’t we drag them as wide as we like to, or something like that?

@fbruetting

This comment has been minimized.

Copy link

commented Aug 12, 2018

The current width is way too narrow. Can’t we drag them as wide as we like to, or something like that?

This here image is way more optimal to me (it’s from Corebird):

@icebreaker

This comment has been minimized.

Copy link

commented Aug 18, 2018

You can always just add a "user script" via Tampermonkey or similar and set the desired column width that way.

See an example over here.

@gsuberland

This comment has been minimized.

Copy link

commented Aug 18, 2018

I have to agree with others. I went searching for a way to get mastadon's columns to be bigger (they look ludicrously cramped on a 4K display) and found #499 - a closed issue that referenced this issue as being a fix. But it appears that this PR does nothing to actually fix that issue.

For reference, this is what it looks like on a 4K screen:

image

I understand that we could use Tampermonkey or similar tools to implement this, but that is neither portable nor reliable, and runs rather antithetical to the fact that this feature was purported to have been implemented.

@fbruetting

This comment has been minimized.

Copy link

commented Aug 18, 2018

@Hoeloe

This comment has been minimized.

Copy link

commented Aug 21, 2018

I'm also using a 4K screen and did a simple change through Firefox's CSS editor to use percentages instead of hardcoded widths, just to see how that would look.
image

Obviously, this works well, and wasn't a difficult change, so it would be nice if something like this were default, because the interface is extremely awkward currently.

In the meantime, here's a Tampermonkey script that makes this change:

// ==UserScript==
// @name         Mastodon Format
// @include      *mastodon.social/*
// ==/UserScript==

function addStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) { return; }
    style = document.createElement('style');
    style.type = 'text/css';
    style.innerHTML = css;
    head.appendChild(style);
}

addStyle(".column, .drawer { min-width: 330px; width: 25%; !important}");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
v1.5
Shipped
You can’t perform that action at this time.