diff --git a/.gitignore b/.gitignore index 53247b6..69b1809 100644 --- 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 index 555e71e..ceb517a 100644 --- a/assets/css/subway-mobile.css +++ b/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; } } diff --git a/assets/css/subway-mobile.scss b/assets/css/subway-mobile.scss index 68bff66..913841f 100644 --- 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 { - 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; + } + + } } diff --git a/assets/js/views/chat.js b/assets/js/views/chat.js index e76bfef..326cd7e 100644 --- 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 index c9302bf..362c433 100644 --- 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}}