Permalink
Browse files

work on mobile overview page

  • Loading branch information...
ngokevin committed Sep 20, 2012
1 parent cb91dc8 commit 446266471d0a7ef71be2fd77ace425be255e6fbc
@@ -1,15 +1,43 @@
@media screen and (max-width: 720px) {
.container-fluid {
- /* Remove sidebars */ }
+ /* Overview. */
+ /* Convert channel sidebar to browser-like tabs. */
+ /* Toggleable sliding sidebar replacement for user window. */ }
+ .container-fluid #overview {
+ left: 0;
+ margin-top: 0;
+ bottom: 0;
+ position: fixed;
+ padding: 0;
+ width: 100%;
+ z-index: 1; }
+ .container-fluid #overview ul {
+ margin: 0; }
+ .container-fluid #overview ul li {
+ margin: 0;
+ padding: 10px 0;
+ width: 50%; }
+ .container-fluid #logo, .container-fluid .sidebar h2 {
+ display: block;
+ position: fixed;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+ z-index: 1; }
+ .container-fluid .sidebar h2 {
+ margin-top: 40%; }
.container-fluid .sidebar {
width: 0; }
.container-fluid #user-window {
+ -webkit-box-shadow: 0 0 4px 2px #333333;
+ -moz-box-shadow: 0 0 4px 2px #333333;
+ box-shadow: 0 0 4px 2px #333333;
display: none;
position: fixed;
top: 0;
right: 0;
width: 75%;
- z-index: 2; }
+ z-index: 3; }
.container-fluid .content {
margin-left: 0;
margin-right: 0;
@@ -18,6 +46,8 @@
right: 75%; }
.container-fluid #chat-window {
width: 100%; }
+ .container-fluid #chat-window div {
+ z-index: 2; }
.container-fluid #channels {
display: inline-block;
height: 34px;
@@ -26,7 +56,7 @@
overflow: visible;
top: 0;
white-space: nowrap;
- z-index: 1; }
+ z-index: 2; }
.container-fluid #channels div.channel {
border: 1px solid rgba(10, 10, 10, 0.5);
border-radius: 25px 0 0;
@@ -51,18 +81,18 @@
right: 0;
top: 7px;
visibility: visible; }
- .container-fluid #channels #slide-prev, .container-fluid #channels #slide-next {
+ .container-fluid #channels .slide {
background: rgba(67, 73, 80, 0.75);
color: white;
font-size: 24px;
- display: inline-block;
+ display: none;
height: 34px;
padding-top: 4px;
position: fixed;
text-align: center;
width: 34px;
z-index: 2; }
- .container-fluid #channels #slide-prev:hover, .container-fluid #channels #slide-next:hover {
+ .container-fluid #channels .slide:hover {
background: rgba(67, 73, 80, 0.95);
cursor: pointer; }
.container-fluid #channels #slide-prev {
@@ -73,13 +103,10 @@
right: 0; }
.container-fluid #channels #slide-next:after {
content: ">"; }
- .container-fluid #channels.user-window-toggled {
- left: -75%; }
.container-fluid #chat-bar {
position: fixed;
left: 0;
- top: 34px;
- z-index: 1; }
+ top: 34px; }
.container-fluid #chat-bar.user-window-toggled {
left: -75%; }
.container-fluid #chat-contents {
@@ -94,9 +121,9 @@
position: fixed;
right: 0;
width: 55px;
- z-index: 1; }
+ z-index: 3; }
.container-fluid #user-window-toggle:hover {
- background: rgba(67, 73, 80, 0.75);
+ background: rgba(67, 73, 80, 0.5);
cursor: pointer; }
.container-fluid #user-window-toggle.user-window-toggled {
right: 75%; }
@@ -110,4 +137,7 @@
.container-fluid #chat-button {
width: 20%;
padding-left: 0;
- padding-right: 0; } }
+ padding-right: 0; }
+
+ .channel {
+ background: #e8e8e8; } }
@@ -1,16 +1,53 @@
+@mixin box-shadow($shadow) {
+ -webkit-box-shadow: $shadow;
+ -moz-box-shadow: $shadow;
+ box-shadow: $shadow;
+}
+
@media screen and (max-width: 720px) {
.container-fluid {
- /* Remove sidebars */
+ /* Overview. */
+ #overview {
+ left: 0;
+ margin-top: 0;
+ bottom: 0;
+ position: fixed;
+ padding: 0;
+ width: 100%;
+ z-index: 1;
+ ul {
+ margin: 0;
+ li {
+ margin: 0;
+ padding: 10px 0;
+ width: 50%;
+ }
+ }
+ }
+ #logo, .sidebar h2 {
+ display: block;
+ position: fixed;
+ margin-left: auto;
+ margin-right: auto;
+ width: 100%;
+ z-index: 1;
+ }
+ .sidebar h2 {
+ margin-top: 40%;
+ }
+
+ /* Convert channel sidebar to browser-like tabs. */
.sidebar {
width: 0;
}
#user-window {
+ @include box-shadow(0 0 4px 2px #333);
display: none;
position: fixed;
top: 0;
right: 0;
width: 75%;
- z-index: 2;
+ z-index: 3;
}
.content {
margin-left: 0;
@@ -22,6 +59,9 @@
}
#chat-window {
width: 100%;
+ div {
+ z-index: 2;
+ }
}
#channels {
display: inline-block;
@@ -31,7 +71,7 @@
overflow: visible;
top: 0;
white-space: nowrap;
- z-index: 1;
+ z-index: 2;
div.channel {
border: 1px solid rgba(10, 10, 10, .5);
border-radius: 25px 0 0;
@@ -60,11 +100,11 @@
visibility: visible;
}
}
- #slide-prev, #slide-next {
+ .slide {
background: rgba(67, 73, 80, .75);
color: white;
font-size: 24px;
- display: inline-block;
+ display: none;
height: 34px;
padding-top: 4px;
position: fixed;
@@ -88,15 +128,11 @@
content: ">";
}
}
- &.user-window-toggled {
- left: -75%;
- }
}
#chat-bar {
position: fixed;
left: 0;
top: 34px;
- z-index: 1;
&.user-window-toggled {
left: -75%;
}
@@ -105,6 +141,7 @@
margin-top: 34px;
}
+ /* Toggleable sliding sidebar replacement for user window. */
#user-window-toggle {
background: rgba(67, 73, 80, .1);
border: 1px solid rgba(67, 73, 80, .3);
@@ -115,9 +152,9 @@
position: fixed;
right: 0;
width: 55px;
- z-index: 1;
+ z-index: 3;
&:hover {
- background: rgba(67, 73, 80, .75);
+ background: rgba(67, 73, 80, .5);
cursor: pointer;
}
&.user-window-toggled {
@@ -139,7 +176,8 @@
padding-left: 0;
padding-right: 0;
}
-
-
+ }
+ .channel {
+ background: darken(#F5F5F5, 5%);
}
}
@@ -11,6 +11,7 @@ var ChannelListView = Backbone.View.extend({
initialize: function() {
irc.chatWindows.bind('add', this.addChannel, this);
+ $('.slide').css('display', 'inline-block');
this.channelTabs = []
},
View
@@ -212,6 +212,7 @@ var ChatView = Backbone.View.extend({
$(this).addClass('hide');
});
+ // MOBILE: toggler slides user list in from the left.
$('.content').removeClass('user-window-toggled');
$('#user-window-toggle').click(function() {
$('#user-window').toggle();
@@ -42,6 +42,7 @@ var ChatApplicationView = Backbone.View.extend({
var overview = new OverviewView;
} else {
this.channelList = new ChannelListView;
+ $('.slide').css('display', 'inline-block');
}
return this;
},

0 comments on commit 4462664

Please sign in to comment.