Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

worked in toggleable user window that can slide in

  • Loading branch information...
commit 9194a5adb27443476b7ddd5ab73c532485c738f2 1 parent 70b77ba
@ngokevin authored
View
2  .gitignore
@@ -1,3 +1,5 @@
node_modules/
builtAssets/
run.sh
+*.swp
+.sass-cache
View
65 assets/css/subway-mobile.css
@@ -1,16 +1,24 @@
@media screen and (max-width: 720px) {
.container-fluid {
/* Remove sidebars */ }
- .container-fluid div.sidebar {
+ .container-fluid .sidebar {
width: 0; }
- .container-fluid div#user-window {
- width: 0; }
- .container-fluid div.content {
+ .container-fluid #user-window {
+ display: none;
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 33%;
+ z-index: 2; }
+ .container-fluid .content {
margin-left: 0;
- margin-right: 0; }
- .container-fluid div#chat-window {
- width: 120%; }
- .container-fluid div#channels {
+ margin-right: 0;
+ width: 100%; }
+ .container-fluid .content.user-window-toggled {
+ right: 33%; }
+ .container-fluid #chat-window {
+ width: 100%; }
+ .container-fluid #channels {
display: block;
height: 5%;
left: 0;
@@ -18,29 +26,54 @@
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 {
- margin-top: 34px; } }
+ .container-fluid #chat-bar.user-window-toggled {
+ 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; } }
View
64 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 {
- width: 0;
+ #user-window {
+ 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 {
- width: 120%;
+ #chat-window {
+ width: 100%;
}
-
- div#channels {
+ #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;
+ }
+
+
}
}
View
7 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');
+ });
}
});
View
1  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}}
Please sign in to comment.
Something went wrong with that request. Please try again.