supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Animate sidebar toggle

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

2
client/index.html
View File

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

24
client/js/chat.js
View File

@ -161,16 +161,6 @@ $(function() {
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() {
var messages = $(this);
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) {
var e = {
"<": "&lt;",