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

Add CSS styles for min-width beyond 1200px #1536

Open
3 tasks done
SineSwiper opened this issue Jun 23, 2023 · 5 comments
Open
3 tasks done

Add CSS styles for min-width beyond 1200px #1536

SineSwiper opened this issue Jun 23, 2023 · 5 comments
Labels
area: styling enhancement New feature or request

Comments

@SineSwiper
Copy link

Requirements

  • This is a feature request and not a bug report. Otherwise, please create a new bug report instead.
  • Please check to see if this request (or a similar one) already exists.
  • It's a single feature. Please don't request multiple features in one issue.

Describe the feature you'd like

I've got a browser window width spanning just over 2500 pixels. The existing @media (min-width: 1200px) styles are rather limiting, considering how .container and its mates are forced to a max-width of 1140px. So, over half of my browser window on the front page is empty space.

Just getting rid of the max-width on the CSS solves part of it. But, there's also other .col-* properties that could re-adjusted with their flex and max-width columns. The right-pane needs to be shrunk, possibly even to a fix size of 300px or so, and the left-pane expanded as far as it can.

@SineSwiper SineSwiper added the enhancement New feature or request label Jun 23, 2023
@SleeplessOne1917
Copy link
Member

I started toying around with this at one point. I received some feedback that would need to be considered if the left pane is going to take up most of the space: how do we keep a good line length and make it look right when dealing with posts and comments?

@SleeplessOne1917
Copy link
Member

I'm working on this now.

@blox814123
Copy link

blox814123 commented Jun 25, 2023

There's many issues with the basic layout of lemmy besides bugs like collapsed comments re-appearing once you load new comments. It's too spaced out, and doesn't give enough space for the important part - posts and comments.

This modification goes in the right direction: https://github.com/soundjester/lemmy_monkey

Also consider this comment: https://news.ycombinator.com/item?id=36413856

Things I noticed:

  • Inconsistency in post layout between individual posts - design elements should always be at the same place without overflowing irregularly or changing at all. Users need to know where to expect certain buttons and content.
  • Sidebar takes up too much of the users' attention. It's something users look once or twice and then forget about it.
  • Main column with the post titles should be wide enough so that titles don't need more than one line in most circumstances
  • When I go to a lemmy instance, without scrolling I can only see 4 posts. People should see 8-10 posts on first glance, similarily to old reddit.
  • Font size for the top bar (where users sort by top/new, etc.) and the sidebar is too large compared to the font size of the actual content.
  • The colored lines of threaded comments are an unnecessary distraction. The indentation is already sufficient for a user to know what's going on, the line should all have the same unobtrusive color.

When in doubt, look at the design principles of Reddit, especially Old Reddit. Reddit has spent a lot of time on thinking about which information to highlight so that users can focus on the actual content and discussion. Lemmy wastes a lot of users' attention on unnecessary things which makes it very tiring to focus on the actual discussions and content.

@SineSwiper
Copy link
Author

@blox814123, given the current situations with mass migrations, I think short-term fixes are the best route forward, and longer-term refactors can be considered later. Just fix the glaring UI issues first.

@SleeplessOne1917
Copy link
Member

There are now both #1584 and #1590 open to address this issue.

jsit added a commit to jsit/lemmy-ui that referenced this issue Jun 25, 2023
SleeplessOne1917 added a commit that referenced this issue Jun 27, 2023
fix(UI): Make max-width wider, and make sidebar narrower on wide screens (#1536)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area: styling enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants