Add toggle to display Lemmy-UI in fullwidth mode

Klobenda commented 1 year ago

For backend issues, use lemmy

Is your proposal related to a problem?

I’d just like Lemmy to take up the full width of the screen. I hate this design trend of wasting 50% of your screen real estate. Old Reddit scales horizontally pretty well, especially with a plugin to hide the sidebar which makes it work well on portrait and landscape on mobile. Lemmy is cluttered because of how narrow it is. I messed around with the developer console and made it full width and it looked a lot more usable, but unfortunately those changes aren’t permanent and I don’t know how to make a user style or browser plugin to do this change myself.

And I'd have to agree with this user that the option would be nice

Describe the solution you'd like

An option is available to view lemmy in fullwidth. In the front-end template, changing all container-lg to container-fluid does the trick, but I know there's more to adding a toggle than just changing that class.

Describe alternatives you've considered

Users can override it per-instance by adding this userstyle:

.container-lg {
    max-width: unset !important;
}

Additional context

(Write your answer here.)

snvoid commented 1 year ago

Please add this!

dessalines commented 1 year ago

lemmy-ui doesn't have settings of its own, but I'd be willing to merge something that looks better on larger screens, as long as there's no custom css.

Check the containers here: https://getbootstrap.com/docs/4.6/layout/overview/#containers

Klobenda commented 1 year ago

lemmy-ui doesn't have settings of its own, but I'd be willing to merge something that looks better on larger screens, as long as there's no custom css.

Check the containers here: https://getbootstrap.com/docs/4.6/layout/overview/#containers

The only solutions I can think of are

registering your own breakpoint within BS4 (xxl, >= 1700px maybe?) so that you can have a container-xxl class that remains fluid up to a width where it becomes untenable
add a localstorage-backed toggle switch, have that toggle's state determine if the class on the container elements should be container-fluid or container-lg, and the toggle could have d-none d-block-lg to reduce clutter when it's not applicable.

Choosing one of bootstrap's limited sizes is a non-solution, because they end at such a tiny size.

In a perfect world, being able to select between "standard" (current behavior, container-lg), "wide" (the xxl breakpoint option), and "fullwidth" as layout options would be great, but I respect wanting to keep things simple.

Adding a breakpoint should be pretty simple as long as you build off of the SCSS version of BS4 and don't break the rules around breakpoint sizes;

SephGER commented 1 year ago

I think its not done with a simple width-unset. The sidebar will be quite big on larger displays.

dullbananas commented 1 year ago

The width could be adjustable by dragging the side edges of the main content area

SleeplessOne1917 commented 1 year ago

Is there any reason to not just make the container fluid without a toggle? The only feedback I've seen on all of the unnecessary whitespace was negative.

dullbananas commented 1 year ago

Is there any reason to not just make the container fluid without a toggle?

Wide paragraphs can be exhausting to read

https://en.wikipedia.org/wiki/Line_length

JamesLear92 commented 1 year ago

Just tested by disabled max with on "community container-lg" and it looks exactly how I'd want the site to look like. I really hope this is implemented.

SineSwiper commented 1 year ago

Wide paragraphs can be exhausting to read

https://en.wikipedia.org/wiki/Line_length

Under that logic, we should make our paragraphs 40-characters wide, which is just going to make the problem worse.

LemmyNet / lemmy-ui