Merge pull request #1094 from kiwix/downloadBtn

More conspicuous download button
kiwix · Sep 11, 2024 · f5c91cc · f5c91cc
2 parents bec80e8 + 3cdc036
commit f5c91cc
Show file tree

Hide file tree

Showing 7 changed files with 169 additions and 111 deletions.
diff --git a/static/resources_list.txt b/static/resources_list.txt
@@ -4,6 +4,7 @@ skin/magnet.png
 skin/feed.svg
 skin/langSelector.svg
 skin/download.png
+skin/download-white.svg
 skin/hash.png
 skin/search-icon.svg
 skin/iso6391To3.js

diff --git a/static/skin/download-white.svg b/static/skin/download-white.svg
diff --git a/static/skin/index.css b/static/skin/index.css
@@ -152,23 +152,24 @@
 
 .book__link {
     text-decoration: none;
-    grid-column: 1 / 3;
-    grid-row: 1 / 3;
 }
 
 .book__wrapper {
+    --tile-width: 250px;
+    --tile-border-width:  1px;
+    --tile-border-radius: 3px;
     color: #444343;
-    height: 248px;
-    width: 250px;
+    height: 258px;
+    width: var(--tile-width);
     margin: 15px;
     background-color: #f7f7f7;
-    border: 1px solid #ececec;
-    border-radius: 3px;
-    display: grid;
-    grid-template-columns: 65px 1fr;
-    grid-template-rows: 70px 120px 1fr 1fr;
-    grid-gap: 5px;
+    border: var(--tile-border-width) solid #ececec;
+    border-radius: var(--tile-border-radius);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     transition: transform 0.25s;
+    gap: 4px;
 }
 
 .book__wrapper:hover {
@@ -177,8 +178,12 @@
 
 .book__link__wrapper {
     display: grid;
+    grid-template-areas:
+    "bookIcon bookHeader"
+    "bookDesc bookDesc"
+    ;
     grid-template-columns: 65px 1fr;
-    grid-template-rows: 70px 120px 1fr 1fr;
+    grid-template-rows: 70px 120px;
 }
 
 .book__icon {
@@ -192,6 +197,7 @@
     width:  48px;
     height: 48px;
     margin: 10px 0 0 10px;
+    grid-area: bookIcon;
 }
 
 .book__header {
@@ -203,6 +209,7 @@
     height: 100%;
     align-items: center;
     align-content: center;
+    grid-area: bookHeader;
 }
 
 .book__title {
@@ -213,28 +220,36 @@
 }
 
 .book__download {
-    font-size: 1.1rem;
-    margin: 3px 0;
+    cursor: pointer;
+    font-size: 1.2rem;
+    background: #00b4e4;
+    padding: 8px;
+    border-radius: 0 0 var(--tile-border-radius) var(--tile-border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: var(--tile-width);
+    left: calc(0px - var(--tile-border-width));
+    text-decoration: none;
+}
+
+.book__download > img {
+    height: 16px;
+    width: 16px;
 }
 
 .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__download:hover {
+    background: royalblue;
 }
 
 .book__description {
-    grid-column: 1 / 3;
     margin: 10px 10px 5px;
     overflow: hidden;
     display: -webkit-box;
@@ -245,6 +260,13 @@
     font-size: 1.2rem;
     color: #4d4d4d;
     line-height: 1.25;
+    grid-area: bookDesc;
+}
+
+.book__meta {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px 4px;
 }
 
 .book__languageTag {
@@ -257,7 +279,6 @@
     color: black;
     height: 25px;
     width: 25px;
-    margin: 10px auto 0 10px;
     border-radius: 5px;
     font-size: 0.85rem;
 }
@@ -268,8 +289,6 @@
     font-size: 1.1rem;
     justify-content: flex-end;
     font-family: roboto;
-    margin-right: 10px;
-    margin-top: 10px;
     overflow: hidden;
 }
 

diff --git a/static/skin/index.js b/static/skin/index.js
@@ -139,6 +139,19 @@
         return spanElement.outerHTML;
     }
 
+    function downloadButtonText(zimSize) {
+      return $t("download") + (zimSize ? ` - ${zimSize}`: '');
+    }
+
+    function downloadButtonHtml(url, zimSize) {
+        return url
+             ? `<div class="book__download" data-link="${url}" data-size="${zimSize}">
+                  <img src="${root}/skin/download-white.svg?KIWIXCACHEID">
+                  <span ">${downloadButtonText(zimSize)}</span>
+                </div>`
+             : '';
+    }
+
     function generateBookHtml(book, sort = false) {
         const link = book.querySelector('link[type="text/html"]').getAttribute('href');
         let iconUrl;
@@ -183,20 +196,23 @@
         }
         const faviconAttr = iconUrl != undefined ? `style="background-image: url('${iconUrl}')"` : '';
         const languageAttr = langCode != '' ? `title="${language}" aria-label="${language}"` : 'style="background-color: transparent"';
+
         divTag.innerHTML = `
             <div class="book__wrapper">
             <a class="book__link" href="${viewerLink}" data-hover="Preview">
             <div class="book__link__wrapper">
             <div class="book__icon" ${faviconAttr}></div>
             <div class="book__header">
                 <div id="book__title">${title}</div>
-                ${downloadLink ? `<div class="book__download"><span data-link="${downloadLink}">${$t("download")} ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
             </div>
             <div class="book__description" title="${description}">${description}</div>
             </div>
             </a>
+            <div class="book__meta">
             <div class="book__languageTag" ${languageAttr}>${getLanguageCodeToDisplay(langCode)}</div>
             <div class="book__tags"><div class="book__tags--wrapper">${tagHtml}</div></div>
+            </div>
+            ${downloadButtonHtml(downloadLink, humanFriendlyZimSize)}
             </div></div>`;
         return divTag;
     }
@@ -282,6 +298,7 @@
     }
 
     function insertModal(button) {
+        const downloadSize = button.getAttribute('data-size');
         const downloadLink = button.getAttribute('data-link');
         button.addEventListener('click', async (event) => {
             event.preventDefault();
@@ -291,7 +308,7 @@
                     <div class="modal-heading">
                         <div class="modal-title">
                             <div>
-                                Download
+                                ${downloadButtonText(downloadSize)}
                             </div>
                         </div>
                         <div onclick="closeModal()" class="modal-close-button">
@@ -451,7 +468,7 @@
         booksToDelete.forEach(book => {iso.remove(book);});
         books.forEach((book) => {
             iso.insert(generateBookHtml(book, sort))
-            const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .book__download span`);
+            const downloadButton = document.querySelector(`[data-id="${getInnerHtml(book, 'id')}"] .book__download`);
             if (downloadButton) {
                 insertModal(downloadButton);
             }

diff --git a/static/templates/no_js_library_page.html b/static/templates/no_js_library_page.html
@@ -50,20 +50,11 @@
         pointer-events: none;
       }
 
-      .book__link__wrapper {
-        grid-column: 1 / 3;
-        grid-row: 1 / 3;
-      }
-
-      .book__link {
-        grid-row: 2 / 3;
-      }
-
       .kiwixHomeBody__results {
         flex-basis: 100%;
       }
 
-      #book__title>a, .book__download a {
+      #book__title>a {
         text-decoration: none;
         all: unset;
       }
@@ -117,25 +108,32 @@
         <h3 class="kiwixHomeBody__results">{{translations.count-of-matching-books}}</h3>
         {{#books}}
         <div class="book__wrapper">
-                <div class="book__link__wrapper">
-                    <div class="book__icon" {{faviconAttr}}></div>
-                    <div class="book__header">
-                        <div id="book__title"><a href="{{root}}/content/{{id}}">{{title}}</a></div>
-                        {{#downloadAvailable}}
-                        <div class="book__download"><span><a href="{{root}}/nojs/download/{{id}}">{{translations.download}}</a></span></div>
-                        {{/downloadAvailable}}
-                    </div>
-                    <a class="book__link" href="{{root}}/content/{{id}}" title="{{translations.preview-book}}" aria-label="{{translations.preview-book}}">
-                      <div class="book__description" title="{{description}}">{{description}}</div>
-                    </a>
+            <a class="book__link" href="{{root}}/content/{{id}}" title="{{translations.preview-book}}" aria-label="{{translations.preview-book}}">
+            <div class="book__link__wrapper">
+            <div class="book__icon" {{faviconAttr}}></div>
+            <div class="book__header">
+                <div id="book__title">{{title}}</div>
+            </div>
+            <div class="book__description" title="{{description}}">{{description}}</div>
+            </div>
+            </a>
+            <div class="book__meta">
+              <div class="book__languageTag" {{languageAttr}}>{{langCode}}</div>
+              <div class="book__tags"><div class="book__tags--wrapper">
+                  {{#tagList}}
+                  <span class="tag__link" aria-label='{{tag}}' title='{{tag}}'>{{tag}}</span>
+                  {{/tagList}}
+              </div>
               </div>
-            <div class="book__languageTag" {{languageAttr}}>{{langCode}}</div>
-            <div class="book__tags"><div class="book__tags--wrapper">
-                {{#tagList}}
-                <span class="tag__link" aria-label='{{tag}}' title='{{tag}}'>{{tag}}</span>
-                {{/tagList}}
             </div>
-        </div>
+            {{#downloadAvailable}}
+            <div>
+              <a class="book__download" href="{{root}}/nojs/download/{{id}}">
+                <img src="{{root}}/skin/download-white.svg?KIWIXCACHEID">
+                <span>{{translations.download}}</span>
+              </a>
+            </div>
+            {{/downloadAvailable}}
         </div>
         {{/books}}
         </div>