Is there a "compact" option like gmail?


(Abram Bailey) #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.


(Michael Howell) #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.


(Abram Bailey) #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.


(Joe) #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:

to this:

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


(Abram Bailey) #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:


(Sam Saffron) #6

Already exists:

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

(Abram Bailey) #7

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


(Joe) #8

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

Cozy (default) topic view:

Compact topic view:

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.

.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.


(Abram Bailey) #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.


(Michael Howell) #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;
}
}

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.


(Abram Bailey) #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.


(Jeff Atwood) #12

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