Merge pull request #1022 from kiwix/viewer_toolbar_tweaks

Viewer toolbar improvements

static/skin/kiwix.css

@@ -90,7 +90,7 @@ body {
 }
 
 #uiLanguageSelectorButton {
-  margin: 0px 12px 6px 12px;
+  margin: 0px 12px;
   float: right;
   cursor: pointer;
   height: 30px;

static/skin/taskbar.css

@@ -5,6 +5,7 @@
     box-sizing: border-box;
     background: #f4f6f8;
     border-bottom: 1px solid #aaa;
+    display: flex;
 }
 
 #kiwixtoolbar>a {
@@ -23,7 +24,7 @@
 .kiwixsearch {
     font-size: 1.6rem;
     position: relative;
-    height: 26px;
+    height: 30px;
     width: 100%;
     left: 0;
     margin-bottom: 0;
@@ -42,6 +43,7 @@
 
 .kiwix .kiwix_centered {
     max-width: 720px;
+    width: 100%;
     margin: 0 auto;
 }
 
@@ -49,9 +51,8 @@
     display: none;
 }
 
-#kiwix_button_show_toggle:checked~label~.kiwix_button_cont,
 #kiwix_button_show_toggle:checked~label~.kiwix_button_cont>a {
-    display: block;
+    display: inline-block;
 }
 
 #kiwix_button_show_toggle:not(:checked)~label~.kiwix_button_cont {
@@ -60,12 +61,12 @@
 
 label[for="kiwix_button_show_toggle"] {
     display: inline-block;
-    height: 26px;
+    height: 30px;
 }
 
 label[for="kiwix_button_show_toggle"] img {
     transition: 0.1s;
-    height: 26px;
+    height: 30px;
 }
 
 #kiwix_button_show_toggle:checked~label img {
@@ -84,7 +85,7 @@ label[for="kiwix_button_show_toggle"],
 .kiwix #kiwixtoolbar button,
 .kiwix #kiwixtoolbar input[type="submit"] {
     box-sizing: border-box !important;
-    height: 26px !important;
+    height: 30px !important;
     line-height: 20px !important;
     margin-right: 5px !important;
     padding: 2px 6px !important;
@@ -100,7 +101,7 @@ label[for="kiwix_button_show_toggle"],
     left: 0;
     box-sizing: border-box !important;
     width: 100%;
-    height: 26px !important;
+    height: 30px !important;
     line-height: 20px !important;
     border: 1px solid #b5b2b2 !important;
     border-radius: 3px !important;
@@ -115,7 +116,7 @@ label[for=kiwixsearchbox] {
     height: 100%;
     left: 5px;
     font-size: 90%;
-    line-height: 26px;
+    line-height: 30px;
     vertical-align: middle;
 }
 
@@ -177,8 +178,12 @@ a.suggest, a.suggest:visited, a.suggest:hover, a.suggest:active {
     }
 }
 
-@media(max-width:415px) {
+@media(max-width:419px) {
     .kiwix_searchform {
         width: 80%;
     }
+
+    .kiwix_button_cont {
+        padding-top: 5px;
+    }
 }

static/viewer.html

@@ -35,13 +35,6 @@
     <div class="kiwix" style="display:none" id="kiwixtoolbarwrapper">
       <div id="kiwixtoolbar" class="ui-widget-header">
         <div class="kiwix_centered">
-          <a onclick="window.modalUILanguageSelector.show()"
-             alt="Select UI language"
-             aria-label="Select UI language"
-             title="Select UI language">
-            <img id="uiLanguageSelectorButton"
-                 src="./skin/langSelector.svg?KIWIXCACHEID">
-          </a>
           <div class="kiwix_searchform">
             <form class="kiwixsearch" method="GET" action="javascript:performSearch()" id="kiwixsearchform">
               <label for="kiwixsearchbox">&#x1f50d;</label>
@@ -66,6 +59,13 @@
             </span>
           </div>
         </div>
+        <a onclick="window.modalUILanguageSelector.show()"
+           alt="Select UI language"
+           aria-label="Select UI language"
+           title="Select UI language">
+          <img id="uiLanguageSelectorButton"
+               src="./skin/langSelector.svg?KIWIXCACHEID">
+        </a>
       </div>
     </div>
 

test/library_server.cpp

@@ -1028,7 +1028,7 @@ TEST_F(LibraryServerTest, no_name_mapper_catalog_v2_individual_entry_access)
   "    <title>Welcome to Kiwix Server</title>\n" \
   "    <link\n" \
   "      type=\"text/css\"\n" \
-  "      href=\"/ROOT%23%3F/skin/kiwix.css?cacheid=9b1b089f\"\n" \
+  "      href=\"/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9\"\n" \
   "      rel=\"Stylesheet\"\n" \
   "    />\n" \
   "    <link\n" \

test/server.cpp

@@ -69,11 +69,11 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/isotope.pkgd.min.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/isotope.pkgd.min.js?cacheid=2e48d392" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/kiwix.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/kiwix.css?cacheid=9b1b089f" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9" },
   { 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=a1200d6b" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/taskbar.css?cacheid=e014a885" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/viewer.js?cacheid=201653b8" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" },
@@ -276,7 +276,7 @@ TEST_F(ServerTest, CacheIdsOfStaticResources)
   const std::vector<UrlAndExpectedResult> testData{
     {
       /* url */ "/ROOT%23%3F/",
-R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/kiwix.css?cacheid=9b1b089f"
+R"EXPECTEDRESULT(      href="/ROOT%23%3F/skin/kiwix.css?cacheid=2158fad9"
       href="/ROOT%23%3F/skin/index.css?cacheid=1e78e7cf"
     <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">
@@ -315,16 +315,16 @@ R"EXPECTEDRESULT(                                <img src="${root}/skin/download
     },
     {
       /* url */ "/ROOT%23%3F/viewer",
-R"EXPECTEDRESULT(    <link type="text/css" href="./skin/kiwix.css?cacheid=9b1b089f" rel="Stylesheet" />
+R"EXPECTEDRESULT(    <link type="text/css" href="./skin/kiwix.css?cacheid=2158fad9" rel="Stylesheet" />
-    <link type="text/css" href="./skin/taskbar.css?cacheid=a1200d6b" rel="Stylesheet" />
+    <link type="text/css" href="./skin/taskbar.css?cacheid=e014a885" rel="Stylesheet" />
     <link type="text/css" href="./skin/autoComplete/css/autoComplete.css?cacheid=ef30cd42" rel="Stylesheet" />
     <script type="module" src="./skin/i18n.js?cacheid=6a8c6fb2" defer></script>
     <script type="text/javascript" src="./skin/languages.js?cacheid=96f2cf73" defer></script>
     <script type="text/javascript" src="./skin/viewer.js?cacheid=201653b8" defer></script>
     <script type="text/javascript" src="./skin/autoComplete/autoComplete.min.js?cacheid=1191aaaf"></script>
       const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032";
-                 src="./skin/langSelector.svg?cacheid=00b59961">
           <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>
+               src="./skin/langSelector.svg?cacheid=00b59961">
             src="./skin/blank.html?cacheid=6b1fa032" title="ZIM content" width="100%"
 )EXPECTEDRESULT"
     },