WordPress.org

Making WordPress.org

Opened 3 years ago

Closed 3 years ago

#1238 closed enhancement (fixed)

Stats: General design improvements

Reported by: 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 3 years ago.
mobile-stats.png (36.3 KB) - added by ramiy 3 years ago.
Mobile view with my code

Download all attachments as: .zip

Change History (10)

#1 @samuelsidler
3 years ago

One more thing!

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

#2 @hugobaeta
3 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
3 years ago

In 1903:

Translate, stats overview: Update table styling.

Props hugobaeta.
See #1238.

#4 @ramiy
3 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
3 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
3 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
3 years ago

Mobile view with my code

#7 @samuelsidler
3 years ago

In 1926:

Translate Stats: Update some styles and add responsive styles.

Props ramiy.
See #1238.

#8 @ocean90
3 years ago

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