Merge pull request #303 from knownasilya/responsive-navbar

Cleanup Responsive Navbar Menu

Author: Gaurav0

app/gist/template.hbs

@@ -1,13 +1,19 @@
 <nav class="navbar-default">
   <div class="row toolbar">
     <div>
+      <div class="title">
+        {{title-input value=model.description titleChanged=(action "titleChanged")}}
+        {{saved-state-indicator model=model unsaved=unsaved}}
+      </div>
+
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsed-menu" aria-expanded="false">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
     </div>
   </div>
+
   <div id="collapsed-menu" class="collapse navbar-collapse row toolbar">
     <ul class="nav-pills main-menu">
       {{file-menu model=model
@@ -34,10 +40,7 @@
       }}
     </ul>
 
-    <div class="title">
-      {{title-input value=model.description titleChanged=(action "titleChanged")}}
-      {{saved-state-indicator model=model unsaved=unsaved}}
-    </div>
+    <hr>
 
     {{user-menu session=session
                 signInViaGithub="signInViaGithub"

app/styles/_toolbar.scss

@@ -1,5 +1,15 @@
 .toolbar {
 
+  hr {
+    display: none;
+  }
+
+  .nav-pills > li > a {
+    display: block;
+    text-decoration: none;
+  }
+
+
   @media (min-width: $screen-md-min) {
     height: $topbar-height;
   }
@@ -10,10 +20,54 @@
     opacity: 1;
 
     >div, >ul {
-      height: $topbar-height;
       margin-top: 0;
       margin-bottom: 0;
     }
+
+    .nav-pills > li {
+      float: none;
+    }
+
+    .nav-pills > li + li {
+      margin-left: 0;
+    }
+
+    .dropdown-toggle {
+      display: block;
+      border-radius: 0;
+    }
+
+    .dropdown-menu {
+      position: static;
+      float: none;
+      border: 0;
+      border-radius: 0;
+      background-color: #E1563F;
+      box-shadow: none;
+
+      .dropdown-submenu > .dropdown-menu {
+        margin-left: 1em;
+        margin-top: 0;
+      }
+
+      .divider {
+        background-color: lighten($burnt-orange, 10%);
+      }
+
+      a {
+        color: #fff;
+
+        &:hover {
+          background-color: lighten($burnt-orange, 10%);
+        }
+      }
+    }
+
+    hr {
+      display: block;
+      border-color: $burnt-orange;
+      margin: 1em 0;
+    }
   }
 
   font-size: $font-size;
@@ -25,11 +79,23 @@
   box-shadow: rgba(0,0,0,0.3) 0 0 3px;
 
   button.navbar-toggle {
+    margin-top: 13px;
+    margin-bottom: 13px;
+    border-color: $burnt-orange;
+
+    @media (max-width: $screen-md-min) {
+      display: inline-block;
+    }
+
     &:hover, &:active, &:focus {
       background: $pale-orange;
       outline: none;
       opacity: 0.5;
     }
+
+    .icon-bar {
+      background-color: $burnt-orange;
+    }
   }
 
   ul {
@@ -48,7 +114,12 @@
     }
 
     @media (max-width: $screen-md-min) {
-      float: right;
+      float: none;
+      text-align: left;
+
+      .user-dropdown > .dropdown-toggle {
+        padding-left: 1em;
+      }
     }
 
     .user-avatar {
@@ -73,21 +144,24 @@
   }
 
   .main-menu {
+    text-align: left;
+    height: 60px;
 
     @media (min-width: $screen-md-min) {
       position: absolute;
       left: ($topbar-height - $topbar-control-height) / 2;
       top: ($topbar-height - $topbar-control-height) / 2;
     }
 
-    text-align: left;
-    height: 60px;
+    @media (max-width: $screen-md-min) {
+      height: auto;
+    }
   }
 
   .title {
     padding: 13px 0;
     text-align: center;
-    width: 100%;
+    display: inline-block;
 
     @media (min-width: $screen-md-min) {
       position: absolute;
@@ -97,6 +171,10 @@
       width: 800px;
     }
 
+    @media (max-width: $screen-md-min) {
+      margin-left: 15px;
+    }
+
     h1 {
       margin: 10px;
     }
@@ -217,6 +295,8 @@
   &.navbar-collapse {
     @media (max-width: $screen-md-min) {
       background: $ember-orange;
+      padding: 0;
+      border: 0;
     }
   }
 

app/templates/components/file-menu.hbs

@@ -2,17 +2,17 @@
   File <b class="caret"></b>
 </a>
 
-<ul class="dropdown dropdown-menu">
+<ul class="dropdown-menu">
   <li>{{#link-to 'gist.new' class="test-new-twiddle" }}New Twiddle{{/link-to}}</li>
   {{#if model}}
     <li role="presentation" class="divider"></li>
-    <li class="dropdown-submenu">
+    <li class="dropdown dropdown-submenu">
       <a tabindex="-1" href="#">Add...</a>
       <ul class="dropdown-menu">
         <li><a {{action 'addFile' ''}}>Other (empty file)</a></li>
-        <li class="dropdown-submenu">
+        <li class="dropdown dropdown-submenu">
           <a {{action 'addComponent'}} class="add-component-link">Component (js and hbs)</a>
-          <ul class="'dropdown dropdown-menu">
+          <ul class="dropdown-menu">
             <li><a {{action 'addFile' 'component-hbs'}}>hbs only</a></li>
             <li><a {{action 'addFile' 'component-js'}}>js only</a></li>
           </ul>