revamped basic layout and cards

static/resources_list.txt

@@ -25,6 +25,9 @@ skin/iso6391To3.js
 skin/isotope.pkgd.min.js
 skin/index.js
 skin/taskbar.css
+skin/home.css
+skin/fonts/Poppins.ttf
+skin/fonts/Roboto.ttf
 skin/block_external.js
 templates/search_result.html
 templates/no_search_result.html

static/skin/home.css

@@ -0,0 +1,292 @@
+@font-face {
+    font-family: "poppins";
+    src: url("{{root}}/skin/fonts/Poppins.ttf") format("truetype");
+}
+
+@font-face {
+    font-family: "roboto";
+    src: url("{{root}}/skin/fonts/Roboto.ttf") format("truetype");
+}
+
+*,
+*::after,
+*::before {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+body {
+    position: relative;
+    box-sizing: border-box;
+}
+
+::selection {
+    background-color: #00b4e4;
+    color: white;
+}
+
+.kiwixNav {
+    background-color: #f4f6f8;
+    width: 100%;
+    padding: 20px 11vw;
+    height: 17vh;
+}
+
+.kiwixNav__results {
+    font-size: 1.3rem;
+    color: #333333;
+    font-family: poppins;
+    margin: 10px 0;
+}
+
+.kiwixNav__filters {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: repeat(7, 1fr);
+    margin: 10px 0;
+}
+
+.kiwixNav__kiwixFilter {
+    height: 35px;
+    width: 231px;
+    border-radius: 100px;
+    border: solid 1px #b5b2b2;
+}
+
+.kiwixSearch {
+    height: 35px;
+    width: 231px;
+    border-radius: 100px;
+    border: solid 1px #b5b2b2;
+}
+
+.kiwixHomeBody {
+    padding: 20px 15vw;
+    min-height: 79vh;
+}
+
+.book__list {
+    position: relative;
+}
+
+.book {
+    text-decoration: none;
+}
+
+.book__wrapper {
+    color: #444343;
+    height: 280px;
+    width: 250px;
+    margin: 15px;
+    background-color: #fcfcfc;
+    box-shadow: 0 0 5px #acacac;
+    border-radius: 3px;
+    display: grid;
+    grid-template-columns: 65px 1fr;
+    grid-template-rows: 70px 120px 1fr 1fr;
+    grid-gap: 5px;
+    transition: transform 0.25s;
+}
+
+.book__wrapper:hover {
+    transform: scale(1.07);
+}
+
+.book__icon {
+    display: flex;
+    align-items: center;
+    margin: 10px 0 0 10px;
+}
+
+.book__title {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+    font-size: 1.3rem;
+    font-family: poppins;
+    color: black;
+    margin: 10px 10px 0 0;
+}
+
+.book__description {
+    grid-column: 1 / 3;
+    margin: 1px 10px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 9;
+    -webkit-box-orient: vertical;
+    font-family: roboto;
+    font-weight: 300;
+    color: #4d4d4d;
+}
+
+.book__languageTag {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 2px #acacac;
+    background-color: #ffffff;
+    font-weight: bold;
+    font-family: roboto;
+    color: black;
+    height: 25px;
+    width: 25px;
+    margin: 10px auto 0 10px;
+    border-radius: 5px;
+}
+
+.book__tags {
+    display: flex;
+    text-align: right;
+    margin-right: 10px;
+    margin-top: 10px;
+    justify-content: end;
+    font-family: roboto;
+    color: #909090;
+}
+
+.book__links {
+    grid-column: 2 / 3;
+    font-size: 1.1rem;
+    margin: 10px;
+}
+
+.book__links > a, .book__links > span {
+    text-decoration: none;
+    display: flex;
+    text-align: right;
+    justify-content: end;
+    align-items: flex-end;
+}
+
+.book__links > a {
+    color: #00b4e4;
+}
+
+.book__links > span {
+    color: #31353e;
+}
+
+.fadeOut {
+    position: fixed;
+    display: none;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    background: linear-gradient(180deg, rgba(232, 232, 232, 0) 0%, #ffffff 100%);
+    height: 80px;
+    width: 100%;
+}
+
+.noResults {
+    position: absolute;
+    top: 48%;
+    width: 100%;
+    text-align: center;
+    font-size: 1.6rem;
+}
+
+.loader-spinner {
+    position: absolute;
+    top: -50%;
+    left: 50%;
+    border: 5px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 5px solid #3498db;
+    width: 40px;
+    height: 40px;
+    margin: auto;
+    -webkit-animation: spin 1s linear infinite; /* Safari */
+    animation: spin 1s linear infinite;
+    margin-top: 35px;
+    margin-bottom: -35px;
+    z-index: 2;
+}
+  /* Safari */
+@-webkit-keyframes spin {
+    0% { -webkit-transform: rotate(0deg); }
+    100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loader {
+    display: none;
+    position: relative;
+    height: 70px;
+    width: 100%;
+}
+
+.kiwixfooter {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    text-align: center;
+    font-size: 1.6rem;
+    height: 3vh;
+}
+
+.kiwixfooter > a {
+    width: auto;
+}
+
+@media screen and (max-width: 1100px) {
+
+    .kiwixHomeBody {
+        padding: 20px 11vw;
+    }
+
+    .kiwixNav__filters {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+@media screen and (max-width: 650px) {
+    .kiwixNav__filters {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media screen and (max-height: 900px) {
+
+    .kiwixNav {
+        height: 31vh;
+    }
+
+    .kiwixHomeBody {
+        min-height: 64vh;
+    }
+
+    .kiwixfooter {
+        height: 5vh;
+    }
+
+}
+
+@media screen and (max-height: 450px) {
+
+    .kiwixNav {
+        height: 55vh;
+    }
+
+    .kiwixHomeBody {
+        min-height: 39vh;
+    }
+
+    .kiwixfooter {
+        height: 5vh;
+    }
+
+    .noResults {
+        top: 65%;
+    }
+
+}

static/skin/index.js

@@ -46,7 +46,7 @@
     }
 
     function viewPortToCount(){
-        return Math.floor(window.innerHeight/100 + 1)*(window.innerWidth>1000 ? 3 : 2);
+        return Math.floor(window.innerHeight/300 + 1)*(window.innerWidth>1000 ? 4 : 3);
     }
 
     function getInnerHtml(node, query) {
@@ -59,8 +59,26 @@
         const description = getInnerHtml(book, 'summary');
         const id = getInnerHtml(book, 'id');
         const iconUrl = getInnerHtml(book, 'icon');
-        const articleCount = getInnerHtml(book, 'articleCount');
+        const language = getInnerHtml(book, 'language');
-        const mediaCount = getInnerHtml(book, 'mediaCount');
+        const tags = getInnerHtml(book, 'tags');
+        let tagHtml = tags.split(';').filter(tag => { return !(tag.split(':')[1] && tag.split(':')[1] == 'no')})
+            .map((tag) => {
+                tag = tag.split(':');
+                if (tag.length === 1) {
+                    return tag[0].replace(/_/, ' ');
+                } else if (tag[1] !== 'yes') {
+                    return tag[1].replace(/_/, ' ');
+                } else {
+                    return (tag[0].indexOf('_') === 0 ? tag[0].replace('_', '') : tag[0]).replace(/_/, ' ');
+                }
+            })
+            .filter((tag, index, tags) => tags.indexOf(tag) === index).join(' | ');
+        let downloadLink;
+        try {
+            downloadLink = book.querySelector('link[type="application/x-zim"]').getAttribute('href');
+        } catch {
+            downloadLink = '';
+        }
 
         const linkTag = document.createElement('a');
         linkTag.setAttribute('class', 'book');
@@ -69,11 +87,12 @@
         if (sort) {
             linkTag.setAttribute('data-idx', bookOrderMap.get(id));
         }
-        linkTag.innerHTML = `<div class='book__background' style="background-image: url('${iconUrl}');">
+        linkTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div>
             <div class='book__title' title='${title}'>${title}</div>
             <div class='book__description' title='${description}'>${description}</div>
-            <div class='book__info'>${articleCount} articles, ${mediaCount} medias</div>
+            <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</div>
-        </div>`;
+            <div class='book__tags'>${tagHtml}</div>
+            <div class='book__links'> ${downloadLink ? `<a href="${downloadLink}" download>Download</a>` : `<span>Download</span>`} </div></div>`;
         return linkTag;
     }
 
@@ -87,7 +106,6 @@
     }
 
     async function loadBooks() {
-        const loader = document.querySelector('.loader');
         loader.style.display = 'block';
         return await fetch(queryUrlBuilder()).then(async (resp) => {
             const data = new window.DOMParser().parseFromString(await resp.text(), 'application/xml');
@@ -96,12 +114,14 @@
                 bookOrderMap.set(getInnerHtml(book, 'id'), idx);
             });
             incrementalLoadingParams.start += books.length;
-            if (parseInt(data.querySelector('totalResults').innerHTML) === bookOrderMap.size) {
+            const results = parseInt(data.querySelector('totalResults').innerHTML)
+            if (results === bookOrderMap.size) {
                 incrementalLoadingParams.count = 0;
                 toggleFooter(true);
             } else {
                 toggleFooter();
             }
+            document.querySelector('.kiwixNav__results').innerHTML = `Results: ${results} items`
             loader.style.display = 'none';
             return books;
         });
@@ -131,12 +151,14 @@
                     resetAndFilter();
                     filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
                 };
+                loader.setAttribute('style', 'position: absolute; top: 50%');
             }
             return true;
         } else if (noResultInjected) {
             noResultInjected = false;
             document.getElementsByClassName('noResults')[0].remove();
         }
+        loader.removeAttribute('style');
         return false;
     }
 
@@ -223,7 +245,12 @@
                     return index ? parseInt(index) : Infinity;
                 }
             },
-            sortBy: 'weight'
+            sortBy: 'weight',
+            layoutMode: 'cellsByRow',
+            cellsByRow: {
+                columnWidth: '.book',
+                rowHeight: '.book'
+            }
         });
         footer = document.getElementById('kiwixfooter');
         fadeOutDiv = document.getElementById('fadeOut');

static/templates/index.html

@@ -2,6 +2,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
     <title>Welcome to Kiwix Server</title>
     <script
       type="text/javascript"
@@ -21,177 +22,30 @@
       href="{{root}}/skin/jquery-ui/jquery-ui.theme.min.css"
       rel="Stylesheet"
     />
-    <style>
+    <link
-      html {
+      type="text/css"
-        min-height: 100%;
+      href="{{root}}/skin/home.css"
-        position: relative;
+      rel="Stylesheet"
-      }
+    />
-      body {
-        background: radial-gradient(#eeeeee 15%, transparent 16%) 0 0,
-          radial-gradient(#eeeeee 15%, transparent 16%) 8px 8px,
-          radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px,
-          radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px;
-        background-color: #e8e8e8;
-        background-size: 16px 16px;
-        margin-left: auto;
-        margin-right: auto;
-        max-width: 1100px;
-        min-height: 100%;
-      }
-      .book__list {
-        text-align: center;
-      }
-      .kiwixHomeBody {
-        position: relative;
-        text-align: center;
-        min-height: 100%;
-        margin: 0 0 15px;
-      }
-      .book {
-        display: inline-block;
-        vertical-align: bottom;
-        margin: 8px;
-        padding: 12px 15px;
-        width: 300px;
-        border: 1px solid #ccc;
-        border-radius: 8px;
-        text-align: left;
-        color: #000;
-        font-family: sans-serif;
-        font-size: 13px;
-        background-color: #f1f1f1;
-        box-shadow: 2px 2px 5px 0 #ccc;
-      }
-      #kiwixfooter {
-        text-align: center;
-        margin: 0.5em;
-        position: absolute;
-        bottom: 0;
-        left: 46%;
-      }
-      .kiwixHomeNavbar {
-        display: flex;
-        justify-content: center;
-      }
-      .kiwixFilter {
-        margin: 8px 10px;
-      }
-      .kiwixSearch, .searchButton {
-        margin: 0 13px 0 0;
-      }
-      .kiwixSearchForm {
-        margin: 8px 10px;
-        float: right;
-      }
-      @media (max-width: 1100px) {
-        .kiwixHomeBody {
-          padding: 0 125px;
-        }
-      }
-      .book:hover {
-        background-color: #f9f9f9;
-        box-shadow: none;
-      }
-      .book__background {
-        background-repeat: no-repeat;
-        background-size: 48px 48px;
-        background-position: top right;
-      }
-      .book__title {
-        padding: 0 55px 0 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 18px;
-        color: #0645ad;
-        line-height: 1em;
-      }
-      .book__description {
-        padding: 5px 55px 5px 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 15px;
-        line-height: 1em;
-      }
-      .book__info {
-        color: #777;
-        font-weight: bold;
-        font-size: 13px;
-        line-height: 1em;
-      }
-      a:link {
-        text-decoration: none;
-      }
-      a:visited {
-        text-decoration: none;
-      }
-      .noResults {
-        position: absolute;
-        top: 48%;
-        left: 42%;
-      }
-      .loader-spinner {
-        position: absolute;
-        top: -50%;
-        left: 50%;
-        border: 5px solid #f3f3f3;
-        border-radius: 50%;
-        border-top: 5px solid #3498db;
-        width: 40px;
-        height: 40px;
-        margin: auto;
-        -webkit-animation: spin 1s linear infinite; /* Safari */
-        animation: spin 1s linear infinite;
-        margin-top: 35px;
-        margin-bottom: -35px;
-        z-index: 2;
-      }
-      /* Safari */
-      @-webkit-keyframes spin {
-        0% { -webkit-transform: rotate(0deg); }
-        100% { -webkit-transform: rotate(360deg); }
-      }
-      @keyframes spin {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-      }
-      .loader {
-        position: relative;
-        height: 70px;
-        width: 100%;
-      }
-      .fadeOut {
-        position: fixed;
-        display: none;
-        bottom: 0;
-        left: 0;
-        z-index: 1;
-        background: linear-gradient(180deg, rgba(232, 232, 232, 0) 0%, rgb(232, 232, 232) 100%);
-        height: 80px;
-        width: 100%;
-      }
-      .spacer {
-        height: 20px;
-        background: transparent;
-      }
-    </style>
     <script src="{{root}}/skin/isotope.pkgd.min.js" defer></script>
     <script src="{{root}}/skin/categoryList.js"></script>
     <script src="{{root}}/skin/langList.js"></script>
     <script src="{{root}}/skin/iso6391To3.js"></script>
     <script type="text/javascript" src="{{root}}/skin/index.js" defer></script>
   </head>
-  <body class="kiwix">
+  <body>
-    <div class='kiwixHomeNavbar'>
+    <div class='kiwixNav'>
-      <select name="lang" id="languageFilter" class='kiwixFilter'>
+      <h3 class="kiwixNav__results"></h3>
-        <option value="" selected>All languages</option>
+      <div class="kiwixNav__filters">
-      </select>
+        <select name="lang" id="languageFilter" class='kiwixNav__kiwixFilter'>
-      <select name="category" id="categoryFilter" class='kiwixFilter'>
+          <option value="" selected>All languages</option>
-        <option value="" selected>All categories</option>
+        </select>
-      </select>
+        <select name="category" id="categoryFilter" class='kiwixNav__kiwixFilter'>
-      <form id='kiwixSearchForm' class='kiwixSearchForm'>
+          <option value="" selected>All categories</option>
-        <input type="text" name="q" id="searchFilter" class='kiwixSearch'>
+        </select>
+      </div>
+      <form id='kiwixSearchForm' class='kiwixNav__SearchForm'>
+        <input type="text" name="q" placeholder="Search" id="searchFilter" class='kiwixSearch'>
         <input type="submit" class="searchButton" value="Search"/>
       </form>
     </div>
@@ -199,8 +53,7 @@
       <div class="book__list"></div>
       <div id="fadeOut" class="fadeOut"></div>
     </div>
-    <div class="loader"><div class="loader-spinner"></div></div>
+    <div class="loader" style="position: absolute; top: 50%"><div class="loader-spinner"></div></div>
-    <div class="spacer"></div>
+    <div id="kiwixfooter" class="kiwixfooter">Powered by <a href="https://kiwix.org"> Kiwix</a></div>
-    <div id="kiwixfooter">Powered by <a href="https://kiwix.org">Kiwix</a></div>
   </body>
 </html>