Center tiles in layout

Now we use masonry layout to center book tiles. The padding of kiwixHomeBody is decreased to decrease whitespace
kiwix · Jun 29, 2022 · 3dc88fc · 3dc88fc
1 parent 12e0fb6
commit 3dc88fc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/static/skin/index.css b/static/skin/index.css
@@ -129,9 +129,12 @@ body {
 }
 
 .kiwixHomeBody {
-    padding: 20px 15vw;
+    padding: 20px 12vw;
     min-height: calc(100vh - 170px);
     position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 .tagFilterLabel {
@@ -157,6 +160,7 @@ body {
 
 .book__list {
     position: relative;
+    margin: 0 auto;
 }
 
 .book {
@@ -447,6 +451,10 @@ body {
     .kiwixNav__filters {
         grid-template-columns: repeat(4, 1fr);
     }
+
+    .book__wrapper {
+        margin: 10px;
+    }
 }
 
 @media screen and (max-width: 590px) {

diff --git a/static/skin/index.js b/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');

diff --git a/test/server.cpp b/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=1206898d"
         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=f7cede39" defer></script>
 )EXPECTEDRESULT"
     },
     {