Browse Source

fixed search bar rendering in webkit, mobile

Kyle Farwell 2 years ago
parent
commit
556aa632a0
5 changed files with 25 additions and 2 deletions
  1. 0 1
      TODO
  2. 1 1
      lib/default_master.tpl
  3. 6 0
      lib/headers.tpl
  4. 13 0
      pub/style/style.css
  5. 5 0
      pub/style/webkit.css

+ 0 - 1
TODO

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

+ 1 - 1
lib/default_master.tpl

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

+ 6 - 0
lib/headers.tpl

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

+ 13 - 0
pub/style/style.css

@@ -58,6 +58,19 @@ nav ul li {
58 58
   margin: 0;
59 59
   border: 0;
60 60
 }
61
+
62
+@media only screen and (max-width : 600px) {
63
+  #search {
64
+    height: 3.75em;
65
+  }
66
+  #search-form .mdi {
67
+    margin-top: 0.75em;
68
+  }
69
+  #search-tags {
70
+    margin-top: 0.5em;
71
+  }
72
+}
73
+
61 74
 #main-copy {
62 75
   margin: 0 auto;
63 76
   border-left: none;

+ 5 - 0
pub/style/webkit.css

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