Improve project overview page

[samuelsidler]

(Note: I'm using WooCommerce as an example for this ticket, but it applies to all projects. I'm also using German, but it applies to all languages.)

The ​current project overview isn't very useful for project maintainers. While we don't directly link to the page anywhere except in the breadcrumbs, we probably should.

Before we improve the design, we should think about who this page is for. Here's some possible candidates:

1. Translators. Do they need to see an overview of translations for all locales? It's unlikely. ​An overview exists for their specific locale.
2. Translation Editors. Same question as above and same answer as above.
3. Project Maintainers. It could be useful for project maintainers (e.g. theme/plugin authors) to have an overview of translations for their projects. Right now, they have to manually go in to each sub project to get an overview of the translation status.

Let's refocus the project overview page and make it useful to project maintainers.

There's a really, really, really rough mockup attached, but essentially, we should do the following:

1. Bring the top part of the page over from the locale-specific overview, including the project description, and the right-floating box with the project name and icon.
2. Move the project actions into the right-floating box, replacing the sub-project drop down.
3. Bring the stats design from the ​stats page, with all locales as the rows and all sub-projects as the columns. We should include the colors from it, the sorting, and basically everything we can. We should also bring over the Waiting column. :)

The numbers on the mockup correspond with the following:

1. Remove the "complete" bar.
2. Project actions drop down is only for admins. Otherwise, the box only contains the project name and icon.
3. Stats should be full-width, not like this ugly mockup (but still just six total columns).
4. Not that many people can see it, but lets change the color of the "Active" tag from a really bright yellow to a WordPress.org green with white text.
5. For those with permissions, we should add the "edit" links to the column heading. Right now, these are next to the name.
6. Not listed, but because we have room, let's use the locale name instead of code in the table.

[samuelsidler]

mockup

[ocean90]

For reference: Project dashboard from Transifex ​https://cloudup.com/c2xum202mgn

[samuelsidler]

Replying to ocean90:

For reference: Project dashboard from Transifex ​https://cloudup.com/c2xum202mgn

Fwiw, one big difference is that we have four subproject and it would be perfectly reasonable for two of them to not be at 100% for a while (if a translator wanted to focus on Development in anticipation of a future release).

[obenland]

First pass. Needs optimization.

[obenland]

In 2046:

Translate: Introduce improved project overview page.

This is ready to go once we figured out the correct route regex for it.

See #1365.

[obenland]

In 2048:

Translate: Waiting strings should be waiting and fuzzy strings.

Continues to use untranslated strings to determine sort order of languages.

See #1365.

[obenland]

In 2049:

Translate: Use more helpful link locations in stats.

Also uses the locale as a title rather than duplicating the name.

See #1365.

[obenland]

In 2051:

Translate: Register route for new project overview page.

Moves GP_WPorg_Route_WP_Plugins into wporg-routes, where it actually belongs.

Props ocean90 for guidance.
Fixes #1365.

[ocean90]

The table styles for narrow screens need an update, see attached screenshot.

[akirk]

Also, I think it would make sense to give the column headers a CSS cursor: pointer so that it is more obvious that the columns are sortable.

[obenland]

In 2070:

Translate: Dynamic table headings for small screens.

Uses the same information for all screen sizes now, which also allows for table
headings to be translated. Makes the cursor a pointer on column headings to
make it a little more obvious they are sortable.

Fixes #1365.

[zodiac1978]

I have spotted a problem on this page:
​https://translate.wordpress.org/projects/wp-plugins/cachify
Cachify has German twice. The second one is for „formal“ but ends up on a 404. (If you click on one of the numbers in that row.)

And I think German (100%) should be first and not last in the table list.

[obenland]

In 2074:

Tranlate: Don't count untranslated strings as translated.

Introduced in [2069].
See #1365.

[obenland]

In 2075:

Translate: Use correct locale slug.

Fixes a bug where links to non-default language sets would end in a 404.

See #1365.

[obenland]

Thanks @zodiac1978, should be fixed now.

[zodiac1978]

Thanks @obenland ! I still see the error, but I think this is just the cache. Will try tomorrow and report back if there are still problems. (Or how long is the expiration of the cache?)

[obenland]

It might not have finished deploying the changes when you checked.

[obenland]

In 2076:

Translate: Fake variant names in row headings.

Props ocean90.
See #1365.