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;