Use available space for book element

Now we compute the available space in .book__list and if its bigger than half of a book element, the padding from both sides is reduced by a certain amount to accomodate the new element.
kiwix · Jun 23, 2022 · 6440984 · 6440984
1 parent 6938253
commit 6440984
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/static/skin/index.js b/static/skin/index.js
@@ -393,6 +393,38 @@
     });
 
     window.addEventListener('scroll', loadSubset);
+    window.addEventListener('resize', optimizeHomePadding);
+
+    function resetHomePadding() {
+        const kiwixHomeBody = document.querySelector('.kiwixHomeBody');
+        let ogPadding;
+        const mq340 = window.matchMedia('(max-width: 340px)');
+        const mq1100 = window.matchMedia('(max-width: 1100px)');
+        if (mq340.matches) {
+            ogPadding = '5vw';
+        } else if (mq1100.matches) {
+            ogPadding = '10vw';
+        } else {
+            ogPadding = '15vw';
+        }
+        kiwixHomeBody.style.paddingLeft = kiwixHomeBody.style.paddingRight = ogPadding;
+    }
+
+    async function optimizeHomePadding() {
+        resetHomePadding();
+        const bookListWidth = document.querySelector('.book__list').offsetWidth;
+        const bookWidth = document.querySelector('.book').offsetWidth;
+        const remainingSpace = Math.floor(bookListWidth % bookWidth);
+        if (remainingSpace > bookWidth/2) {
+            const kiwixHomeBody = document.querySelector('.kiwixHomeBody');
+            const neededSpace = bookWidth - remainingSpace;
+            const leftPadding = parseInt(window.getComputedStyle(kiwixHomeBody).paddingLeft);
+            const newPadding = leftPadding - neededSpace/2;
+            kiwixHomeBody.style.paddingLeft = newPadding + 'px';
+            kiwixHomeBody.style.paddingRight = newPadding + 'px';
+            await loadAndDisplayBooks();
+        }
+    }
 
     window.onload = async () => {
         iso = new Isotope( '.book__list', {
@@ -416,6 +448,7 @@
         await loadAndDisplayOptions('#languageFilter', `${root}/catalog/v2/languages`, 'language');
         await loadAndDisplayOptions('#categoryFilter', `${root}/catalog/v2/categories`, 'title');
         await loadAndDisplayBooks();
+        await optimizeHomePadding();
         document.querySelectorAll('.filter').forEach(filter => {
             filter.addEventListener('change', () => {resetAndFilter(filter.name, filter.value)});
         });