fixed search bar rendering in webkit, mobile

Author: kfarwell

TODO

@@ -1,4 +1,3 @@
 * fix tag overflow when there are many tags at small horizontal resolutions
-* fix search bar in webkit and ie11
 * add proper file uploads
 * improve trending tag algorithm

lib/default_master.tpl

@@ -43,7 +43,7 @@
             <label for="search"><i class="mdi mdi-magnify white-text"></i></label>
           </div>
         </form>
-        <div style="height: 64px; overflow: hidden; padding-left: 16px">
+        <div style="height: 64px; overflow: hidden; padding-left: 16px" id="search-tags">
 %         for(i in `{cat $sitedir/_werc/trending}) {
           <div class="chip">
             <form action="/search" method="post">

lib/headers.tpl

@@ -13,6 +13,12 @@
     <link rel="stylesheet" href="/_werc/pub/style.css" type="text/css" media="screen, projection">
 % }
     <noscript><link rel="stylesheet" href="/pub/style/noscript.css" type="text/css" media="screen, projection"></noscript>
+    <link rel="stylesheet" type="text/css" media"screen, projection" id="webkit">
+    <script>
+        if(navigator.userAgent.indexOf("WebKit") != -1) {
+            document.getElementById("webkit").href="/pub/style/webkit.css";
+        }
+    </script>
 % if(! ~ `{get_cookie theme} '') {
     <link rel="stylesheet" href="/_werc/pub/%(`{get_cookie theme}%).css" type="text/css" media="screen, projection">
 % }

pub/style/style.css

@@ -58,6 +58,19 @@ nav ul li {
   margin: 0;
   border: 0;
 }
+
+@media only screen and (max-width : 600px) {
+  #search {
+    height: 3.75em;
+  }
+  #search-form .mdi {
+    margin-top: 0.75em;
+  }
+  #search-tags {
+    margin-top: 0.5em;
+  }
+}
+
 #main-copy {
   margin: 0 auto;
   border-left: none;

pub/style/webkit.css

@@ -0,0 +1,5 @@
+@media only screen and (min-width : 601px) {
+  #search {
+    height: 3.75em;
+  }
+}