Add mobile searchbar

Author: panicbit

app/styles/app.scss

@@ -74,19 +74,6 @@ body {
         min-width: 200px;
     }
 
-    input.search {
-        font-size: 90%;
-        border: none;
-        color: black;
-        outline: 0;
-        margin-left: 30px;
-        padding: 5px 5px 5px 25px;
-        background-image: url('/assets/search.png');
-        background-repeat: no-repeat;
-        background-position: 6px 6px;
-        @include border-radius(15px);
-    }
-
     button {
         background: none;
         outline: 0;
@@ -118,6 +105,31 @@ body {
     }
 }
 
+#header input.search, #mobile-search input.search {
+    font-size: 90%;
+    border: none;
+    color: black;
+    outline: 0;
+    margin-left: 30px;
+    padding: 5px 5px 5px 25px;
+    background-image: url('/assets/search.png');
+    background-repeat: no-repeat;
+    background-position: 6px 6px;
+    @include border-radius(15px);
+}
+
+#mobile-search {
+    display: none;
+    margin-bottom: 10px;
+    input.search {
+        width: 100%;
+        margin: 0;
+    }
+    @media only screen and (max-width: 820px) {
+        display: block;
+    }
+}
+
 span.small {
     color: $main-color-light;
     font-size: 80%;

app/templates/application.hbs

@@ -70,6 +70,13 @@
     </div>
 </div>
 
+<form id='mobile-search' class='search' action='/search' {{ action "search" on="submit" }} >
+    {{input type="text" class="search" name="q"
+            placeholder="Search"
+            value=search
+            tabindex="1"}}
+</form>
+
 <div id="main" class='inner-content'>
     <p id='flash' class={{if flashError "shown"}}>{{flashError}}</p>