Merge pull request #628 from kiwix/clickable-kiwix-serve-tile

static/resources_list.txt

@@ -28,7 +28,7 @@ skin/iso6391To3.js
 skin/isotope.pkgd.min.js
 skin/index.js
 skin/taskbar.css
-skin/home.css
+skin/index.css
 skin/fonts/Poppins.ttf
 skin/fonts/Roboto.ttf
 skin/block_external.js

static/skin/index.css

@@ -141,9 +141,13 @@ body {
     border-color: #acacac;
 }
 
+.book__link {
+    text-decoration: none;
+}
+
 .book__wrapper {
     color: #444343;
-    height: 280px;
+    height: 248px;
     width: 250px;
     margin: 15px;
     background-color: #f7f7f7;
@@ -173,7 +177,7 @@ body {
     max-height: 100%;
 }
 
-.book__title {
+.book__header {
     display: grid;
     font-family: poppins;
     color: black;
@@ -184,18 +188,34 @@ body {
     align-content: center;
 }
 
-#bookSize {
+.book__title {
-    font-size: 1.1rem;
-    margin: 3px 0;
-}
-
-#bookTitle {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     font-size: 1.45rem;
 }
 
+.book__download {
+    font-size: 1.1rem;
+    margin: 3px 0;
+}
+
+.book__download > span {
+    cursor: pointer;
+    text-decoration: none;
+    position: relative;
+    padding: 0 3px 1px;
+    font-family: roboto;
+    background: #00b4e4;
+    color: white;
+    box-shadow: 0 0 0 0;
+    border-radius: 2px;
+}
+
+.book__download > span:hover {
+    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1)
+}
+
 .book__description {
     grid-column: 1 / 3;
     margin: 10px 10px 5px;
@@ -214,7 +234,6 @@ body {
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: 0 0 2px #acacac;
     background-color: #ffffff;
     font-weight: bold;
     font-family: roboto;
@@ -241,34 +260,12 @@ body {
 .book__tags--wrapper {
     overflow: hidden;
     display: -webkit-box;
+    margin-top: auto;
+    margin-bottom: auto;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
 
-.book__links {
-    display: flex;
-    text-align: end;
-    justify-content: flex-end;
-    grid-column: 2 / 3;
-    font-size: 1.1rem;
-    margin: 10px 4px;
-    color: #00b4e4;
-}
-
-.book__links > a, .book__links > span {
-    cursor: pointer;
-    text-decoration: none;
-    color: #00b4e4;
-    position: relative;
-    padding: 1px 6px 0;
-    font-family: roboto;
-}
-
-.book__links > a:hover, .book__links > span:hover {
-    background: #00b4e4;
-    color: white;
-}
-
 .modal-wrapper {
     position: fixed;
     z-index: 100;

static/skin/index.js

@@ -103,15 +103,17 @@
         if (sort) {
             divTag.setAttribute('data-idx', bookOrderMap.get(id));
         }
-        divTag.innerHTML = `<div class="book__wrapper"><div class='book__icon' ><img class="book__icon--image" src='${root}${iconUrl}'></div>
+        divTag.innerHTML = `<a class="book__link" href="${root}${link}" data-hover="Preview">
-            <div class='book__title' title='${title}'>
+            <div class="book__wrapper">
-                <div id="bookTitle">${title}</div>
+            <div class="book__icon"><img class="book__icon--image" src="${root}${iconUrl}"></div>
-                ${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</div>`: ''}
+            <div class="book__header">
+                <div id="book__title">${title}</div>
+                ${downloadLink ? `<div class="book__download"><span data-link="${downloadLink}">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
             </div>
-            <div class='book__description' title='${description}'>${description}</div>
+            <div class="book__description" title="${description}">${description}</div>
-            <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</div>
+            <div class="book__languageTag">${language.substr(0, 2).toUpperCase()}</div>
-            <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
+            <div class="book__tags"><div class="book__tags--wrapper">${tagHtml}</div></div>
-            <div class='book__links'> <a href="${root}${link}" data-hover="Preview">Preview</a>${downloadLink ? `&nbsp;|&nbsp;<span class="download" data-link=${downloadLink} class="modal-button">Download</span>` : ''} </div></div>`;
+            </div></div></a>`;
         return divTag;
     }
 
@@ -126,7 +128,8 @@
 
     function insertModal(button) {
         const downloadLink = button.getAttribute('data-link');
-        button.addEventListener('click', () => {
+        button.addEventListener('click', (event) => {
+            event.preventDefault();
             document.body.insertAdjacentHTML('beforeend', `<div class="modal-wrapper">
                 <div class="modal">
                     <div class="modal-heading">
@@ -226,7 +229,7 @@
             data.querySelectorAll('entry').forEach(entry => {
                 const title = getInnerHtml(entry, 'title');
                 const value = getInnerHtml(entry, valueEntryNode);
-                optionStr += `<option value='${value}'>${humanFriendlyTitle(title)}</option>`;
+                optionStr += `<option value='${value}">${humanFriendlyTitle(title)}</option>`;
             });
             document.querySelector(nodeQuery).innerHTML += optionStr;
         });
@@ -304,7 +307,7 @@
         booksToDelete.forEach(book => {iso.remove(book);});
         books.forEach((book) => {
             iso.insert(generateBookHtml(book, sort))
-            const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .download`);
+            const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .book__download`);
             if (downloadButton) {
                 insertModal(downloadButton);
             }

static/templates/index.html

@@ -24,7 +24,7 @@
     />
     <link
       type="text/css"
-      href="{{root}}/skin/home.css"
+      href="{{root}}/skin/index.css"
       rel="Stylesheet"
     />
     <style>