fixed card design

static/skin/home.css

@@ -95,21 +95,31 @@ body {
 }
 
 .book__title {
-    display: flex;
-    align-items: center;
-    font-weight: 500;
-    font-size: 1.3rem;
+    display: block;
     font-family: poppins;
     color: black;
     margin: 10px 10px 0 0;
 }
 
-.book__description {
-    grid-column: 1 / 3;
-    margin: 0.5px 10px;
+#bookSize {
+    font-size: 1.1rem;
+    margin: 3px 0;
+}
+
+#bookTitle {
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 8;
+    font-size: 1.45rem;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
+.book__description {
+    grid-column: 1 / 3;
+    margin: 10px 10px 5px 10px;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 7;
     -webkit-box-orient: vertical;
     font-family: roboto;
     font-weight: 300;
@@ -130,6 +140,7 @@ body {
     width: 25px;
     margin: 10px auto 0 10px;
     border-radius: 5px;
+    font-size: 0.85rem;
 }
 
 .book__tags {
@@ -143,20 +154,43 @@ body {
 }
 
 .book__links {
+    display: flex;
+    text-align: end;
+    justify-content: flex-end;
     grid-column: 2 / 3;
     font-size: 1.1rem;
     margin: 10px;
+    color: #00b4e4;
 }
 
 .book__links > a, .book__links > span {
     text-decoration: none;
-    display: flex;
-    text-align: -webkit-right;
-    justify-content: flex-end;
+    color: #00b4e4;
+    position: relative;
+    padding: 0.2rem 0.6rem 0 0.6rem;
 }
 
-.book__links > a {
-    color: #00b4e4;
+.book__links > a::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    transform: scaleY(0);
+    transform-origin: bottom center;
+    background: #00b4e4;
+    color: white;
+    z-index: -1;
+    transition: transform 0.3s;
+}
+
+.book__links > a:hover::after {
+    transform: scaleY(1);
+}
+
+.book__links > a:hover {
+    color: white;
 }
 
 .book__links > span {

static/skin/index.js

@@ -42,6 +42,17 @@
         return result;
     }
 
+    const humanFriendlySize = (fileSize) => {
+        if (fileSize === 0) {
+            return 'unkown';
+        }
+        const units = ['bytes', 'kB', 'MB', 'GB', 'TB'];
+        let quotient = Math.floor(Math.log10(fileSize) / 3);
+        quotient = quotient < units.length ? quotient : units.length - 1;
+        fileSize /= (1000 ** quotient);
+        return `${+fileSize.toFixed(2)} ${units[quotient]}`;
+      };      
+
     function htmlEncode(str) {
         return str.replace(/[\u00A0-\u9999<>\&]/gim, (i) => `&#${i.charCodeAt(0)};`);
     }
@@ -75,26 +86,31 @@
             })
             .filter((tag, index, tags) => tags.indexOf(tag) === index).join(' | ');
         let downloadLink;
+        let zimSize = 0;
         try {
-            downloadLink = book.querySelector('link[type="application/x-zim"]').getAttribute('href').split('.meta4')[0];
+            const downloadBookLink = book.querySelector('link[type="application/x-zim"]')
+            zimSize = parseInt(downloadBookLink.getAttribute('length'));
+            downloadLink = downloadBookLink.getAttribute('href').split('.meta4')[0];
         } catch {
             downloadLink = '';
         }
 
-        const linkTag = document.createElement('a');
-        linkTag.setAttribute('class', 'book');
-        linkTag.setAttribute('data-id', id);
-        linkTag.setAttribute('href', link);
+        const divTag = document.createElement('div');
+        divTag.setAttribute('class', 'book');
+        divTag.setAttribute('data-id', id);
         if (sort) {
-            linkTag.setAttribute('data-idx', bookOrderMap.get(id));
+            divTag.setAttribute('data-idx', bookOrderMap.get(id));
         }
-        linkTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div>
-            <div class='book__title' title='${title}'>${title}</div>
+        divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img src='${iconUrl}'></div>
+            <div class='book__title' title='${title}'>
+                <div id='bookSize'>${humanFriendlySize(zimSize)}</div>
+                <div id="bookTitle">${title}</div>
+            </div>
             <div class='book__description' title='${description}'>${description}</div>
             <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</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;
+            <div class='book__links'> <a href="${link}" data-hover="Preview">Preview</a>&nbsp;|&nbsp;${downloadLink ? `<a href="${downloadLink}" data-hove="Download" download>Download</a>` : `<span>Download</span>`} </div></div>`;
+        return divTag;
     }
 
     function toggleFooter(show=false) {
@@ -140,8 +156,9 @@
         if (!bookOrderMap.size) {
             if (!noResultInjected) {
                 noResultInjected = true;
-                iso.remove(document.getElementsByClassName('book__list')[0].getElementsByTagName('a'));
+                iso.remove(document.getElementsByClassName('book__list')[0].getElementsByTagName('div'));
                 iso.layout();
+                setTimeout(() => {
                     const divTag = document.createElement('div');
                     divTag.setAttribute('class', 'noResults');
                     divTag.innerHTML = `No result. Would you like to<a href="/?lang="> reset filter?</a>`;
@@ -155,6 +172,7 @@
                         filterTypes.forEach(key => {document.getElementsByName(key)[0].value = params.get(key) || ''});
                     };
                     loader.setAttribute('style', 'position: absolute; top: 50%');
+                }, 300);
             }
             return true;
         } else if (noResultInjected) {