Permalink
Browse files

add prev/next channel buttons, revise channel tabs, center input cont…

…ainer, bigger user list
  • Loading branch information...
1 parent 9194a5a commit e45645852072f3f2ed7665fbf4b367171db5f49a @ngokevin committed Sep 20, 2012
Showing with 95 additions and 27 deletions.
  1. +43 −14 assets/css/subway-mobile.css
  2. +50 −13 assets/css/subway-mobile.scss
  3. +2 −0 views/templates.jade
@@ -8,52 +8,76 @@
position: fixed;
top: 0;
right: 0;
- width: 33%;
+ width: 75%;
z-index: 2; }
.container-fluid .content {
margin-left: 0;
margin-right: 0;
width: 100%; }
.container-fluid .content.user-window-toggled {
- right: 33%; }
+ right: 75%; }
.container-fluid #chat-window {
width: 100%; }
.container-fluid #channels {
display: block;
- height: 5%;
+ height: 34px;
left: 0;
position: fixed;
overflow: hidden;
top: 0;
z-index: 1; }
.container-fluid #channels div.channel {
border: 1px solid rgba(10, 10, 10, 0.5);
- border-radius: 25px 25px 0 0;
+ border-radius: 25px 0 0;
display: inline-block;
height: 34px;
- width: 30%;
- text-align: left;
padding: 7px 0;
- position: relative; }
+ margin: 0 3px;
+ position: relative;
+ text-align: left;
+ width: 25%; }
.container-fluid #channels div.channel span.channel-name {
- margin-left: 15px;
- padding-right: 5px; }
+ display: block;
+ margin-left: 8px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 50%; }
.container-fluid #channels div.channel span.unread, .container-fluid #channels div.channel span.unread-mentions {
float: none; }
.container-fluid #channels div.channel div.close-button {
- visibility: visible;
position: absolute;
+ right: 0;
top: 7px;
- right: 5px; }
+ visibility: visible; }
+ .container-fluid #channels #prev-channel, .container-fluid #channels #next-channel {
+ background: rgba(67, 73, 80, 0.5);
+ color: white;
+ font-size: 24px;
+ display: inline-block;
+ height: 34px;
+ padding-top: 4px;
+ text-align: center;
+ width: 34px; }
+ .container-fluid #channels #prev-channel:hover, .container-fluid #channels #next-channel:hover {
+ background: rgba(67, 73, 80, 0.75);
+ cursor: pointer; }
+ .container-fluid #channels #prev-channel {
+ float: left; }
+ .container-fluid #channels #prev-channel:after {
+ content: "<"; }
+ .container-fluid #channels #next-channel {
+ float: right; }
+ .container-fluid #channels #next-channel:after {
+ content: ">"; }
.container-fluid #channels.user-window-toggled {
- left: -33%; }
+ left: -75%; }
.container-fluid #chat-bar {
position: fixed;
left: 0;
top: 34px;
z-index: 1; }
.container-fluid #chat-bar.user-window-toggled {
- left: -33%; }
+ left: -75%; }
.container-fluid #chat-contents {
margin-top: 34px; }
.container-fluid #user-window-toggle {
@@ -70,8 +94,13 @@
background: rgba(67, 73, 80, 0.75);
cursor: pointer; }
.container-fluid #user-window-toggle.user-window-toggled {
- right: 33%; }
+ right: 75%; }
+ .container-fluid #input-container {
+ text-align: center; }
+ .container-fluid #input-container .input {
+ padding-top: 12px; }
.container-fluid input#chat-input {
+ float: none;
width: 65%; }
.container-fluid #chat-button {
width: 20%;
@@ -9,53 +9,83 @@
position: fixed;
top: 0;
right: 0;
- width: 33%;
+ width: 75%;
z-index: 2;
}
.content {
margin-left: 0;
margin-right: 0;
width: 100%;
&.user-window-toggled {
- right: 33%;
+ right: 75%;
}
}
#chat-window {
width: 100%;
}
#channels {
display: block;
- height: 5%;
+ height: 34px;
left: 0;
position: fixed;
overflow: hidden;
top: 0;
z-index: 1;
div.channel {
border: 1px solid rgba(10, 10, 10, .5);
- border-radius: 25px 25px 0 0;
+ border-radius: 25px 0 0;
display: inline-block;
height: 34px;
- width: 30%;
- text-align: left;
padding: 7px 0;
+ margin: 0 3px;
position: relative;
+ text-align: left;
+ width: 25%;
span.channel-name {
- margin-left: 15px;
- padding-right: 5px;
+ display: block;
+ margin-left: 8px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ width: 50%;
}
span.unread, span.unread-mentions {
float: none;
}
div.close-button {
- visibility: visible;
position: absolute;
+ right: 0;
top: 7px;
- right: 5px;
+ visibility: visible;
+ }
+ }
+ #prev-channel, #next-channel {
+ background: rgba(67, 73, 80, .5);
+ color: white;
+ font-size: 24px;
+ display: inline-block;
+ height: 34px;
+ padding-top: 4px;
+ text-align: center;
+ width: 34px;
+ &:hover {
+ background: rgba(67, 73, 80, .75);
+ cursor: pointer;
+ }
+ }
+ #prev-channel {
+ float: left;
+ &:after {
+ content: "<";
+ }
+ }
+ #next-channel {
+ float: right;
+ &:after {
+ content: ">";
}
}
&.user-window-toggled {
- left: -33%;
+ left: -75%;
}
}
#chat-bar {
@@ -64,7 +94,7 @@
top: 34px;
z-index: 1;
&.user-window-toggled {
- left: -33%;
+ left: -75%;
}
}
#chat-contents {
@@ -86,10 +116,17 @@
cursor: pointer;
}
&.user-window-toggled {
- right: 33%;
+ right: 75%;
+ }
+ }
+ #input-container {
+ text-align: center;
+ .input {
+ padding-top: 12px;
}
}
input#chat-input {
+ float: none;
width: 65%;
}
#chat-button {
View
@@ -7,6 +7,8 @@ script(id="chat_application", type="text/html")
small IRC client
#user-box
#channels
+ #prev-channel
+ #next-channel
.content
script(id="load_image", type="text/html")

0 comments on commit e456458

Please sign in to comment.