Merge pull request #244 from panicbit/mobile-ui

Fix menu dropdown and add searchbar to mobile layout

Author: alexcrichton

app/styles/app.scss

@@ -72,27 +72,6 @@ body {
         right: 0;
         left: auto;
         min-width: 200px;
-
-        li.search {
-            padding: 5px;
-            input.search {
-                margin: 0;
-                border: 1px solid black;
-            }
-        }
-    }
-
-    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 {
@@ -126,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

@@ -48,14 +48,12 @@
     </div>
 
     <div class='menu'>
-        <div class='dropdown-container'>
-            <button {{action 'toggleUserOptions'}}
-                    class='{{if showUserOptions "active"}} dropdown'>
+        {{#rl-dropdown-container class='dropdown-container'}}
+            {{#rl-dropdown-toggle class='dropdown'}}
                 Menu
                 <span class='arrow'></span>
-            </button>
-            <ul id='current-user-links'
-                class='{{if showUserOptions "open"}} dropdown'>
+            {{/rl-dropdown-toggle}}
+            {{#rl-dropdown tagName='ul' id='current-user-links' class='dropdown' closeOnChildClick='a:link'}}
                 <li>{{#link-to "crates"}}Browse All Crates{{/link-to}}</li>
                 {{#if session.currentUser}}
                     <li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
@@ -64,20 +62,21 @@
                 {{else}}
                     <li>{{#link-to "login"}}Log in with GitHub{{/link-to}}</li>
                 {{/if}}
-                <li class='search'>
-                    {{input type="text" class="search"
-                            placeholder="Search"
-                            value=search
-                            enter="search"}}
-                </li>
-            </ul>
-        </div>
+            {{/rl-dropdown}}
+        {{/rl-dropdown-container}}
     </div>
 
     <div class='links'>
     </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>