From f045590243959cb8de13c67a46e573be61cb8a87 Mon Sep 17 00:00:00 2001
From: Skylsmoi <come.huguies@gmail.com>
Date: Wed, 5 Apr 2017 14:50:52 +0200
Subject: [PATCH] #336 taskbar is now responsive

---
 static/server/taskbar.css       | 31 +++++++++++++++++++++----------
 static/server/taskbar.html.part |  2 +-
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/static/server/taskbar.css b/static/server/taskbar.css
index 86c25d9..7f5fa14 100644
--- a/static/server/taskbar.css
+++ b/static/server/taskbar.css
@@ -5,7 +5,10 @@
     right:0;
     top: 0;
     z-index:100;
-    max-height: 2.8em;
+}
+
+.height_separator {
+    height: 3em;
 }
 
 #kiwixsearchbox {
@@ -14,7 +17,7 @@
 
 .kiwixsearch {
 	float: right;
-}s
+}
 
 /* Try to fix buggy stuff in jquery-ui autocomplete */
 #ui-id-1, .ui-autocomplete {
@@ -37,14 +40,22 @@ li.ui-state-focus {
 	text-decoration: underline;
 }
 
-@media only screen and (min--moz-device-pixel-ratio: 1.5),
-only screen and (-o-min-device-pixel-ratio: 1.5/1),
-only screen and (-webkit-min-device-pixel-ratio: 1.5),
-only screen and (min-device-pixel-ratio: 1.5) {
-    #kiwixtoolbar button, #kiwixtoolbar input {
-    	font-size: 2em;
+/* the breakpoint "600px" is the width of the 3 btns "library", "home" and "randoml" */
+@media (max-width: 600px) {
+    .kiwixsearch {
+        float: none;
+        margin-top: 5px;
     }
+
     #kiwixsearchbox {
-		width: 7em;
-	}
+        width: calc(100% - 75px);
+    }
+
+    #kiwixsearchform input[type="submit"] {
+        width: 70px;
+    }
+
+    .height_separator {
+        height: 6em;
+    }
 }
diff --git a/static/server/taskbar.html.part b/static/server/taskbar.html.part
index 7df7156..99af7ca 100644
--- a/static/server/taskbar.html.part
+++ b/static/server/taskbar.html.part
@@ -12,4 +12,4 @@
   	</form>
   </span>
 </span>
-<div style="display: block; height: 3em;"></div>
+<div class='height_separator'></div>