Fixes #1861 - Triage Dashboard Design #1935

magsout · 2017-11-23T17:39:53Z

Let's try with this PR ;)

and maybe @miketaylr for the small JS part?

- Added CSS for improving design - Organize folders and submodules

magsout · 2017-11-23T17:46:22Z

this https://github.com/webcompat/webcompat.com/pull/1935/files#diff-23e0a36bbee957147173901eb77913cbR510 (see #1861 (comment)) is temporary I guess? Seems not safe ..

webcompat/helpers.py

@@ -507,7 +507,7 @@ def add_csp(response):
        "font-src 'self'; " +
        "img-src 'self' https://www.google-analytics.com https://*.githubusercontent.com data:; " +  # nopep8
        "manifest-src 'self'; " +
-        "script-src 'self' https://www.google-analytics.com https://api.github.com; " +  # nopep8
+        "script-src 'self' 'unsafe-inline' https://www.google-analytics.com https://api.github.com; " +  # nopep8 @todo removed unsafe-inline


karlcow

Thanks a lot @magsout.
Some comments and requests for change.

Also the footer might need a bit of text :)

webcompat/templates/dashboard/triage/filters.html

+      >
+        <option value="">All browsers</option>
+        <option value="firefox">Firefox</option>
+        <option value="chrome">Chrome</option>


webcompat/templates/dashboard/triage.html

+    shouldRenderNeedsTriageList()
+  }
+
+  /* readable date*/


webcompat/templates/dashboard/triage.html

+    }
+  }
+
+  /* handle render or not render NeedsTriageList*/


webcompat/templates/dashboard/triage.html

+        Triages.classList.add("is-oldest")
+        break;
+      default:
+        alert("tri non supporté")


webcompat/templates/dashboard/triage/filters.html

+    method="get"
+    action=""
+    role="form"
+  >


webcompat/templates/dashboard/triage/top-bar.html

+</style>
+
+<header class="wc-TopBar" role="banner">
+  <h1 style="margin: 0; font-size: 1.3em">Triage Dashboard</h1>


webcompat/templates/dashboard/triage.html

+    if(renderActivityIndicator) {
+      shouldRenderActivityIndicator()
+    }
+    /* liste triage */


webcompat/templates/dashboard/triage.html

+    }
+  }
+
+  const filteringSort = () => {


magsout · 2017-11-24T08:04:56Z

Tests and typos are fixed. Just need to figure out how to fix the behaviour of the Sort Filter

magsout · 2017-11-24T15:18:43Z

@karlcow ~~I fixed sort filtering, but it let one issue about layout with this filter. I Don't know how I can avoid this behavior using flexbox.~~

~~Maybe flexbox for this filter is not a good idea, and I have to handle it with JavaScript itself. If you have any idea ;)~~

edit: Finally, I decided to use order and array.reverse()

karlcow

ok everything looks good apart of the unsafe script.
Let's see what @miketaylr as he has been the one handling most of the CSP.

webcompat/helpers.py

@@ -507,7 +507,7 @@ def add_csp(response):
        "font-src 'self'; " +
        "img-src 'self' https://www.google-analytics.com https://*.githubusercontent.com data:; " +  # nopep8
        "manifest-src 'self'; " +
-        "script-src 'self' https://www.google-analytics.com https://api.github.com; " +  # nopep8
+        "script-src 'self' 'unsafe-inline' https://www.google-analytics.com https://api.github.com; " +  # nopep8 @todo removed unsafe-inline


webcompat/templates/dashboard/triage.html

  </main>
+<script type="text/javascript">
+  /* Added an event onSubmit form */
+  document.getElementById("js-Filters").addEventListener("submit", (e) => {


webcompat/helpers.py

@@ -507,7 +507,7 @@ def add_csp(response):
        "font-src 'self'; " +
        "img-src 'self' https://www.google-analytics.com https://*.githubusercontent.com data:; " +  # nopep8
        "manifest-src 'self'; " +
-        "script-src 'self' https://www.google-analytics.com https://api.github.com; " +  # nopep8
+        "script-src 'self' 'unsafe-inline' https://www.google-analytics.com https://api.github.com; " +  # nopep8 @todo removed unsafe-inline


miketaylr · 2017-11-27T20:38:55Z

JS looks fine, just have the question why we can't stick it in an external file, rather than special case the CSP policy.

magsout · 2017-11-28T07:19:00Z

@miketaylr thanks for the review, I will stick all the js in an external file.

For fat arrow, the compatilibity seems ok right now, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Browser_compatibility but if you want I can replace by simple functions

- prettify file - remove unsafe-inline scrip src in csp policy

magsout · 2017-11-28T07:27:57Z

@karlcow @miketaylr done

magsout · 2017-11-28T07:28:45Z

@karlcow @miketaylr I guess I let css in html files to avoid conflict with the refactor, what do you think ?

miketaylr · 2017-11-28T16:28:24Z

Awesome -- thanks! Yeah, CSS should be fine. r+ from me. I'll let @karlcow merge in case he has any final thoughts.

karlcow

@magsout A little English grammar mistake.

and maybe slightly rebasing the commits into something cleaner.

And then we will merge.

Thanks a lot.

webcompat/templates/dashboard/triage/needstriage-list.html

+            href="/issues/{{ issue['number'] }}"
+            title="{{ issue['title'] }}"
+          >
+            More informations


miketaylr · 2017-11-30T20:29:37Z

I might take over the history and tweak for @magsout -- I know he's taking care of sick family right now. And I'd like to deploy this today/tomorrow. Thanks!

miketaylr · 2017-11-30T22:01:02Z

I'm just gonna squash it all, the commits touch quite a bit of unrelated things.

* Issue #1861 - Improvements and filtering for dashboard design

magsout added 3 commits November 20, 2017 13:14

Issue #1861 - Improved design

450620b

- Added CSS for improving design - Organize folders and submodules

Issue #1861 - Added JavaScript part to filtering list

84dfc00

Issue #1861 - temp, allow js script inline

e476509

magsout requested a review from karlcow November 23, 2017 17:39

magsout added the status: needs review label Nov 23, 2017

magsout changed the title ~~Issues/1861~~ Fixes #1861 - Triage Dashboard Design Nov 23, 2017

karlcow reviewed Nov 23, 2017

View reviewed changes

karlcow requested changes Nov 24, 2017

View reviewed changes

magsout added 4 commits November 24, 2017 08:47

Issue #1861 - fixed typos, french comments

c7a4f40

Issue #1861 - added new browsers in the list

ee98ecb

Issue #1861 - improved style of Footer

c61259a

Issue #1861 - fixed test, and renamed className

44f6b8e

Issue #1861 - added noResult template

7cc9ed2

Issue #1861 - fixed sort filtering

17abe4d

magsout force-pushed the issues/1861 branch from bd76c82 to 17abe4d Compare November 24, 2017 20:41

issue #1861 - fixed tag not closed and style outside the body

fe350d9

karlcow reviewed Nov 27, 2017

View reviewed changes

miketaylr reviewed Nov 27, 2017

View reviewed changes

Issue #1861 - stick JS in an external file

df8d06e

- prettify file - remove unsafe-inline scrip src in csp policy

karlcow requested changes Nov 30, 2017

View reviewed changes

webcompat/templates/dashboard/triage/needstriage-list.html Outdated

href="/issues/{{ issue['number'] }}"

title="{{ issue['title'] }}"

>

More informations

This comment was marked as abuse.

Sign in to view

Fix typo

e9a276e

miketaylr approved these changes Nov 30, 2017

View reviewed changes

miketaylr merged commit 9f6e502 into dashboard Nov 30, 2017

miketaylr deleted the issues/1861 branch November 30, 2017 22:03

miketaylr pushed a commit that referenced this pull request Nov 30, 2017

Fixes #1861 - Triage Dashboard Design (#1935)

f410625

* Issue #1861 - Improvements and filtering for dashboard design

miketaylr pushed a commit that referenced this pull request Nov 30, 2017

Fixes #1861 - Triage Dashboard Design (#1935)

fb929dd

* Issue #1861 - Improvements and filtering for dashboard design

Fixes #1861 - Triage Dashboard Design #1935

Fixes #1861 - Triage Dashboard Design #1935

Conversation

magsout commented Nov 23, 2017 • edited Loading

magsout commented Nov 23, 2017

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

karlcow left a comment

Choose a reason for hiding this comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

magsout commented Nov 24, 2017 • edited Loading

magsout commented Nov 24, 2017 • edited Loading

karlcow left a comment

Choose a reason for hiding this comment

This comment was marked as abuse.

This comment was marked as abuse.

This comment was marked as abuse.

miketaylr commented Nov 27, 2017

magsout commented Nov 28, 2017

magsout commented Nov 28, 2017

magsout commented Nov 28, 2017

miketaylr commented Nov 28, 2017

karlcow left a comment

Choose a reason for hiding this comment

This comment was marked as abuse.

miketaylr commented Nov 30, 2017

miketaylr commented Nov 30, 2017

magsout commented Nov 23, 2017 •

edited

Loading

magsout commented Nov 24, 2017 •

edited

Loading

magsout commented Nov 24, 2017 •

edited

Loading