From 83f4ec8bcbe0a2cf0d45a2bd712d12ab80c70695 Mon Sep 17 00:00:00 2001
From: Nikhil Tanwar <2002nikhiltanwar@gmail.com>
Date: Mon, 13 May 2024 19:42:28 +0530
Subject: [PATCH] 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.
---
 static/resources_list.txt      |  1 +
 static/skin/download-white.svg |  7 +++++
 static/skin/index.css          | 54 +++++++++++++++++++++-------------
 static/skin/index.js           |  4 ++-
 4 files changed, 45 insertions(+), 21 deletions(-)
 create mode 100644 static/skin/download-white.svg

diff --git a/static/resources_list.txt b/static/resources_list.txt
index 755fc5942..8e14c92c2 100644
--- 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
new file mode 100644
index 000000000..fa380b0d8
--- /dev/null
+++ b/static/skin/download-white.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g id="Interface / Download"> <path id="Vector" d="M6 21H18M12 3V17M12 17L17 12M12 17L7 12" stroke="#f6f5f4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </g> </g>
+
</svg>
\ No newline at end of file
diff --git a/static/skin/index.css b/static/skin/index.css
index bfe6dc1f3..be9bfcd2d 100644
--- 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
index c8c346003..8145cadd5 100644
--- 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;
     }