Merge pull request #786 from kiwix/optimizedWelcome

More tiles on kiwix-serve welcome page (optimised)

static/skin/index.css

@@ -23,15 +23,14 @@ body {
 .kiwixNav {
     background-color: #f4f6f8;
     width: 100%;
-    padding: 20px 11vw 25px;
+    padding: 20px;
-    height: 140px;
 }
 
 .kiwixHomeBody__results {
     font-size: 1.6rem;
     color: #333333;
     font-family: poppins;
-    margin: 10px 0 -5px;
+    margin: -10px 0 -5px;
     position: relative;
     top: -10px;
     left: 13px;
@@ -41,7 +40,7 @@ body {
     display: grid;
     grid-gap: 20px;
     grid-template-columns: 231px 231px;
-    margin: 10px 0;
+    margin: 0 0 10px;
 }
 
 .kiwixNav__kiwixFilter {
@@ -102,7 +101,7 @@ body {
 
 .kiwixSearch {
     height: 35px;
-    width: 229px;
+    width: 231px;
     border-radius: 10px;
     border: solid 1px #b5b2b2;
     padding: 10px;
@@ -129,9 +128,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 +159,8 @@ body {
 
 .book__list {
     position: relative;
+    margin: 0 auto;
+    padding-top: 20px;
 }
 
 .book {
@@ -440,13 +444,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) {
@@ -475,10 +482,4 @@ body {
     .kiwixNav__filters {
         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',
+            layoutMode: 'masonry',
-            cellsByRow: {
+            masonry: {
-                columnWidth: '.book',
+                fitWidth: true
-                rowHeight: '.book'
             }
         });
         footer = document.getElementById('kiwixfooter');

static/templates/index.html

@@ -63,8 +63,9 @@
       </form>
     </div>
     <div class="kiwixHomeBody">
-      <h3 class="kiwixHomeBody__results"></h3>
+      <div class="book__list">
-      <div class="book__list"></div>
+        <h3 class="kiwixHomeBody__results"></h3>
+      </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=56e818cd"
         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"
     },
     {