Use SVG files for feed logo & ui language selector

Added new, better proportioned SVG files.
kiwix · Mar 19, 2023 · 4aef47b · 4aef47b
1 parent 7478217
commit 4aef47b
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 28 deletions.
diff --git a/static/resources_list.txt b/static/resources_list.txt
@@ -1,7 +1,8 @@
 skin/caret.png
 skin/bittorrent.png
 skin/magnet.png
-skin/feed.png
+skin/feed.svg
+skin/langSelector.svg
 skin/download.png
 skin/hash.png
 skin/search-icon.svg

diff --git a/static/skin/feed.svg b/static/skin/feed.svg
diff --git a/static/skin/index.css b/static/skin/index.css
@@ -181,7 +181,6 @@ body {
 
 #uiLanguageSelectorButton {
   margin: 0 12px 0 0;
-  float: right;
 }
 
 .book__list {
@@ -468,10 +467,9 @@ body {
     width: auto;
 }
 
-.feedLogo {
+.feedLogo, #uiLanguageSelectorButton {
     height: 30px;
     float: right;
-    border-radius: 5px;
 }
 
 @media screen and (max-width: 1100px) {

diff --git a/static/skin/langSelector.svg b/static/skin/langSelector.svg
diff --git a/static/skin/taskbar.css b/static/skin/taskbar.css
@@ -200,6 +200,7 @@ a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active {
 #uiLanguageSelectorButton {
   margin: 0px 12px 6px 12px;
   float: right;
+  height: 30px;
 }
 
 @media(min-width:420px) {

diff --git a/static/templates/index.html b/static/templates/index.html
@@ -46,23 +46,16 @@
   <body>
     <div class='kiwixNav'>
       <a href="{{root}}/catalog/v2/entries" id="feedLink">
-        <img src="{{root}}/skin/feed.png?KIWIXCACHEID"
+        <img src="{{root}}/skin/feed.svg?KIWIXCACHEID"
              class="feedLogo"
              id="feedLogo"
              alt="Library OPDS Feed"
              aria-label="Library OPDS Feed"
              title="Library OPDS Feed">
       </a>
       <a onclick="window.modalUILanguageSelector.show()">
-        <svg xmlns="http://www.w3.org/2000/svg"
-             id="uiLanguageSelectorButton"
-             width="30"
-             height="30"
-             viewBox="0 0 20 20">
-          <g fill="#36c">
-            <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
-          </g>
-        </svg>
+        <img src="{{root}}/skin/langSelector.svg?KIWIXCACHEID"
+             id="uiLanguageSelectorButton">
       </a>
       <div class="kiwixNav__filters">
         <div class="kiwixNav__select">

diff --git a/static/viewer.html b/static/viewer.html
@@ -30,15 +30,9 @@
     <div class="kiwix" style="display:none" id="kiwixtoolbarwrapper">
       <div id="kiwixtoolbar" class="ui-widget-header">
         <div class="kiwix_centered">
-          <a id="uiLanguageSelectorButton" onclick="window.modalUILanguageSelector.show()">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 width="30"
-                 height="30"
-                 viewBox="0 0 20 20">
-              <g fill="#36c">
-                <path d="M20 18h-1.44a.61.61 0 0 1-.4-.12.81.81 0 0 1-.23-.31L17 15h-5l-1 2.54a.77.77 0 0 1-.22.3.59.59 0 0 1-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89 9.5a11.62 11.62 0 0 1-.39-1.24q-.09.37-.19.69l-.19.56-1.58 4.19zm-6.3-1.58a13.43 13.43 0 0 1-2.91-1.41 11.46 11.46 0 0 0 2.81-5.37H12V4H7.31a4 4 0 0 0-.2-.56C6.87 2.79 6.6 2 6.6 2l-1.47.5s.4.89.6 1.5H0v1.33h2.15A11.23 11.23 0 0 0 5 10.7a17.19 17.19 0 0 1-5 2.1q.56.82.87 1.38a23.28 23.28 0 0 0 5.22-2.51 15.64 15.64 0 0 0 3.56 1.77zM3.63 5.33h4.91a8.11 8.11 0 0 1-2.45 4.45 9.11 9.11 0 0 1-2.46-4.45z"/>
-              </g>
-            </svg>
+          <a onclick="window.modalUILanguageSelector.show()">
+            <img src="./skin/langSelector.svg?KIWIXCACHEID"
+              id="uiLanguageSelectorButton">
           </a>
           <div class="kiwix_searchform">
             <form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform">

diff --git 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=2cf0f8c5" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=be514520" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.css?cacheid=3ddd8b6e" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/iso6391To3.js" },
@@ -71,7 +71,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/mustache.min.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/mustache.min.js?cacheid=bd23c4fb" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/taskbar.css?cacheid=8fc2cc83" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/taskbar.css?cacheid=4b80e0fe" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/viewer.js?cacheid=b9a574d4" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" },
@@ -270,7 +270,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
   const std::vector<UrlAndExpectedResult> testData{
     {
       /* url */ "/ROOT%23%3F/",
-R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=be514520"
+R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=3ddd8b6e"
     <link rel="apple-touch-icon" sizes="180x180" href="/ROOT%23%3F/skin/favicon/apple-touch-icon.png?cacheid=f86f8df3">
     <link rel="icon" type="image/png" sizes="32x32" href="/ROOT%23%3F/skin/favicon/favicon-32x32.png?cacheid=79ded625">
     <link rel="icon" type="image/png" sizes="16x16" href="/ROOT%23%3F/skin/favicon/favicon-16x16.png?cacheid=a986fedc">
@@ -285,7 +285,8 @@ R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/index.css?cacheid=be514520"
     <script src="/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" defer></script>
     <script src="/ROOT%23%3F/skin/iso6391To3.js?cacheid=ecde2bb3"></script>
     <script type="text/javascript" src="/ROOT%23%3F/skin/index.js?cacheid=cafa3d61" defer></script>
-        <img src="/ROOT%23%3F/skin/feed.png?cacheid=56a672b1"
+        <img src="/ROOT%23%3F/skin/feed.svg?cacheid=055b333f"
+        <img src="/ROOT%23%3F/skin/langSelector.svg?cacheid=00b59961"
 )EXPECTEDRESULT"
     },
     {
@@ -303,13 +304,14 @@ R"EXPECTEDRESULT(                                <img src="${root}/skin/download
     },
     {
       /* url */ "/ROOT%23%3F/viewer",
-R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=8fc2cc83" rel="Stylesheet" />
+R"EXPECTEDRESULT(    <link type="text/css" href="./skin/taskbar.css?cacheid=4b80e0fe" rel="Stylesheet" />
     <link type="text/css" href="./skin/css/autoComplete.css?cacheid=08951e06" rel="Stylesheet" />
     <script type="module" src="./skin/i18n.js?cacheid=2cf0f8c5" defer></script>
     <script type="text/javascript" src="./skin/languages.js?cacheid=b00b12db" defer></script>
     <script type="text/javascript" src="./skin/viewer.js?cacheid=b9a574d4" defer></script>
     <script type="text/javascript" src="./skin/autoComplete.min.js?cacheid=1191aaaf"></script>
       const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032";
+            <img src="./skin/langSelector.svg?cacheid=00b59961"
           <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>
             src="./skin/blank.html?cacheid=6b1fa032" title="ZIM content" width="100%"
 )EXPECTEDRESULT"