cadey
/
Shuo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix responsive interface

This commit is contained in:
Mattias Erming 2014-08-15 06:52:14 -07:00
parent 523ae952c7
commit e4d6f8f9ab
3 changed files with 703 additions and 733 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
client/css/style.css
View File

@ -14,10 +14,9 @@ body {
color: #222; color: #222;
font: 16px Lato, sans-serif; font: 16px Lato, sans-serif;
margin: 0; margin: 0;
min-width: 780px;
} }
a { a {
transition: opacity .2s; /*transition: opacity .2s;*/
} }
a:hover { a:hover {
text-decoration: none; text-decoration: none;
@ -76,7 +75,7 @@ button {
opacity: .6; opacity: .6;
} }
.container { .container {
margin: 10% auto; margin: 80px auto;
max-width: 420px; max-width: 420px;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
@ -114,7 +113,6 @@ button {
position: absolute; position: absolute;
top: 0; top: 0;
width: 220px; width: 220px;
z-index: 2;
} }
#sidebar button, #sidebar button,
#sidebar .sign-out { #sidebar .sign-out {
@ -255,6 +253,7 @@ button {
content: "\f032"; content: "\f032";
} }
#main { #main {
background: #fff;
border-radius: 2px; border-radius: 2px;
bottom: 4px; bottom: 4px;
left: 220px; left: 220px;
@ -264,48 +263,12 @@ button {
top: 4px; top: 4px;
} }
#header { #header {
border-bottom: 1px solid #e9ecef;
display: none; display: none;
height: 40px; height: 40px;
position: absolute; position: absolute;
top: 0; top: 0;
width: 100%; width: 100%;
} }
#header h1 {
color: #222;
font-size: 15px;
line-height: 40px;
text-align: center;
}
#header button {
color: #666;
font: 16px Octicons;
height: 32px;
opacity: .5;
position: absolute;
top: 4px;
transition: opacity .2s;
padding: 0 10px;
width: 64px;
}
#header button:hover {
opacity: 1;
}
#header #lt {
left: 4px;
text-align: left;
}
#header #rt {
display: none;
right: 4px;
text-align: right;
}
#header #lt:before {
content: "\f05e";
}
#header #rt:before {
content: "\f037";
}
#windows { #windows {
bottom: 48px; bottom: 48px;
position: absolute; position: absolute;
@ -332,7 +295,7 @@ button {
#windows .chan:before { #windows .chan:before {
background: #f4f4f4; background: #f4f4f4;
background-image: linear-gradient(#f4f4f4, #ececec); background-image: linear-gradient(#f4f4f4, #ececec);
border-bottom: 1px solid #ddd; border-bottom: 1px solid #d7d7d7;
content: " "; content: " ";
display: block; display: block;
height: 10px; height: 10px;
@ -370,6 +333,41 @@ button {
#chat button:hover { #chat button:hover {
opacity: .6; opacity: .6;
} }
#chat .header {
border-bottom: 1px solid #e7e7e7;
line-height: 50px;
height: 48px;
padding: 0 20px;
}
#chat .header .lt,
#chat .header .rt {
color: #ccc;
display: none;
float: left;
line-height: 40px;
height: 36px;
margin: 6px 12px 0 -12px;
width: 36px;
}
#chat .header .lt:before {
font: 16px Octicons;
content: "\f05e";
}
#chat .header .rt {
float: right;
}
#chat .header .title {
font: 16px Lato;
}
#chat .header .topic {
color: #777;
margin-left: 8px;
text-transform: capitalize;
}
#chat .chat,
#chat .sidebar {
top: 58px;
}
#chat .chat { #chat .chat {
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -377,23 +375,28 @@ button {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
position: absolute; position: absolute;
right: 180px; right: 180px;
top: 10px;
} }
#chat .sidebar { #chat .sidebar {
background: #fff; background: #fff;
border-left: 1px solid #e9ecef; border-left: 1px solid #e7e7e7;
border-left: 1px solid #e4eaee;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 10px;
width: 180px; width: 180px;
} }
#chat .lobby .chat,
#chat .query .chat {
right: 0;
}
#chat .lobby .sidebar,
#chat .query .sidebar {
display: none;
}
#chat .show-more { #chat .show-more {
color: #b1c3ce; color: #b1c3ce;
position: absolute; position: absolute;
width: 100%; width: 100%;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #e7e7e7;
height: 41px; height: 41px;
background: #fff; background: #fff;
} }
@ -431,6 +434,7 @@ button {
} }
#chat .time { #chat .time {
background: #fcfdfd; background: #fcfdfd;
background: #fcfcfc;
color: #e4eaee; color: #e4eaee;
text-align: right; text-align: right;
width: 46px; width: 46px;
@ -438,7 +442,9 @@ button {
} }
#chat .from { #chat .from {
background: #fcfdfd; background: #fcfdfd;
background: #fcfcfc;
border-right: 1px solid #f6f8f9; border-right: 1px solid #f6f8f9;
border-right: 1px solid #f6f6f6;
color: #b1c3ce; color: #b1c3ce;
padding-right: 10px; padding-right: 10px;
text-align: right; text-align: right;
@ -446,7 +452,7 @@ button {
min-width: 134px; min-width: 134px;
} }
#chat a, #chat a,
#chat .message .from button, #chat .from button,
#chat .sidebar button { #chat .sidebar button {
color: #84ce88; color: #84ce88;
} }
@ -490,29 +496,15 @@ button {
#chat .action .user:before { #chat .action .user:before {
content: '* '; content: '* ';
} }
#chat .meta {
font-family: "Lato";
height: 80px;
padding: 25px 0 0 20px;
}
#chat .meta h1 {
color: #222;
font-size: 15px;
}
#chat .meta .type {
color: #ccc;
color: #b1c3ce;
font-size: 12px;
text-transform: capitalize;
}
#chat .count { #chat .count {
border-top: 1px dashed #e4eaee; background: #fcfcfc;
border-bottom: 1px solid #e4eaee; background: #fff;
height: 40px; border-bottom: 1px dashed #e7e7e7;
height: 48px;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 80px; top: 0;
} }
#chat .count:before { #chat .count:before {
color: #eee; color: #eee;
@ -520,7 +512,7 @@ button {
content: "\f02e"; content: "\f02e";
position: absolute; position: absolute;
right: 18px; right: 18px;
line-height: 40px; line-height: 50px;
transition: color .2s; transition: color .2s;
z-index: 0; z-index: 0;
} }
@ -530,7 +522,7 @@ button {
background: none; background: none;
font: inherit; font: inherit;
outline: 0; outline: 0;
padding: 12px 20px; padding: 18px 16px;
position: relative; position: relative;
width: 100%; width: 100%;
} }
@ -539,9 +531,9 @@ button {
overflow: auto; overflow: auto;
overflow-x: hidden; overflow-x: hidden;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding: 15px 20px; padding: 12px 16px;
position: absolute; position: absolute;
top: 120px; top: 48px;
width: 100%; width: 100%;
} }
#chat .names button { #chat .names button {
@ -646,44 +638,14 @@ button {
width: 0; width: 0;
} }
/*
@media (max-width: 768px) { @media (max-width: 768px) {
#viewport.rt {
-webkit-transform: translate3d(-180px, 0, 0);
transform: translate3d(-180px, 0, 0);
}
#header {
display: block;
}
#header #lt {
display: none;
}
#windows {
top: 40px;
}
#chat .chat {
right: 0;
}
#chat .sidebar {
bottom: -40px;
right: -180px;
top: -40px;
}
}
@media (max-width: 480px) {
.title {
display: none;
}
.container {
margin-bottom: 5%;
}
#viewport.lt { #viewport.lt {
-webkit-transform: translate3d(220px, 0, 0); -webkit-transform: translate3d(220px, 0, 0);
transform: translate3d(220px, 0, 0); transform: translate3d(220px, 0, 0);
} }
#header #lt { #viewport.rt {
display: inherit; -webkit-transform: translate3d(-180px, 0, 0);
transform: translate3d(-180px, 0, 0);
} }
#sidebar { #sidebar {
left: -220px; left: -220px;
@ -692,8 +654,21 @@ button {
margin-top: 0; margin-top: 0;
} }
#main { #main {
left: 0; left: 5px;
right: 5px;
} }
#chat .chat {
right: 0;
}
#chat .header .lt {
display: block;
}
#chat .sidebar {
right: -180px;
}
}
@media (max-width: 480px) {
#chat .messages { #chat .messages {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
@ -716,4 +691,3 @@ button {
display: none; display: none;
} }
} }
*/

17
client/index.html
View File

@ -32,11 +32,6 @@
</footer> </footer>
</aside> </aside>
<div id="main"> <div id="main">
<header id="header">
<button id="lt"></button>
<button id="rt"></button>
<h1></h1>
</header>
<div id="windows"> <div id="windows">
<div id="chat"></div> <div id="chat"></div>
<div id="sign-in" class="window"> <div id="sign-in" class="window">
@ -211,7 +206,13 @@
<script type="text/html" class="chat"> <script type="text/html" class="chat">
{{#each channels}} {{#each channels}}
<div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan"> <div id="chan-{{id}}" data-id="{{id}}" data-type="{{type}}" class="chan {{type}}">
<div class="header">
<button class="lt"></button>
<button class="rt"></button>
<span class="title">{{name}}</span>
<span class="topic">{{type}} </span>
</div>
<div class="chat"> <div class="chat">
{{#equal 100 messages.length}} {{#equal 100 messages.length}}
<button class="show-more" data-id="{{id}}"> <button class="show-more" data-id="{{id}}">
@ -223,10 +224,6 @@
</div> </div>
</div> </div>
<aside class="sidebar"> <aside class="sidebar">
<div class="meta">
<h1>{{name}}</h1>
<span class="type">{{type}}</span>
</div>
<div class="users"> <div class="users">
{{partial "users"}} {{partial "users"}}
</div> </div>

7
client/js/chat.js
View File

@ -249,9 +249,10 @@ $(function() {
.trigger("change"); .trigger("change");
var viewport = $("#viewport"); var viewport = $("#viewport");
$("#rt, #lt").on("click", function(e) {
viewport.on("click", ".lt, .rt", function(e) {
var self = $(this); var self = $(this);
viewport.toggleClass(self.attr("id")); viewport.toggleClass(self.attr("class"));
if (viewport.is(".lt, .rt")) { if (viewport.is(".lt, .rt")) {
e.stopPropagation(); e.stopPropagation();
chat.find(".chat").one("click", function() { chat.find(".chat").one("click", function() {
@ -300,8 +301,6 @@ $(function() {
favico.badge(""); favico.badge("");
} }
$("#rt").toggle(self.hasClass("chan"));
$("#header").find("h1").html(self.data("title"));
viewport.removeClass(); viewport.removeClass();
$("#windows .active").removeClass("active"); $("#windows .active").removeClass("active");