From 6440984f738e51ba43258198578f43405d64518f Mon Sep 17 00:00:00 2001
From: Nikhil Tanwar <2002nikhiltanwar@gmail.com>
Date: Thu, 23 Jun 2022 15:08:44 +0530
Subject: [PATCH] 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.
---
 static/skin/index.js | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/static/skin/index.js b/static/skin/index.js
index 15cc0b166..331d38ecd 100644
--- 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)});
         });