Port Dashboard to new CSS

[zoepage]

As the new CSS is about to land, how do you feel to port the dashboard to the new stuff? So we also get rid off the in-line / in-file CSS? @magsout @karlcow

[magsout]

@zoepage

As the new CSS is about to land, how do you feel to port the dashboard to the new stuff?

what do you mean by port the dashboard to the new stuff?

Maybe using the --var for colors and sizes, do you imagine something about a new design?

So we also get rid off the in-line / in-file CSS?

oh yeah, I thought about that yesterday and wanted to create an issue, so thank you;)

[zoepage]

Sorry, I should have been more clear. Colours, grid & icons, font should do the trick?

[magsout]

Sorry, I should have been more clear. Colours, grid & icons, font should do the trick?

💯

[zoepage]

If you have questions or I can help, LMK @magsout :)

[magsout]

@zoepage oops, add to my todolist <3

[magsout]

• [ ] move CSS into files handle by Grunt
• [ ] Add JS into Grunt
• [ ] Added Colours - icons and some usefull stuff

nb: it's a specific Grid for the dashboard (grid / table one css/ js logic)

[zoepage]

@magsout

nb: it's a specific Grid for the dashboard (grid / table one css/ js logic)

How do you feel about discussing, if it might be possible to use the existing new grid / extend it?

Add JS into Grunt

Where is the dashboard JS living now?

Added Colours - icons and some usefull stuff

What do we need to add / move here? Is it possible to reuse things from the existing new CSS?

[magsout]

@zoepage

How do you feel about discussing, if it might be possible to use the existing new grid / extend it? sure ;)

Where is the dashboard JS living now?

What do we need to add / move here? Is it possible to reuse things from the existing new CSS?

I don't know yet, I will try something to see

[magsout]

error with uglify.js

  at /Users/GuillaumeDEMESY/Github/webcompat/webcompat.com/node_modules/grunt/lib/util/task.js:220:11
  at process._tickCallback (internal/process/next_tick.js:112:11)

  message: 'Invalid assignment',
  filename: '../lib/dashboard.js',
  line: 6,
  col: 54,
  pos: 305 }
>> Uglifying source webcompat/static/js/lib/dashboard.js failed.
Warning: Uglification failed.
Invalid assignment. 
Line 6 in webcompat/static/js/lib/dashboard.js
 Use --force to continue.

it seems does not like es6 features ike const or fat arrow :(

[Regaddi]

Not yet. I thought about tackling this with the webpack refactor.

[magsout]

branch 2.* seems to understand es6 https://stackoverflow.com/questions/38429567/some-es6-features-are-not-understood-by-grunt-uglify-js

[magsout]

ah no

uglify-js only supports JavaScript (ECMAScript 5).

bheu :(

[zoepage]

How about this... We refactor the CSS and markup, but wait with moving the JS until the webpack refactor @magsout ? :)

[magsout]

@zoepage looks good 👍

[magsout]

close because https://github.com/webcompat/webcompat-metrics-client/issues/172