Making WordPress.org

Opened 10 years ago

Closed 10 years ago

#1238 closed enhancement (fixed)

Stats: General design improvements

Reported by: samuelsidler's profile samuelsidler Owned by:
Milestone: Priority: lowest
Component: Translate Site & Plugins Keywords: ui-feedback
Cc:

Description

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.

Attachments (2)

mobile-screenshot.png (55.5 KB) - added by samuelsidler 10 years ago.
mobile-stats.png (36.3 KB) - added by ramiy 10 years ago.
Mobile view with my code

Download all attachments as: .zip

Change History (10)

#1 @samuelsidler
10 years ago

One more thing!

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

#2 @hugobaeta
10 years ago

Here's a quick browser inspector mockup idea:

https://cldup.com/Vt_eTOucaV.png

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);
}

#3 @ocean90
10 years ago

In 1903:

Translate, stats overview: Update table styling.

Props hugobaeta.
See #1238.

#4 @ramiy
10 years ago

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.

#5 @samuelsidler
10 years ago

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

#6 @ramiy
10 years ago

@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
10 years ago

Mobile view with my code

#7 @samuelsidler
10 years ago

In 1926:

Translate Stats: Update some styles and add responsive styles.

Props ramiy.
See #1238.

#8 @ocean90
10 years ago

  • Resolution set to fixed
  • Status changed from new to closed
Note: See TracTickets for help on using tickets.