More tiles on kiwix-serve welcome page (optimised)

[juuz0]

Fixes kiwix/kiwix-tools#538

Before:

Now:

[juuz0]

Though this can be tested from a user-perspective, I have to check something in code hence the WIP status 👍

Done.

[codecov]

Codecov Report

Merging #786 (5aa74c6) into master (dfc6cad) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #786   +/-   ##
=======================================
  Coverage   70.65%   70.65%           
=======================================
  Files          53       53           
  Lines        3708     3708           
  Branches     2061     2061           
=======================================
  Hits         2620     2620           
  Misses       1086     1086           
  Partials        2        2           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update dfc6cad...5aa74c6. Read the comment docs.

[kelson42]

@juuz0 Thank you for your PR, but I can’t believe this is the right approach. Far too complex and no padding change should be necessary. Either the padding is too big or the margin left and right are too big or the current conputation is wrong…. But it should be simpler to put n columns of tiles on a screen to fill it.

[mgautierfr]

In https://svelte.dev/repl/2b6fd14cbd454b339dc8c55ea32d67e0?version=3.48.0 I've simply use a flexbox. The flexbox "computes" the best number of columns and adjust the padding/margin to have a proper layout.
There is no complex computation on our side.
You can try it by changing the width of the result preview.

[juuz0]

@kelson42 ping for re-review

[kelson42]

@juuz0 Thank you for this new PR which seems really more reasonable. I few remarks:

• My personal main problem was the problem visiblem on my iPad. It seems to be fixed now.
• I have added a commit to better align the filters on the left. Hope this is OK for you.
• I want the "number of books" title align left to the tile at the very left
• On my computer I think the margin left and right are still too big (see screenshot). Why there is not one additional tile in the row?
  

[juuz0]

I have removed the centering layout, this is back to normal with a reduced left and right space.
Centring the tiles caused the problem with label, if there were 1 tile, 2 tiles, ....X tiles, it had to be changed all the time. Not easy to calculate correctly.

have added a commit to better align the filters on the left. Hope this is OK for you.

Yes, looks better.

[kelson42]

@juuz0 This is what I get:

• Margin right bigger than margin left
• There is still place for one tile

I'm not against center the tiles, but secure the "X books" title is aligned to the most left tile

[juuz0]

@kelson42 Review ping

[kelson42]

@juuz0 title is ok, but second problem is not fixed,

There is still plently of place for an additional tile in a row. Why you don't reduce the margins left and right?!

[juuz0]

@kelson42 One more review ping :'D

[kelson42]

From a user perspective, it finally works fine!