Stats: General design improvements

[samuelsidler]

The stats page is... fine. But we could probably do better.

Once we're a bit more "set" on the list of projects to show (now?) and added the remaining features from #1202, there's a few things we can do to improve the general design of the stats page:

• Make the table full width
• Improve the column / row size and padding throughout so it's less cramped
• Improve the column heading design so they don't bleed together as much
• Improve the design of the Locale column; grey is pretty meh
• Consider how the table looks on mobile; does it even work?
• When sorting, always display the dashes (–) on the bottom, regardless of the sort
• If there's room (and it makes sense) display the locale name (in English) along with the locale code

I'm sure there are other things we'll think of, once the rest of the features are added.

[samuelsidler]

One more thing!

• The table header should be "sticky" when you scroll so you don't lose context

[hugobaeta]

Here's a quick browser inspector mockup idea:

What I changed/added:

.stats-table table.table {
    width: 100%;
}

.stats-table table thead {
    border-bottom: 1px solid #72777C;
    color: #32373C;
}
.stats-table table thead th {
    padding: 10px 3px;
    font-size: .8em;
    line-height: 1.2;
}

.stats-table tbody th {
    padding: 10px;
    background: #f9f9f9;
    box-shadow: inset 0 1px 0 rgba(0,0,0,.05);
}
.stats-table tbody td {
    padding: 10px 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}

[ocean90]

In 1903:

Translate, stats overview: Update table styling.

Props hugobaeta.
See #1238.

[ramiy]

For simple mobile view, we can use:

@media (max-width: 700px) {

	.stats-table table thead th {
		display: block;
		text-align: left !important;
	}
	.stats-table table tbody th,
	.stats-table table tbody tr,
	.stats-table table tbody td {
		display: block;
		text-align: left;
	}
	.stats-table table tbody td {
		padding: 3px 10px;
	}

}

if needed, I can improve it more and give it a nicer look.

[samuelsidler]

@ramiy: Thanks for that code. I think it's a good start! My only comment is that with this CSS, there's no way to see what each percentage means because you can't see the table header (it's always at the top). Is there an adjustment you can make to keep the table header somehow? You can feel free to use JS (jQuery) if necessary.

The code is here (stats-overview.php and style.css).

[ramiy]

@samuelsidler:

The best solution is to do this using CSS, no JS.

@media (max-width: 700px) {

	.stats-table table thead th {
		display: none;
	}
	.stats-table table tbody th,
	.stats-table table tbody tr,
	.stats-table table tbody td {
		display: block;
		text-align: left;
	}
	.stats-table table tbody tr {
		margin-top: 20px;
	}
	.stats-table table tbody td {
		padding: 3px 10px;
		position: relative;
		padding-left: 50%;
	}
	.stats-table table tbody td:before {
		position: absolute;
		top: 0;
		left: 10px;
		width: 45%;
	}

	.stats-table table tbody td:nth-of-type(1):before { content: "4.2.x"; }
	.stats-table table tbody td:nth-of-type(2):before { content: "4.3.x"; }
	.stats-table table tbody td:nth-of-type(3):before { content: "Rosetta"; }
	.stats-table table tbody td:nth-of-type(4):before { content: "Browse Happy"; }
	.stats-table table tbody td:nth-of-type(5):before { content: "Theme Dir"; }
	.stats-table table tbody td:nth-of-type(6):before { content: "Plugin Dir"; }
	.stats-table table tbody td:nth-of-type(7):before { content: "Forums"; }
	.stats-table table tbody td:nth-of-type(8):before { content: "Android"; }
	.stats-table table tbody td:nth-of-type(9):before { content: "iOS"; }
	.stats-table table tbody td:nth-of-type(10):before { content: "Waiting"; }
}

[ramiy]

Mobile view with my code

[samuelsidler]

In 1926:

Translate Stats: Update some styles and add responsive styles.

Props ramiy.
See #1238.