Move download button to end of tile

Changed the position of download button to the end of tile. Added a proper download icon with the text. When the button is hovered it changes colour to royal blue.
kiwix · May 14, 2024 · 83f4ec8 · 83f4ec8
1 parent 0160722
commit 83f4ec8
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 21 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,21 @@
 
 .book__link {
     text-decoration: none;
-    grid-column: 1 / 3;
-    grid-row: 1 / 3;
 }
 
 .book__wrapper {
     color: #444343;
-    height: 248px;
+    height: 258px;
     width: 250px;
     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;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     transition: transform 0.25s;
+    gap: 4px;
 }
 
 .book__wrapper:hover {
@@ -177,8 +175,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 {
@@ -190,6 +192,7 @@
     align-content: center;
     justify-content: center;
     margin: 10px 0 0 10px;
+    grid-area: bookIcon;
 }
 
 .book__header {
@@ -201,6 +204,7 @@
     height: 100%;
     align-items: center;
     align-content: center;
+    grid-area: bookHeader;
 }
 
 .book__title {
@@ -211,28 +215,34 @@
 }
 
 .book__download {
-    font-size: 1.1rem;
-    margin: 3px 0;
+    font-size: 1.2rem;
+    background: #00b4e4;
+    padding: 8px;
+    border-radius: 0 0 2px 2px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    outline: 1px solid #ececec;
+}
+
+.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;
@@ -243,6 +253,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 {
@@ -255,7 +272,6 @@
     color: black;
     height: 25px;
     width: 25px;
-    margin: 10px auto 0 10px;
     border-radius: 5px;
     font-size: 0.85rem;
 }
@@ -266,8 +282,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
@@ -171,13 +171,15 @@
             <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>
+            ${downloadLink ? `<div class="book__download"><img src="${root}/skin/download-white.svg"><span data-link="${downloadLink}">${$t("download")} ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}</span></div>`: ''}` : ''}
             </div></div>`;
         return divTag;
     }