Is there a "compact" option like gmail?

UX
1

Gmail offers a nice option to reduce or increase whitespace:

image

Some of the forum participants on my forum have complained about the whitespace (“too much”)… I’m personally OK with it, but just wanted to know if I was missing an option somewhere.

4 Likes
2

In Admin -> Customize -> Themes, you could create a theme that they could pick. There’s not a compact theme in the default set, but you’d do it there.

Then you could pick it in Preferences -> Interface -> Theme.

9 Likes
3

Thanks that’s helpful. If anyone has made those CSS changes and wants to share, it’d be appreciated. Given the variety of user preferences when it comes to whitespace, I think a default compact theme option would be desirable.

1 Like
4

It would help if you specify what you’re trying to reduce exactly. Are we just talking about the white space between topics in the topic list? You can change the default view, or this:

default discourse view
Capture2.PNG1200×616 64.1 KB

to this:

compact discourse view
Capture1.PNG1179×601 95.3 KB

By adding this CSS

.topic-list td {
    padding: 2px 5px;
}

and see if that gets you closer to what you want. If so, you can make that into a selectable theme as @notriddle pointed out above.

If that’s too compact for your taste you can increase the first number to add more white space.

the default is 12px 5px

8 Likes
5

Thanks for the reply. Very helpful. I will look at making this an option for users. As an aside, I wish there was a way to fork a theme and just make a slight modification rather than having to copy changes to the CSS across themes to maintain some minor theming difference like the code you supplied above. It would be nice if the initial fork could stay synced with the parent theme and any minor changes could be auto-merged into any changes in the parent, etc.

Here’s what one of the users posted on my forum:

image
image979×784 160 KB

2 Likes
6

Already exists:

  1. Create theme, amend CSS to “original”
  2. Add theme component to theme, add your modifications there
5 Likes
7

Oh awesome, thanks @sam. I obviously missed something there :wink:

8

This about as far as I could reduce white space without overly interrupting the feel of Discourse.

Cozy (default) topic view:

cozy topic view with default white space
cozy topic view with default white space1973×1904 203 KB

Compact topic view:

compact topic view with reduced white space
compact topic view with reduced white space1964×1859 227 KB

And this is what I ended up with:

.topic-body {
	padding: 7px 11px;
}

.post-menu-area {
	margin-top: 0;
}

.timeline-container {
	margin-left: 637px;
}

@media (min-width: 1250px) {
	.timeline-container {
		margin-left: 770px;
	}
}

@media (min-width: 1140px) {
	.timeline-container {
		margin-left: 700px;
	}
}

There’s more white space that can be reduced but it’s a matter of personal preference at that point.

However…

For reference only.

Here’s the extra compact CSS for reference if that’s what you really like.

extra-compact
extra-compact1980×1919 256 KB 

.topic-body {
	padding: 5px 11px;
}

.post-menu-area {
	margin-top: 0;
	margin-bottom: 0;
}

.timeline-container {
	margin-left: 637px;
}

#suggested-topics {
	padding-top: 0;
}

.topic-status-info {
	padding: 5px 0px;
}

@media (min-width: 1250px) {
	.timeline-container {
		margin-left: 770px;
	}
}

@media (min-width: 1140px) {
	.timeline-container {
		margin-left: 700px;
	}
}

My opinion is this needs additional visual ques. Reducing the white space by this much creates a need for color shading to assist readability.

6 Likes
9

@lll Thanks so much for taking the time to post this. I will add it to our site and give people the option to use it. It will be interesting to see how many select the compact theme.

1 Like
10

That’s not compact. This is compact:

.topic-body {
	padding: 7px 11px;
}

.post-menu-area {
	margin-top: 0;
}

.topic-meta-data .post-info {
    float: none;
}

.topic-list th, .topic-list td {
  padding-top: 5px;
  padding-bottom: 5px;
}

@media (min-width:900px) {
.topic-meta-data .post-info {
    float: none;
}
.post-menu-area {
    position: absolute !important;
    top: -40px;
    right: 0;
}
.who-liked {
    margin-top: 0;
    padding: 2px;
    background: #fff;
    box-shadow: 0 2px 4px #333;
}
}

1404×906 86 KB

At least to me, it seems like most of the empty space in Discourse is to the left of the post action bar. Hence, a compact theme’s goal is to get rid of that, while still preserving a readable line length.

2 Likes
11

The one issue with placing the post-menu-area in the top right absolutely is that when a post is in reply to someone, it will overlap their name.

3 Likes
12

I agree with @abrambailey it is not recommendable to move the post actions up there.

3 Likes
13

Just getting going with Discourse. I would also welcome a more compact view, though I’m not yet familiar enough with Discourse to start tweaking the CSS or themes. There’s a lot of white screen up there…

4 Likes