Move kiwix-serve home download button at top of the tile

static/skin/home.css

@@ -147,7 +147,7 @@ body {
 
 .book__wrapper {
     color: #444343;
-    height: 280px;
+    height: 248px;
     width: 250px;
     margin: 15px;
     background-color: #f7f7f7;
@@ -188,11 +188,6 @@ body {
     align-content: center;
 }
 
-#bookSize {
-    font-size: 1.1rem;
-    margin: 3px 0;
-}
-
 #bookTitle {
     overflow: hidden;
     white-space: nowrap;
@@ -200,6 +195,11 @@ body {
     font-size: 1.45rem;
 }
 
+#bookDownload {
+    font-size: 1.1rem;
+    margin: 3px 0;
+}
+
 .book__description {
     grid-column: 1 / 3;
     margin: 10px 10px 5px;
@@ -245,32 +245,25 @@ 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 {
+#bookDownload > span {
     cursor: pointer;
     text-decoration: none;
-    color: #00b4e4;
     position: relative;
-    padding: 1px 6px 0;
+    padding: 0 3px 1px;
     font-family: roboto;
-}
-
-.book__links > a:hover, .book__links > span:hover {
     background: #00b4e4;
     color: white;
+    box-shadow: 0 0 0 0;
+}
+
+#bookDownload > span:hover {
+    box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1)
 }
 
 .modal-wrapper {

static/skin/index.js

@@ -106,14 +106,14 @@
         divTag.innerHTML = `<a class="book__link" href="${root}${link}" data-hover="Preview">
             <div class="book__wrapper">
             <div class='book__icon' ><img class="book__icon--image" src='${root}${iconUrl}'></div>
-            <div class='book__title' title='${title}'>
+            <div class='book__title'>
                 <div id="bookTitle">${title}</div>
-                ${humanFriendlyZimSize ? `<div id='bookSize'>${humanFriendlyZimSize}</div>`: ''}
+                ${downloadLink ? `<div id="bookDownload"><span data-link="${downloadLink}" class="modal-button">Download ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
             </div>
             <div class='book__description' title='${description}'>${description}</div>
             <div class='book__languageTag'>${language.substr(0, 2).toUpperCase()}</div>
             <div class='book__tags'><div class="book__tags--wrapper">${tagHtml}</div></div>
-            ${downloadLink ? `<div class='book__links'><span class="download" data-link=${downloadLink} class="modal-button">Download</span></div>` : ''} </div></div></a>`;
+            </div></div></a>`;
         return divTag;
     }
 
@@ -307,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')}"] .modal-button`);
             if (downloadButton) {
                 insertModal(downloadButton);
             }