From 2b44cec752569a9f672c628ac8b786b9c590dbf3 Mon Sep 17 00:00:00 2001 From: Evert Date: Fri, 23 Sep 2016 18:42:59 +0300 Subject: [PATCH] mobile-friendly interface --- public/css/main.css | 86 +++++++++++++++++++++++++++++++++++---- public/image/settings.svg | 30 ++++++++++++++ public/image/users.svg | 7 ++++ public/index.html | 3 ++ public/js/main.js | 22 +++++++--- public/main.styl | 73 +++++++++++++++++++++++++++++---- 6 files changed, 201 insertions(+), 20 deletions(-) create mode 100644 public/image/settings.svg create mode 100644 public/image/users.svg diff --git a/public/css/main.css b/public/css/main.css index 846c71f..8edb0cf 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -99,7 +99,7 @@ body { height: 56px; background-color: #00c7e0; position: relative; - z-index: 10; + z-index: 15; box-shadow: 2px 2px 4px #cecece; } .ircclient #chat .ircwrapper .toolbar .logo { @@ -114,6 +114,7 @@ body { position: absolute; left: 60px; right: 0; + white-space: nowrap; overflow-x: auto; overflow-y: hidden; } @@ -135,14 +136,15 @@ body { } .ircclient #chat .ircwrapper .toolbar .tabby .tab #unread { display: inline-block; - min-width: 22px; - height: 22px; + min-width: 18px; + height: 18px; background-color: #bf0000; border: 1px solid #b00; box-shadow: inset 2px 2px 3px #f00; text-align: center; - font-size: 10px; + font-size: 12px; margin: 0 5px; + line-height: 20px; border-radius: 100%; } .ircclient #chat .ircwrapper .toolbar .tabby .tab #unread.none { @@ -174,6 +176,22 @@ body { width: 100%; bottom: 46px; } +.ircclient #chat .ircwrapper .chatarea .smsc-nicklistbtn { + background-image: url("/image/users.svg"); + background-repeat: no-repeat; + background-size: contain; + width: 46px; + height: 46px; + position: absolute; + top: 16px; + right: 16px; + background-color: #00bcd4; + border-radius: 100%; + border: 5px solid #389dbb; + display: none; + opacity: 0.5; + cursor: pointer; +} .ircclient #chat .ircwrapper .chatarea .topicbar { position: absolute; top: 0; @@ -205,13 +223,38 @@ body { top: 0; bottom: 0; display: none; + z-index: 11; + background-color: #fff; +} +.ircclient #chat .ircwrapper .chatarea .nicklist .nick { + cursor: pointer; +} +.ircclient #chat .ircwrapper .chatarea .nicklist .nick:hover { + background-color: #b1ffc2; +} +.ircclient #chat .ircwrapper .chatarea .nicklist .nick .nickname { + font-size: 120%; +} +.ircclient #chat .ircwrapper .chatarea .nicklist .nick .prefix { + width: 16px; + height: 16px; + line-height: 16px; + padding: 2px; + display: inline-block; + background-color: #05abe0; + border-radius: 4px; + color: #fff; + text-align: center; + margin-right: 5px; + font-weight: bold; +} +.ircclient #chat .ircwrapper .chatarea .nicklist .nick .no-prefix { + width: 25px; + display: inline-block; } .ircclient #chat .ircwrapper .chatarea.vnicks .nicklist { display: block; } -.ircclient #chat .ircwrapper .chatarea.vnicks .nicklist.forceopen { - display: block !important; -} .ircclient #chat .ircwrapper .chatarea.vnicks .letterbox { right: 301px; } @@ -240,7 +283,7 @@ body { padding-right: 20px; margin-right: 0; width: 183px; - text-overflow: clip; + overflow: hidden; } .ircclient #chat .ircwrapper .input .inputwrapper { display: inline-block; @@ -340,3 +383,30 @@ body { .message.m_action .actionee { color: #3f51b5; } +@media all and (max-width: 600px) { + .vnicks .nicklist { + display: none !important; + } + .vnicks .letterbox { + right: 0 !important; + } + .vnicks .topicbar { + right: 0 !important; + } + .vnicks.vopentrig .nicklist { + display: block !important; + } + .vnicks.vopentrig .topicbar { + right: 45px; + } + .vnicks .smsc-nicklistbtn { + z-index: 12; + display: block !important; + } + .my_nickname { + display: none; + } + .inputwrapper { + left: 38px !important; + } +} diff --git a/public/image/settings.svg b/public/image/settings.svg new file mode 100644 index 0000000..07405f0 --- /dev/null +++ b/public/image/settings.svg @@ -0,0 +1,30 @@ + + + + + + + + diff --git a/public/image/users.svg b/public/image/users.svg new file mode 100644 index 0000000..e3a4cf8 --- /dev/null +++ b/public/image/users.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/index.html b/public/index.html index 33a8cae..588c3a0 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,8 @@ TeemantIRC + + @@ -39,6 +41,7 @@
+
diff --git a/public/js/main.js b/public/js/main.js index 675b35a..a5fbae3 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -137,6 +137,14 @@ function addClass(element, cl) { element.className = classList.join(" "); } +function toggleClass(element, cl) { + let classList = element.className.split(" "); + if(classList.indexOf(cl) != -1) + removeClass(element, cl); + else + addClass(element, cl); +} + let composer = { message: { simple: function(time, sender, message, type) { @@ -154,11 +162,11 @@ let composer = { case "part": case "quit": case "kick": - element.innerHTML += "<-- "+sender+""; + element.innerHTML += "⬅ "+sender+""; element.innerHTML += " "+message+""; break; case "join": - element.innerHTML += "--> "+sender+""; + element.innerHTML += "➡ "+sender+""; element.innerHTML += " "+message+""; break; default: @@ -604,6 +612,9 @@ class IRCChatWindow { this.firstServer = true; this.currentBuffer = null; this.input_handler = new InputHandler(); + clientdom.smsctrig.onclick = (e) => { + toggleClass(clientdom.chat, "vopentrig"); + } } getBufferByName(buffername) { @@ -815,8 +826,8 @@ class IRCChatWindow { if(kicker) buffer.addMessage("has kicked "+user+" "+reason+"", kicker.nickname, "part"); else - buffer.addMessage(""+user.username+"@"+user.hostname+" has left "+ - channel+(reason != null ? ""+reason+"" : ""), user.nickname, "part"); + buffer.addMessage(""+user.username+"@"+user.hostname+" has left"+ + channel+(reason != null ? " "+reason+"" : ""), user.nickname, "part"); if(kicker) buffer.nicklist.nickRemove(user); else @@ -858,8 +869,9 @@ window.onload = function() { clientdom['send'] = clientdom.frame.querySelector('.sendbutton'); clientdom['chat'] = clientdom.frame.querySelector('.chatarea'); clientdom['topicbar'] = clientdom.chat.querySelector('.topicbar'); + clientdom['smsctrig'] = clientdom.chat.querySelector('.smsc-nicklistbtn'); - irc.socket = io.connect('http://localhost:8080'); + irc.socket = io.connect(); irc.auther = new IRCConnector(); irc.chat = new IRCChatWindow(); diff --git a/public/main.styl b/public/main.styl index 1d1a73d..e4f3442 100644 --- a/public/main.styl +++ b/public/main.styl @@ -92,7 +92,7 @@ body height: 56px background-color: #00c7e0 position: relative - z-index: 10 + z-index: 15 box-shadow: 2px 2px 4px #cecece .logo width: 56px; @@ -105,6 +105,7 @@ body position: absolute; left: 60px; right: 0; + white-space: nowrap; overflow-x: auto; overflow-y: hidden; .tab @@ -124,14 +125,15 @@ body font-weight: 600; #unread display: inline-block; - min-width: 22px; - height: 22px; + min-width: 18px; + height: 18px; background-color: #bf0000; border: 1px solid #b00; box-shadow: inset 2px 2px 3px #f00; text-align: center; - font-size: 10px; + font-size: 12px; margin: 0 5px; + line-height: 20px; border-radius: 100%; &.none display: none; @@ -156,6 +158,21 @@ body top: 56px; width: 100%; bottom: 46px; + .smsc-nicklistbtn + background-image: url(/image/users.svg); + background-repeat: no-repeat; + background-size: contain; + width: 46px; + height: 46px; + position: absolute; + top: 16px; + right: 16px; + background-color: #00bcd4; + border-radius: 100%; + border: 5px solid #389dbb; + display: none; + opacity: 0.5; + cursor: pointer; .topicbar position: absolute; top: 0; @@ -185,11 +202,32 @@ body top: 0; bottom: 0; display: none; + z-index: 11; + background-color: #ffffff; + .nick + cursor: pointer; + &:hover + background-color: #b1ffc2; + .nickname + font-size: 120%; + .prefix + width: 16px; + height: 16px; + line-height: 16px; + padding: 2px; + display: inline-block; + background-color: #05abe0; + border-radius: 4px; + color: #fff; + text-align: center; + margin-right: 5px; + font-weight: bold; + .no-prefix + width: 25px; + display: inline-block; &.vnicks .nicklist display: block; - &.forceopen - display: block !important; .letterbox right: 301px; .topicbar @@ -214,7 +252,7 @@ body padding-right: 20px; margin-right: 0; width: 183px; - text-overflow: clip; + overflow: hidden; .inputwrapper display: inline-block position: absolute @@ -289,3 +327,24 @@ body font-weight: bold; &.m_action .actionee color: #3f51b5; + +@media all and (max-width: 600px) + .vnicks + .nicklist + display: none !important; + .letterbox + right: 0 !important; + .topicbar + right: 0 !important; + &.vopentrig + .nicklist + display: block !important; + .topicbar + right: 45px; + .smsc-nicklistbtn + z-index: 12; + display: block !important; + .my_nickname + display: none; + .inputwrapper + left: 38px !important;