1203543 - [dashboard] Redesign dashboards

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, defect, P2)

Description

[Matjaz Horvat [:mathjazz]]

As we add more information to these dashboards, we will eventually need to make them wider. Currently they look like they support monitors from the 80s. I think we can safely make them e.g. 960px wide and thus require monitors from the 90s. :-) Responsive design would be even better.

Also, since projects/locales/resources mostly don't fit into a single screen height, we could use multiple lines per project/locale/resource and bigger fonts.

Comment 1

[Matjaz Horvat [:mathjazz]]

Dashboard titles and subtitles could also use less space.

There should be a clear distinction between main navigation (on top), the newly added 2nd-level navigation (tabs) and other options (like contributor period).

They pages themselves could also look prettier.

Comment 2

[Matjaz Horvat [:mathjazz]]

We might also want to show top contributor of each project/locale on the overview page. And on contributors pages, we could dispaly information like "#2 contributor for this locale and/or project".

We should figure out if there should also be a request a project option on team pages, similarly to request a locale option on project pages.

Comment 3

[Matjaz Horvat [:mathjazz]]

Locale managers should also be listed a long with the option for authenticated users to request (translator) permission from them.

Comment 4

[Matjaz Horvat [:mathjazz]]

One should be able to sign in/out from the dashboard.

Comment 5

[Matjaz Horvat [:mathjazz]]

Things like number of enabled/complete locales for project or enabled/complete projects for locale are also valuable.

Comment 6

[Matjaz Horvat [:mathjazz]]

Locale and project-locale dashboard should have quick links:
- translate N missing strings
- review N suggestions

Comment 7

[Matjaz Horvat [:mathjazz]]

All resources link must be added to project-locale dashboard (blocked by bug 1243086).

Comment 8

[Matjaz Horvat [:mathjazz]]

We should also allow file download/upload.

And include deadline and priority information.

Comment 9

[Matjaz Horvat [:mathjazz]]

In project dashboard, there should be a link to the repository.

Comment 10

[Peiying Mo [:CocoMo]]

I would like to see a Project Info page. Some of this already exists.  This page contains the following, though not limited to, and may or may not be applicable to all projects, and should be configurable:
- Project/Product owner (customer)
- Dev
- Project/product summary
- L10n PM
- production URL
- staging URL
- github URL
- release cycle, deadline, or if one time only, when it ends (such as campaign)
- locale options: required; optional (can community request to participate); open to anyone
- a link to the dashboard of locale translation progress

Comment 12

[[github robot]]

Commit pushed to master at https://github.com/mozilla/pontoon

https://github.com/mozilla/pontoon/commit/6f8f51e9b9c0dda03c6b014f8be60da197424848
Fix bug 1203543: Redesign dashboards (#544)

This is huge. The initial idea was to simply add the ability to track
deadlines and prioritize projects. It turned out we needed to redesign
dashboards to fit new columns, so I revived my old work on
[bug 1203543](https://bugzilla.mozilla.org/show_bug.cgi?id=1203543),
which took care of that.

Here's a short summary of the changes:

**1. The `pontoon.base` app has been split into several (5) new apps:**
* `pontoon.teams`
* `pontoon.projects`
* `pontoon.localizations` (i.e. project-locales)
* `pontoon.machinery` (previously referred to as Terminology in the UI)
* `pontoon.contributors`

I moved URL patterns, views, templates and static files to new apps.
I also refactored some of the macros, widgets and includes to better
suit changes described in the following two items.

The `pontoon.base` app is still around and contains reusable resources,
models, translate view (should be our next target to spin off as spearate
app) and the terms page. Hopefully, the code will now be easier to read
and maintain.

**2. Redesigned dashboards.**
Additional information can now be assigned to projects:
* _deadline_ (styled differently if overdue or approaching)
* _priority level_ (1 to 5 stars)
* _public repository website_ (e.g. https://github.com/mozilla/pontoon-intro/)

Team (locale) dashboards also include new information:
* _writing direction_ (left-to-right or right-to-left)
* _script_ (e.g. latin)
* _number of literate speakers_ (taken from CLDR)
* _bugs_ (bugzilla query shamelessly stolen from elmo)

More information is available on the localization dashboard:
* Contributors
* Project info
* Team info

Latest activity column shows more information about the latest
translation in the tooltip.

Project, Team, and Localization dashboards have received the biggest changes:
* Navigation between their subpages (e.g. between Slovenian projects and
  contributors) is now AJAX-based and as such - faster. Links and history
  should still work as expected. Pages loaded via AJAX live in the
  `includes` folder within their corresponding app.
* Together with Teams, Projects and Top Contributors pages, they
  introduce a richer heading with more information about teams, projects,
  top contributor, project, team, localization and the current stats.
* They contain direct links to translate page for each item in their
  listing of teams, projects or resources. Hover the item and under the
  horizontal progress bar you will notice links for each of the status
  filters.

**3. New header.**
* Header on top of each page has been simplified with less frequent
  actions moved to the menu on the right hand side.
* It contains a placeholder for notifications, which now slide down
  from the top of the page.
* For non-authenticated users, we show a hamburger menu instead of the
  'Anonymous' title with the Red Panda avatar.
* There's also a slim YouTube-like horizontal progress bar on top of the
  header, which shows up on AJAX requests, e.g. as you navigate between
  project dasboard subpages.
* Since header is included almost everywhere, the majority of pages have
  been slightly redesigned to match the new design (color scheme, heading
  style, form widgets).

**4. Other changes.**
* The default page width has been increased to 980px (from 735px).
* We use comma as thousands separator when presenting stats.
* The repository section in the project admin has been redesigned.
* Prefetch latest activity data to reduce number of DB queries and page
  load time on dashboards.