Is there a "compact" option like gmail?

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

5 Likes