From 8bb484da11c82a87a180563127bdb161c53e7005 Mon Sep 17 00:00:00 2001 From: Mattias Erming Date: Fri, 30 May 2014 14:31:47 -0700 Subject: [PATCH] Animate sidebar toggle --- client/css/style.css | 31 ++++++++++++++++++++++++------- client/index.html | 2 ++ client/js/chat.js | 24 ++++++++++++++---------- 3 files changed, 40 insertions(+), 17 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index f602aab6..4ca20354 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -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; + } +} diff --git a/client/index.html b/client/index.html index 4840a4bd..29dc3492 100644 --- a/client/index.html +++ b/client/index.html @@ -13,6 +13,8 @@ +
+