Add drawer menu to mobile version

- Added basic drawer menu with JS code working on /stream

app/assets/javascripts/mobile.js

@@ -26,6 +26,23 @@ $(document).ready(function(){
          .toggleClass('inactive');
   };
 
+  /* Drawer menu */
+  $('#menu_badge').click(function(evt){
+    evt.preventDefault();
+    toggleDrawerMenu();
+  });
+
+  var toggleDrawerMenu = function(){
+    var app = $("#app");
+
+    if (app.hasClass('draw')){
+      app.removeClass('draw');
+    }
+    else {
+      app.addClass('draw');
+    }
+  };
+
   /* Heart toggle */
   $(".like_action", ".stream").bind("tap click", function(evt){
     evt.preventDefault();

app/assets/stylesheets/mobile.css.scss

@@ -17,6 +17,11 @@ body {
     /* scale background image down for iOS retina display */
     size: 200px;
   }
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+#main.container {
   padding-top: 55px;
 }
 
@@ -28,6 +33,74 @@ h3 {
   clear: both;
 }
 
+#menu_badge {
+  float: right;
+  display: inline-block;
+  padding: 0px 10px 0px 12px;
+
+  img.menu {
+    height: 40px;
+  }
+}
+
+#app {
+  position: relative;
+  left: 0;
+  -moz-transition:left 0.35s;
+  -webkit-transition:left 0.35s;
+  -o-transition:left 0.35s;
+  transition:left 0.35s;
+}
+
+#main_nav {
+  -moz-transition:left 0.35s;
+  -webkit-transition:left 0.35s;
+  -o-transition:left 0.35s;
+  transition:left 0.35s;
+  height: 45px;
+}
+
+#drawer {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 80%;
+  left: 100%;
+  background-color: #444;
+
+  -moz-transition:left 0.35s;
+  -webkit-transition:left 0.35s;
+  -o-transition:left 0.35s;
+  transition:left 0.35s;
+
+  .navbar {
+    .navbar-inner {
+      height: 45px;
+      border: none;
+      border-radius: 0;
+
+      @include box-shadow(0,1px,2px,#333);
+
+      background: {
+        image: image-url("header-bg-long.jpg");
+      }
+
+      width: 100%;
+    }
+  }
+}
+
+#app.draw {
+  left: -80%;
+
+  #main_nav {
+    left: -80%;
+  }
+  #drawer {
+    left: 20%;
+  }
+}
+
 .message {
   padding-left: 2px;
 }
@@ -174,8 +247,8 @@ h3 {
 
 
 #main_stream {
-  margin-left: -10px;
-  margin-right: -10px;
+  margin-left: 10px;
+  margin-right: 10px;
   .from {
     white-space: nowrap;
     overflow: hidden;
@@ -327,7 +400,7 @@ header {
   top: 0px;
   left: 0px;
   right: 0px;
-  min-width: 250px;
+  width: 100%;
   z-index: 10;
   background: url("header-bg-long.jpg") rgb(40,35,35);
   @include box-shadow(0, 1px, 2px, #333);
@@ -338,6 +411,7 @@ header {
   #nav_badges {
     float: right;
     margin: 4px 12px;
+    display: inline-block;
 
     .badge {
       display: inline;

app/views/layouts/application.mobile.haml

@@ -46,8 +46,10 @@
     = yield(:head)
 
   %body
-    %header    
+    #app
+      %header#main_nav
         = link_to(image_tag('branding/header-logo2x.png', height: 40, width: 40), stream_path, id: 'header_title')
+        = link_to(image_tag('icons/menu.png', :class => 'menu'),"#", id: "menu_badge")
 
         - if user_signed_in?
           #nav_badges
@@ -68,6 +70,7 @@
               = link_to(image_tag('icons/compose_mobile2.png', class: 'compose_icon'), new_status_message_path)
 
       #main.container{:role => "main"}
+        .row
           - if current_page?(:activity_stream)
             %h3
               = t('streams.activity.title')
@@ -76,6 +79,10 @@
       - if user_signed_in?
         = render :partial =>'shared/footer'
 
+      #drawer
+        .navbar
+          .navbar-inner
+
     / javascripts at the bottom
     = jquery_include_tag
     = javascript_include_tag :mobile