Preparing new HTML structure

[jbidoret]

In CSS, introduction of first variables, layout helpers, basic styles for inputs, buttons and fields.
In HTML, first step of the restructuration: main wrappers for top bar and nav bar
With layout.php, it mainly consists of re-indentation, light reorganization and the setup of a new strategy to solve #444.

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 18.01%. Comparing base (56ed262) to head (127c560).
Report is 53 commits behind head on master.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@             Coverage Diff              @@
##             master     #461      +/-   ##
============================================
- Coverage     18.23%   18.01%   -0.22%     
- Complexity     2003     2020      +17     
============================================
  Files            71       72       +1     
  Lines          5407     5484      +77     
============================================
+ Hits            986      988       +2     
- Misses         4421     4496      +75     

[vincent-peugnet]

Oh! interesting, I totally forgot that I've put flash messages out of body. Seems better like this !

[vincent-peugnet]

A quick comment: I prefer to keep the JS/no-JS detection for another PR. For me commit 33a1804 could be out of this one.

[jbidoret]

A quick comment: I prefer to keep the JS/no-JS detection for another PR. For me commit 33a1804 could be out of this one.

Don’t know how to remove the commit from the PR…

[jbidoret]

Don’t know how to remove the commit from the PR…
Ok. Simple :)

[vincent-peugnet]

Thanks for the work Julien !!!

Using the default theme, almost everything seems fine to me.

But I see that themes that use borders, like dark-doriphore.css and industrial-dream.css have some issues since they're not updated according to new HTML.

[vincent-peugnet]

One of the thing which is different from the old UI is the "selected menu". Now the font weight get bigger as before it was underlined. I think that this PR should keep the old style to let room for choosing a new style in a different PR. Cause currently I see two issues:

• when menu item from the right side is selected, this may change the item's width and move a little bit all the other.
• on mobile, current menu is not highlighted, which is a regression.

[vincent-peugnet]

Ok, I'm checking the mobile and many little things seems to be broken.

Here is a quick list of thing that should behave like before:

• dropdowns of the nav.hbar (should be aligned to the left)
• form#search shoud disapear
• strange behavior of edit/view/delete/download buttons

Do you need help on this @jbidoret ?

[vincent-peugnet]

this commentary:

/* --------------------------------------------------------- almost untouched… */

have some meaning at the time of this PR, but in the future I'm afraid that it could be misleading 😁

[vincent-peugnet]

If you prefer the style of separator commentary you've used, let change them all in order to unify things !

Let's upgrade thoose /* __________________________ Flash Messages ___________________________ */

[vincent-peugnet]

And if you still have energy, it would be awesome to de a little check to see if there are some dead CSS code.

Mmh, I'm checking and it seems like there is a lot of dead code, which is quite a problem.

For example, in back.css I found many rules applying to <aside> but I think it's not used anywhere covered by this file, as you used <nav> instead.

This lead to another problem:
in base.css, there is also some rules applying to <aside> which is still used in edit view !
the aside block was commonly used by home, media and edit.