From 29bfaa5c5bbfdcdfc2914e599ef92e67a96336b9 Mon Sep 17 00:00:00 2001 From: Nikhil Tanwar <2002nikhiltanwar@gmail.com> Date: Mon, 13 May 2024 19:42:28 +0530 Subject: [PATCH 1/2] Move download button to end of tile - Changed the position of download button to the end of tile and added a proper download icon to it. When the button is hovered it becomes darker. - Also internationalized the "Download" text on the modal download widget and added download size information to it. --- static/resources_list.txt | 1 + static/skin/download-white.svg | 6 +++ static/skin/index.css | 67 ++++++++++++++++++++++------------ static/skin/index.js | 23 ++++++++++-- test/library_server.cpp | 2 +- test/server.cpp | 13 ++++--- 6 files changed, 79 insertions(+), 33 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..ed0356db0 --- /dev/null +++ b/static/skin/download-white.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/skin/index.css b/static/skin/index.css index e181ef1cf..ff90b5711 100644 --- 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)); +} + +.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 index 873b187f0..c4e40d225 100644 --- 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 + ? `
+ + ${downloadButtonText(zimSize)} +
` + : ''; + } + function generateBookHtml(book, sort = false) { const link = book.querySelector('link[type="text/html"]').getAttribute('href'); let iconUrl; @@ -183,6 +196,7 @@ } const faviconAttr = iconUrl != undefined ? `style="background-image: url('${iconUrl}')"` : ''; const languageAttr = langCode != '' ? `title="${language}" aria-label="${language}"` : 'style="background-color: transparent"'; + divTag.innerHTML = `
@@ -190,13 +204,15 @@
${title}
- ${downloadLink ? `
${$t("download")} ${humanFriendlyZimSize ? ` - ${humanFriendlyZimSize}
`: ''}` : ''}
${description}
+
${getLanguageCodeToDisplay(langCode)}
${tagHtml}
+
+ ${downloadButtonHtml(downloadLink, humanFriendlyZimSize)} `; 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 @@
- Download + ${downloadButtonText(downloadSize)}
@@ -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/test/library_server.cpp b/test/library_server.cpp index f49d67fc6..83d138de9 100644 --- a/test/library_server.cpp +++ b/test/library_server.cpp @@ -1033,7 +1033,7 @@ TEST_F(LibraryServerTest, no_name_mapper_catalog_v2_individual_entry_access) " />\n" \ " \n" \ " \n" \ diff --git a/test/server.cpp b/test/server.cpp index 3e0646f06..ed4f71e9d 100644 --- a/test/server.cpp +++ b/test/server.cpp @@ -61,9 +61,9 @@ const ResourceCollection resources200Compressible{ { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=071abc9a" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" }, - { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=2781f198" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=a534f84d" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" }, - { STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=480ca6b4" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=8f4b6a1e" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" }, @@ -114,6 +114,8 @@ const ResourceCollection resources200Uncompressible{ { STATIC_CONTENT, "/ROOT%23%3F/skin/caret.png?cacheid=22b942b4" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/download.png" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/download.png?cacheid=a39aa502" }, + { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/download-white.svg" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/download-white.svg?cacheid=079ab989"}, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/favicon/android-chrome-192x192.png" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/favicon/android-chrome-192x192.png?cacheid=bfac158b" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/favicon/android-chrome-512x512.png" }, @@ -279,7 +281,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources) { /* url */ "/ROOT%23%3F/", R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9" - href="/ROOT%23%3F/skin/index.css?cacheid=2781f198" + href="/ROOT%23%3F/skin/index.css?cacheid=a534f84d" @@ -292,7 +294,7 @@ R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9" - + ${$t( +R"EXPECTEDRESULT( + ${$t( ${$t( ${$t( ${$t( From 3cdc0368589018feb569560b351f7a16f1d0a139 Mon Sep 17 00:00:00 2001 From: Veloman Yunkan Date: Thu, 5 Sep 2024 13:27:17 +0400 Subject: [PATCH 2/2] Updated nojs library page ... to keep it in sync with the JSful library page that has been modified in the previous commit. --- static/skin/index.css | 2 +- static/templates/no_js_library_page.html | 52 +++++----- test/library_server.cpp | 116 +++++++++++++---------- test/server.cpp | 4 +- 4 files changed, 93 insertions(+), 81 deletions(-) diff --git a/static/skin/index.css b/static/skin/index.css index ff90b5711..191a071b2 100644 --- a/static/skin/index.css +++ b/static/skin/index.css @@ -231,6 +231,7 @@ position: relative; width: var(--tile-width); left: calc(0px - var(--tile-border-width)); + text-decoration: none; } .book__download > img { @@ -239,7 +240,6 @@ } .book__download > span { - text-decoration: none; position: relative; font-family: roboto; color: white; diff --git a/static/templates/no_js_library_page.html b/static/templates/no_js_library_page.html index cb7479298..dd34a9b7f 100644 --- 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 @@

{{translations.count-of-matching-books}}

{{#books}}
-
-
-
-
{{title}}
- {{#downloadAvailable}} -
{{translations.download}}
- {{/downloadAvailable}} -
- -
{{description}}
- + +
+
+
+
{{title}}
+
+
{{description}}
+
+ +
+
{{langCode}}
+
+ {{#tagList}} + {{tag}} + {{/tagList}} +
-
{{langCode}}
-
- {{#tagList}} - {{tag}} - {{/tagList}}
-
+ {{#downloadAvailable}} + + {{/downloadAvailable}}
{{/books}}
diff --git a/test/library_server.cpp b/test/library_server.cpp index 83d138de9..2d52e5c15 100644 --- a/test/library_server.cpp +++ b/test/library_server.cpp @@ -1033,7 +1033,7 @@ TEST_F(LibraryServerTest, no_name_mapper_catalog_v2_individual_entry_access) " />\n" \ " \n" \ " \n" \ @@ -1066,17 +1066,10 @@ TEST_F(LibraryServerTest, no_name_mapper_catalog_v2_individual_entry_access) " .tag__link {\n" \ " pointer-events: none;\n" \ " }\n\n" \ - " .book__link__wrapper {\n" \ - " grid-column: 1 / 3;\n" \ - " grid-row: 1 / 3;\n" \ - " }\n\n" \ - " .book__link {\n" \ - " grid-row: 2 / 3;\n" \ - " }\n\n" \ " .kiwixHomeBody__results {\n" \ " flex-basis: 100%;\n" \ " }\n\n" \ - " #book__title>a, .book__download a {\n" \ + " #book__title>a {\n" \ " text-decoration: none;\n" \ " all: unset;\n" \ " }\n" \ @@ -1087,62 +1080,83 @@ TEST_F(LibraryServerTest, no_name_mapper_catalog_v2_individual_entry_access) #define CHARLES_RAY_BOOK_HTML \ "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
Charles, Ray
\n" \ - "
Download
\n" \ - "
\n" \ - " \n" \ - "
Wikipedia articles about Ray Charles
\n" \ - " \n" \ + " \n" \ + "
\n" \ + "
\n" \ + "
\n" \ + "
Charles, Ray
\n" \ + "
\n" \ + "
Wikipedia articles about Ray Charles
\n" \ + "
\n" \ + " \n" \ + "
\n" \ + "
fra
\n" \ + "
\n" \ + " unittest\n" \ + " wikipedia\n" \ + "
\n" \ "
\n" \ - "
fra
\n" \ - "
\n" \ - " unittest\n" \ - " wikipedia\n" \ "
\n" \ - "
\n" \ + " \n" \ "
\n" #define RAY_CHARLES_BOOK_HTML \ "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
Ray Charles
\n" \ - "
Download
\n" \ - "
\n" \ - " \n" \ - "
Wikipedia articles about Ray Charles
\n" \ - " \n" \ + " \n" \ + "
\n" \ + "
\n" \ + "
\n" \ + "
Ray Charles
\n" \ + "
\n" \ + "
Wikipedia articles about Ray Charles
\n" \ + "
\n" \ + " \n" \ + "
\n" \ + "
eng
\n" \ + "
\n" \ + " public_tag_without_a_value\n" \ + " wikipedia\n" \ + "
\n" \ "
\n" \ - "
eng
\n" \ - "
\n" \ - " public_tag_without_a_value\n" \ - " wikipedia\n" \ "
\n" \ - "
\n" \ + " \n" \ "
\n" #define RAY_CHARLES_UNCTZ_BOOK_HTML \ "
\n" \ - "
\n" \ - "
\n" \ - "
\n" \ - "
Ray (uncategorized) Charles
\n" \ - "
Download
\n" \ - "
\n" \ - " \n" \ - "
No category is assigned to this library entry.
\n" \ - " \n" \ + " \n" \ + "
\n" \ + "
\n" \ + "
\n" \ + "
Ray (uncategorized) Charles
\n" \ + "
\n" \ + "
No category is assigned to this library entry.
\n" \ + "
\n" \ + " \n" \ + "
\n" \ + "
rus,eng
\n" \ + "
\n" \ + " public_tag_with_a_value:value_of_a_public_tag\n" \ + " wikipedia\n" \ + "
\n" \ "
\n" \ - "
rus,eng
\n" \ - "
\n" \ - " public_tag_with_a_value:value_of_a_public_tag\n" \ - " wikipedia\n" \ "
\n" \ - "
\n" \ + " \n" \ "
\n" #define FINAL_HTML_TEXT \ diff --git a/test/server.cpp b/test/server.cpp index ed4f71e9d..5c73d2c37 100644 --- a/test/server.cpp +++ b/test/server.cpp @@ -61,7 +61,7 @@ const ResourceCollection resources200Compressible{ { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/i18n.js?cacheid=071abc9a" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" }, - { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=a534f84d" }, + { STATIC_CONTENT, "/ROOT%23%3F/skin/index.css?cacheid=ae79e41a" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" }, { STATIC_CONTENT, "/ROOT%23%3F/skin/index.js?cacheid=8f4b6a1e" }, { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" }, @@ -281,7 +281,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources) { /* url */ "/ROOT%23%3F/", R"EXPECTEDRESULT( href="/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9" - href="/ROOT%23%3F/skin/index.css?cacheid=a534f84d" + href="/ROOT%23%3F/skin/index.css?cacheid=ae79e41a"