worked in toggleable user window that can slide in

ngokevin · Sep 20, 2012 · 9194a5a · 9194a5a
1 parent 70b77ba
commit 9194a5a
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 node_modules/
 builtAssets/
 run.sh
+*.swp
+.sass-cache
diff --git a/assets/css/subway-mobile.css b/assets/css/subway-mobile.css
@@ -1,46 +1,79 @@
 @media screen and (max-width: 720px) {
   .container-fluid {
     /* Remove sidebars */ }
-    .container-fluid div.sidebar {
+    .container-fluid .sidebar {
       width: 0; }
-    .container-fluid div#user-window {
+    .container-fluid #user-window {
-      width: 0; }
+      display: none;
-    .container-fluid div.content {
+      position: fixed;
+      top: 0;
+      right: 0;
+      width: 33%;
+      z-index: 2; }
+    .container-fluid .content {
       margin-left: 0;
-      margin-right: 0; }
+      margin-right: 0;
-    .container-fluid div#chat-window {
+      width: 100%; }
-      width: 120%; }
+      .container-fluid .content.user-window-toggled {
-    .container-fluid div#channels {
+        right: 33%; }
+    .container-fluid #chat-window {
+      width: 100%; }
+    .container-fluid #channels {
       display: block;
       height: 5%;
       left: 0;
       position: fixed;
       overflow: hidden;
       top: 0;
       z-index: 1; }
-      .container-fluid div#channels div.channel {
+      .container-fluid #channels div.channel {
         border: 1px solid rgba(10, 10, 10, 0.5);
         border-radius: 25px 25px 0 0;
         display: inline-block;
         height: 34px;
-        width: 25%;
+        width: 30%;
         text-align: left;
         padding: 7px 0;
         position: relative; }
-        .container-fluid div#channels div.channel span.channel-name {
+        .container-fluid #channels div.channel span.channel-name {
           margin-left: 15px;
           padding-right: 5px; }
-        .container-fluid div#channels div.channel span.unread, .container-fluid div#channels div.channel span.unread-mentions {
+        .container-fluid #channels div.channel span.unread, .container-fluid #channels div.channel span.unread-mentions {
           float: none; }
-        .container-fluid div#channels div.channel div.close-button {
+        .container-fluid #channels div.channel div.close-button {
           visibility: visible;
           position: absolute;
           top: 7px;
           right: 5px; }
-    .container-fluid div#chat-bar {
+      .container-fluid #channels.user-window-toggled {
+        left: -33%; }
+    .container-fluid #chat-bar {
       position: fixed;
       left: 0;
       top: 34px;
       z-index: 1; }
-    .container-fluid div#chat-contents {
+      .container-fluid #chat-bar.user-window-toggled {
-      margin-top: 34px; } }
+        left: -33%; }
+    .container-fluid #chat-contents {
+      margin-top: 34px; }
+    .container-fluid #user-window-toggle {
+      background: rgba(67, 73, 80, 0.5);
+      border-radius: 50px 0 0;
+      bottom: 56px;
+      display: block;
+      height: 55px;
+      position: fixed;
+      right: 0;
+      width: 55px;
+      z-index: 1; }
+      .container-fluid #user-window-toggle:hover {
+        background: rgba(67, 73, 80, 0.75);
+        cursor: pointer; }
+      .container-fluid #user-window-toggle.user-window-toggled {
+        right: 33%; }
+    .container-fluid input#chat-input {
+      width: 65%; }
+    .container-fluid #chat-button {
+      width: 20%;
+      padding-left: 0;
+      padding-right: 0; } }
diff --git a/assets/css/subway-mobile.scss b/assets/css/subway-mobile.scss
@@ -1,21 +1,29 @@
 @media screen and (max-width: 720px) {
     .container-fluid {
         /* Remove sidebars */
-        div.sidebar {
+        .sidebar {
             width: 0;
         }
-        div#user-window {
+        #user-window {
-            width: 0;
+            display: none;
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 33%;
+            z-index: 2;
         }
-        div.content {
+        .content {
             margin-left: 0;
             margin-right: 0;
+            width: 100%;
+            &.user-window-toggled {
+                right: 33%;
+            }
         }
-        div#chat-window {
+        #chat-window {
-            width: 120%;
+            width: 100%;
         }
-
+        #channels {
-        div#channels {
             display: block;
             height: 5%;
             left: 0;
@@ -28,7 +36,7 @@
                 border-radius: 25px 25px 0 0;
                 display: inline-block;
                 height: 34px;
-                width: 25%;
+                width: 30%;
                 text-align: left;
                 padding: 7px 0;
                 position: relative;
@@ -46,16 +54,50 @@
                     right: 5px;
                 }
             }
+            &.user-window-toggled {
+                left: -33%;
+            }
         }
-        div#chat-bar {
+        #chat-bar {
             position: fixed;
             left: 0;
             top: 34px;
             z-index: 1;
+            &.user-window-toggled {
+                left: -33%;
+            }
         }
-        div#chat-contents {
+        #chat-contents {
             margin-top: 34px;
         }
 
+        #user-window-toggle {
+            background: rgba(67, 73, 80, .5);
+            border-radius: 50px 0 0;
+            bottom: 56px;
+            display: block;
+            height: 55px;
+            position: fixed;
+            right: 0;
+            width: 55px;
+            z-index: 1;
+            &:hover {
+                background: rgba(67, 73, 80, .75);
+                cursor: pointer;
+            }
+            &.user-window-toggled {
+                right: 33%;
+            }
+        }
+        input#chat-input {
+            width: 65%;
+        }
+        #chat-button {
+            width: 20%;
+            padding-left: 0;
+            padding-right: 0;
+        }
+
+
     }
 }
diff --git a/assets/js/views/chat.js b/assets/js/views/chat.js
@@ -211,5 +211,12 @@ var ChatView = Backbone.View.extend({
       $(this).siblings('.hide_embed').removeClass('hide');
       $(this).addClass('hide');
     });
+
+    $('.content').removeClass('user-window-toggled');
+    $('#user-window-toggle').click(function() {
+        $('#user-window').toggle();
+        $('.content, #channels, #chat-bar').toggleClass('user-window-toggled');
+        $(this).toggleClass('user-window-toggled');
+    });
   }
 });
diff --git a/views/templates.jade b/views/templates.jade
@@ -113,6 +113,7 @@ script(id="chat", type="text/html")
         .titlebar
           span(class='window_title') User List
       #user-list.bar
+    #user-window-toggle
 
 script(id="channel", type="text/html")
   span(class="channel-name") {{name}}