Center tiles on welcome page

This change centers tiles on welcome page to give a more consistent whitespace look on both sides.
For this, the layout in Isotope JS is changed to masonry.

static/skin/index.css

@@ -31,7 +31,7 @@ body {
     font-size: 1.6rem;
     color: #333333;
     font-family: poppins;
-    margin: 10px 0 -5px;
+    margin: -10px 0 -5px;
     position: relative;
     top: -10px;
     left: 13px;
@@ -129,9 +129,12 @@ body {
 }
 
 .kiwixHomeBody {
-    padding: 20px 15vw;
+    padding: 20px 0;
     min-height: calc(100vh - 170px);
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .tagFilterLabel {
@@ -157,6 +160,8 @@ body {
 
 .book__list {
     position: relative;
+    margin: 0 auto;
+    padding-top: 20px;
 }
 
 .book {
@@ -440,13 +445,16 @@ body {
 @media screen and (max-width: 1100px) {
 
     .kiwixHomeBody {
-        padding: 20px 10vw;
         min-height: calc(100vh - 170px);
     }
 
     .kiwixNav__filters {
         grid-template-columns: repeat(4, 1fr);
     }
+
+    .book__wrapper {
+        margin: 10px;
+    }
 }
 
 @media screen and (max-width: 590px) {
@@ -476,9 +484,3 @@ body {
         grid-template-columns: 1fr;
     }
 }
-
-@media screen and (max-width: 340px) {
-    .kiwixHomeBody {
-        padding: 20px 5vw;
-    }
-}

static/skin/index.js

@@ -449,10 +449,9 @@
                 }
             },
             sortBy: 'weight',
-            layoutMode: 'cellsByRow',
-            cellsByRow: {
-                columnWidth: '.book',
-                rowHeight: '.book'
+            layoutMode: 'masonry',
+            masonry: {
+                fitWidth: true
             }
         });
         footer = document.getElementById('kiwixfooter');

static/templates/index.html

@@ -63,8 +63,9 @@
       </form>
     </div>
     <div class="kiwixHomeBody">
+      <div class="book__list">
         <h3 class="kiwixHomeBody__results"></h3>
-      <div class="book__list"></div>
+      </div>
       <div id="fadeOut" class="fadeOut"></div>
     </div>
     <div class="loader" style="position: absolute; top: 50%"><div class="loader-spinner"></div></div>

test/server.cpp

@@ -179,12 +179,12 @@ R"EXPECTEDRESULT(      src="/ROOT/skin/jquery-ui/external/jquery/jquery.js?cache
       src="/ROOT/skin/jquery-ui/jquery-ui.min.js?cacheid=d927c2ff"
       href="/ROOT/skin/jquery-ui/jquery-ui.min.css?cacheid=e1de77b3"
       href="/ROOT/skin/jquery-ui/jquery-ui.theme.min.css?cacheid=2a5841f9"
-      href="/ROOT/skin/index.css?cacheid=a1acc52f"
+      href="/ROOT/skin/index.css?cacheid=dff64da8"
         src: url("/ROOT/skin/fonts/Poppins.ttf?cacheid=af705837") format("truetype");
           src: url("/ROOT/skin/fonts/Roboto.ttf?cacheid=84d10248") format("truetype");
     <script src="/ROOT/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
-    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=e99ed2dd" defer></script>
+    <script type="text/javascript" src="/ROOT/skin/index.js?cacheid=ce2c8253" defer></script>
 )EXPECTEDRESULT"
     },
     {