From 85d2ef0d3907ba8b1dc30268eb7578bebb76c0b2 Mon Sep 17 00:00:00 2001 From: Mattias Erming Date: Mon, 7 Jul 2014 23:44:49 +0200 Subject: [PATCH] Responsive interface --- client/components/jquery/stickyscroll.js | 2 - client/css/style.css | 98 +++++++++++++++++++++--- client/index.html | 70 +++++++++-------- client/js/chat.js | 38 ++++++--- client/js/components.min.js | 2 +- lib/plugins/inputs/raw.js | 2 +- 6 files changed, 154 insertions(+), 58 deletions(-) diff --git a/client/components/jquery/stickyscroll.js b/client/components/jquery/stickyscroll.js index c73b16e..f8666e7 100644 --- a/client/components/jquery/stickyscroll.js +++ b/client/components/jquery/stickyscroll.js @@ -11,8 +11,6 @@ }); } - console.log("YES"); - var isBottom = false; var self = this; diff --git a/client/css/style.css b/client/css/style.css index 01ee368..9538f0b 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -44,6 +44,22 @@ button { -webkit-overflow-scrolling: touch; padding: 0 30px; } +#wrap { + height: 100%; + overflow: hidden; + position: relative; + width: 100%; +} +#viewport { + height: 100%; + position: relative; + width: 100%; + transition: all .4s; + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-perspective: 1000; + perspective: 1000; +} #sidebar { background: #262c36; bottom: 0; @@ -145,8 +161,10 @@ button { text-align: center; } #header button { - color: #aaa; - font: 24px Octicons; + border: 1px solid #bdc3c7; + border-radius: 2px; + color: #666; + font: 16px Octicons; height: 32px; opacity: .5; position: absolute; @@ -154,20 +172,25 @@ button { transition: opacity .2s; width: 32px; } -#header #lt { +#header button:hover { + border-color: #bdc3c7; + opacity: 1; +} +#header #lt { left: 4px; } #header #rt { right: 4px; } -#header #lt:before, -#header #rt:before { +#header #lt:before { content: "\f05e"; } +#header #rt:before { + content: "\f037"; +} #windows { bottom: 40px; position: absolute; - overflow: auto; top: 0px; width: 100%; } @@ -224,6 +247,10 @@ button { #chat .msg:last-child .text { padding-bottom: 5px; } +#chat .msg .type { + color: #ccc; + display: none; +} #chat .time, #chat .from, #chat .text { @@ -255,10 +282,6 @@ button { #chat .text a { word-break: break-all; } -#chat .type { - color: #ccc; - display: none; -} #chat .join .type, #chat .part .type, #chat .mode .type, @@ -340,6 +363,7 @@ button { height: 100%; outline: none; padding: 0 12px; + -webkit-appearance: none; width: 100%; } #form #submit { @@ -349,11 +373,63 @@ button { width: 0; } -@media (max-width: 767px) { +@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) { + #viewport.lt { + -webkit-transform: translate3d(220px, 0, 0); + transform: translate3d(220px, 0, 0); + } + #header #lt { + display: inherit; + } + #sidebar { + left: -220px; + } + #main { + left: 0; + } + #chat .messages { + display: block; + padding: 5px 10px; + } + #chat .msg { + display: block; + padding: 2px 0; + } + #chat .msg:last-child { + height: auto; + } + #chat .from, + #chat .text { + background: none; + border: 0; + display: inline; + padding: 0; + } + #chat .time { + display: none; + } +} \ No newline at end of file diff --git a/client/index.html b/client/index.html index 2d337f7..bcd4ee0 100644 --- a/client/index.html +++ b/client/index.html @@ -17,44 +17,48 @@ - -
- -
-
-
-
-
-
-

Connect

+
+
+ +
+ +
+
+
+
+
+
+

Connect

+
+
-
-
-
-
-
-
-

Settings

+
+
+
+
+

Settings

+
+
-
+
+ + +
-
- - -
+
@@ -68,7 +72,7 @@