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

Animate sidebar toggle

This commit is contained in:
Mattias Erming 2014-05-30 14:31:47 -07:00
parent fb38df1405
commit 8bb484da11
3 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
client/css/style.css
View File

@ -48,6 +48,11 @@ button {
height: 100%; height: 100%;
position: relative; position: relative;
width: 100%; width: 100%;
transition: all .5s;
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-perspective: 1000;
perspective: 1000;
} }
#sidebar { #sidebar {
background: #262c36; background: #262c36;
@ -55,6 +60,7 @@ button {
left: 0; left: 0;
line-height: 2em; line-height: 2em;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 50px; padding: 50px;
position: absolute; position: absolute;
top: 0; top: 0;
@ -197,6 +203,8 @@ button {
bottom: 35px; bottom: 35px;
box-shadow: inset 160px 0 #f9f9f9; box-shadow: inset 160px 0 #f9f9f9;
left: 0; left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
position: absolute; position: absolute;
right: 180px; right: 180px;
top: 0; top: 0;
@ -263,11 +271,15 @@ button {
} }
#chat .sidebar { #chat .sidebar {
bottom: 0; bottom: 0;
display: none;
position: absolute; position: absolute;
right: 0; right: 0;
width: 180px; width: 180px;
top: 0; top: 0;
} }
#chat .active .sidebar {
display: block;
}
#chat .meta { #chat .meta {
border: 1px solid #eee; border: 1px solid #eee;
border-width: 0 0 1px 1px; border-width: 0 0 1px 1px;
@ -288,6 +300,7 @@ button {
bottom: 0; bottom: 0;
line-height: 1.6em; line-height: 1.6em;
overflow-y: auto; overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 15px 20px; padding: 15px 20px;
position: absolute; position: absolute;
top: 80px; top: 80px;
@ -323,13 +336,12 @@ button {
@media (max-width: 768px) { @media (max-width: 768px) {
#viewport.lt { #viewport.lt {
margin-left: 240px; -webkit-transform: translate3d(240px, 0, 0);
transform: translate3d(240px, 0, 0);
} }
#viewport.rt { #viewport.rt {
margin-left: -180px; -webkit-transform: translate3d(-180px, 0, 0);
} transform: translate3d(-180px, 0, 0);
#viewport.rt .active .sidebar {
display: block;
} }
#sidebar { #sidebar {
margin-left: -240px; margin-left: -240px;
@ -353,12 +365,11 @@ button {
right: 0; right: 0;
} }
#chat .sidebar { #chat .sidebar {
display: none;
margin-right: -180px; margin-right: -180px;
} }
#chat .messages { #chat .messages {
display: block; display: block;
padding: 4px 6px; padding: 4px 10px;
} }
#chat .row { #chat .row {
display: block; display: block;
@ -372,3 +383,9 @@ button {
display: none; display: none;
} }
} }
@media screen and (max-device-width: 768px) {
#detect {
display: none;
}
}

2
client/index.html
View File

@ -13,6 +13,8 @@
</head> </head>
<body> <body>
<div id="detect"></div>
<div id="wrap"> <div id="wrap">
<div id="viewport"> <div id="viewport">
<aside id="sidebar"> <aside id="sidebar">

24
client/js/chat.js
View File

@ -161,16 +161,6 @@ $(function() {
return false; return false;
}); });
var viewport = $("#viewport");
chat.on("click", ".lt, .rt", function() {
var btn = $(this);
viewport.toggleClass(btn.attr("class"));
});
chat.on("focus", ".input", function() {
viewport.removeClass();
});
chat.on("append", ".messages", function() { chat.on("append", ".messages", function() {
var messages = $(this); var messages = $(this);
var id = messages.closest(".window").find(".form").data("target"); var id = messages.closest(".window").find(".form").data("target");
@ -224,6 +214,20 @@ $(function() {
}); });
}); });
// Toggle sidebars
var viewport = $("#viewport");
var toggle = "click";
if ($("#detect").css("display") == "none") {
toggle = "touchstart";
}
chat.on(toggle, ".lt, .rt", function() {
var btn = $(this);
viewport.toggleClass(btn.attr("class"));
});
chat.on("focus", ".input", function() {
viewport.removeClass();
});
function escape(text) { function escape(text) {
var e = { var e = {
"<": "&lt;", "<": "&lt;",