IcyNetwork/teemant-old
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mobile-friendly interface

Browse Source
This commit is contained in:
Evert Prants 2016-09-23 18:42:59 +03:00
parent 3a648e9584
commit 2b44cec752
6 changed files with 201 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
public/css/main.css
View File

@ -99,7 +99,7 @@ body {
height: 56px; height: 56px;
background-color: #00c7e0; background-color: #00c7e0;
position: relative; position: relative;
z-index: 10; z-index: 15;
box-shadow: 2px 2px 4px #cecece; box-shadow: 2px 2px 4px #cecece;
} }
.ircclient #chat .ircwrapper .toolbar .logo { .ircclient #chat .ircwrapper .toolbar .logo {
@ -114,6 +114,7 @@ body {
position: absolute; position: absolute;
left: 60px; left: 60px;
right: 0; right: 0;
white-space: nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
} }
@ -135,14 +136,15 @@ body {
} }
.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread { .ircclient #chat .ircwrapper .toolbar .tabby .tab #unread {
display: inline-block; display: inline-block;
min-width: 22px; min-width: 18px;
height: 22px; height: 18px;
background-color: #bf0000; background-color: #bf0000;
border: 1px solid #b00; border: 1px solid #b00;
box-shadow: inset 2px 2px 3px #f00; box-shadow: inset 2px 2px 3px #f00;
text-align: center; text-align: center;
font-size: 10px; font-size: 12px;
margin: 0 5px; margin: 0 5px;
line-height: 20px;
border-radius: 100%; border-radius: 100%;
} }
.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread.none { .ircclient #chat .ircwrapper .toolbar .tabby .tab #unread.none {
@ -174,6 +176,22 @@ body {
width: 100%; width: 100%;
bottom: 46px; 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 { .ircclient #chat .ircwrapper .chatarea .topicbar {
position: absolute; position: absolute;
top: 0; top: 0;
@ -205,13 +223,38 @@ body {
top: 0; top: 0;
bottom: 0; bottom: 0;
display: none; 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 { .ircclient #chat .ircwrapper .chatarea.vnicks .nicklist {
display: block; display: block;
} }
.ircclient #chat .ircwrapper .chatarea.vnicks .nicklist.forceopen {
display: block !important;
}
.ircclient #chat .ircwrapper .chatarea.vnicks .letterbox { .ircclient #chat .ircwrapper .chatarea.vnicks .letterbox {
right: 301px; right: 301px;
} }
@ -240,7 +283,7 @@ body {
padding-right: 20px; padding-right: 20px;
margin-right: 0; margin-right: 0;
width: 183px; width: 183px;
text-overflow: clip; overflow: hidden;
} }
.ircclient #chat .ircwrapper .input .inputwrapper { .ircclient #chat .ircwrapper .input .inputwrapper {
display: inline-block; display: inline-block;
@ -340,3 +383,30 @@ body {
.message.m_action .actionee { .message.m_action .actionee {
color: #3f51b5; 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;
}
}

30
public/image/settings.svg Normal file
View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 478.703 478.703" style="enable-background:new 0 0 478.703 478.703;" xml:space="preserve">
<g>
<g>
<path d="M454.2,189.101l-33.6-5.7c-3.5-11.3-8-22.2-13.5-32.6l19.8-27.7c8.4-11.8,7.1-27.9-3.2-38.1l-29.8-29.8
c-5.6-5.6-13-8.7-20.9-8.7c-6.2,0-12.1,1.9-17.1,5.5l-27.8,19.8c-10.8-5.7-22.1-10.4-33.8-13.9l-5.6-33.2
c-2.4-14.3-14.7-24.7-29.2-24.7h-42.1c-14.5,0-26.8,10.4-29.2,24.7l-5.8,34c-11.2,3.5-22.1,8.1-32.5,13.7l-27.5-19.8
c-5-3.6-11-5.5-17.2-5.5c-7.9,0-15.4,3.1-20.9,8.7l-29.9,29.8c-10.2,10.2-11.6,26.3-3.2,38.1l20,28.1
c-5.5,10.5-9.9,21.4-13.3,32.7l-33.2,5.6c-14.3,2.4-24.7,14.7-24.7,29.2v42.1c0,14.5,10.4,26.8,24.7,29.2l34,5.8
c3.5,11.2,8.1,22.1,13.7,32.5l-19.7,27.4c-8.4,11.8-7.1,27.9,3.2,38.1l29.8,29.8c5.6,5.6,13,8.7,20.9,8.7c6.2,0,12.1-1.9,17.1-5.5
l28.1-20c10.1,5.3,20.7,9.6,31.6,13l5.6,33.6c2.4,14.3,14.7,24.7,29.2,24.7h42.2c14.5,0,26.8-10.4,29.2-24.7l5.7-33.6
c11.3-3.5,22.2-8,32.6-13.5l27.7,19.8c5,3.6,11,5.5,17.2,5.5l0,0c7.9,0,15.3-3.1,20.9-8.7l29.8-29.8c10.2-10.2,11.6-26.3,3.2-38.1
l-19.8-27.8c5.5-10.5,10.1-21.4,13.5-32.6l33.6-5.6c14.3-2.4,24.7-14.7,24.7-29.2v-42.1
C478.9,203.801,468.5,191.501,454.2,189.101z M451.9,260.401c0,1.3-0.9,2.4-2.2,2.6l-42,7c-5.3,0.9-9.5,4.8-10.8,9.9
c-3.8,14.7-9.6,28.8-17.4,41.9c-2.7,4.6-2.5,10.3,0.6,14.7l24.7,34.8c0.7,1,0.6,2.5-0.3,3.4l-29.8,29.8c-0.7,0.7-1.4,0.8-1.9,0.8
c-0.6,0-1.1-0.2-1.5-0.5l-34.7-24.7c-4.3-3.1-10.1-3.3-14.7-0.6c-13.1,7.8-27.2,13.6-41.9,17.4c-5.2,1.3-9.1,5.6-9.9,10.8l-7.1,42
c-0.2,1.3-1.3,2.2-2.6,2.2h-42.1c-1.3,0-2.4-0.9-2.6-2.2l-7-42c-0.9-5.3-4.8-9.5-9.9-10.8c-14.3-3.7-28.1-9.4-41-16.8
c-2.1-1.2-4.5-1.8-6.8-1.8c-2.7,0-5.5,0.8-7.8,2.5l-35,24.9c-0.5,0.3-1,0.5-1.5,0.5c-0.4,0-1.2-0.1-1.9-0.8l-29.8-29.8
c-0.9-0.9-1-2.3-0.3-3.4l24.6-34.5c3.1-4.4,3.3-10.2,0.6-14.8c-7.8-13-13.8-27.1-17.6-41.8c-1.4-5.1-5.6-9-10.8-9.9l-42.3-7.2
c-1.3-0.2-2.2-1.3-2.2-2.6v-42.1c0-1.3,0.9-2.4,2.2-2.6l41.7-7c5.3-0.9,9.6-4.8,10.9-10c3.7-14.7,9.4-28.9,17.1-42
c2.7-4.6,2.4-10.3-0.7-14.6l-24.9-35c-0.7-1-0.6-2.5,0.3-3.4l29.8-29.8c0.7-0.7,1.4-0.8,1.9-0.8c0.6,0,1.1,0.2,1.5,0.5l34.5,24.6
c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1
c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8
c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7
c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z"/>
<path d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001
z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

7
public/image/users.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 80.13 80.13" style="enable-background:new 0 0 80.13 80.13;" xml:space="preserve">
<g>
<path d="M48.355,17.922c3.705,2.323,6.303,6.254,6.776,10.817c1.511,0.706,3.188,1.112,4.966,1.112 c6.491,0,11.752-5.261,11.752-11.751c0-6.491-5.261-11.752-11.752-11.752C53.668,6.35,48.453,11.517,48.355,17.922z M40.656,41.984 c6.491,0,11.752-5.262,11.752-11.752s-5.262-11.751-11.752-11.751c-6.49,0-11.754,5.262-11.754,11.752S34.166,41.984,40.656,41.984 z M45.641,42.785h-9.972c-8.297,0-15.047,6.751-15.047,15.048v12.195l0.031,0.191l0.84,0.263 c7.918,2.474,14.797,3.299,20.459,3.299c11.059,0,17.469-3.153,17.864-3.354l0.785-0.397h0.084V57.833 C60.688,49.536,53.938,42.785,45.641,42.785z M65.084,30.653h-9.895c-0.107,3.959-1.797,7.524-4.47,10.088 c7.375,2.193,12.771,9.032,12.771,17.11v3.758c9.77-0.358,15.4-3.127,15.771-3.313l0.785-0.398h0.084V45.699 C80.13,37.403,73.38,30.653,65.084,30.653z M20.035,29.853c2.299,0,4.438-0.671,6.25-1.814c0.576-3.757,2.59-7.04,5.467-9.276 c0.012-0.22,0.033-0.438,0.033-0.66c0-6.491-5.262-11.752-11.75-11.752c-6.492,0-11.752,5.261-11.752,11.752 C8.283,24.591,13.543,29.853,20.035,29.853z M30.589,40.741c-2.66-2.551-4.344-6.097-4.467-10.032 c-0.367-0.027-0.73-0.056-1.104-0.056h-9.971C6.75,30.653,0,37.403,0,45.699v12.197l0.031,0.188l0.84,0.265 c6.352,1.983,12.021,2.897,16.945,3.185v-3.683C17.818,49.773,23.212,42.936,30.589,40.741z" fill="#FFFFFF"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

3
public/index.html
View File

@ -4,6 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>TeemantIRC</title> <title>TeemantIRC</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script> <script type="text/javascript" src="/socket.io/socket.io.js"></script>
@ -39,6 +41,7 @@
</div> </div>
</div> </div>
<div class="chatarea"> <div class="chatarea">
<div class="smsc-nicklistbtn"></div>
<div class="topicbar"></div> <div class="topicbar"></div>
<div class="letterbox"></div> <div class="letterbox"></div>
<div class="nicklist"></div> <div class="nicklist"></div>

22
public/js/main.js
View File

@ -137,6 +137,14 @@ function addClass(element, cl) {
element.className = classList.join(" "); 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 = { let composer = {
message: { message: {
simple: function(time, sender, message, type) { simple: function(time, sender, message, type) {
@ -154,11 +162,11 @@ let composer = {
case "part": case "part":
case "quit": case "quit":
case "kick": case "kick":
element.innerHTML += "<span class='arrowout'><--</span>&nbsp;<span class='content'><span class='actionee'>"+sender+"</span>"; element.innerHTML += "<span class='arrowout'>&#11013;</span>&nbsp;<span class='content'><span class='actionee'>"+sender+"</span>";
element.innerHTML += "&nbsp;"+message+"</span>"; element.innerHTML += "&nbsp;"+message+"</span>";
break; break;
case "join": case "join":
element.innerHTML += "<span class='arrowin'>--></span>&nbsp;<span class='content'><span class='actionee'>"+sender+"</span>"; element.innerHTML += "<span class='arrowin'>&#10145;</span>&nbsp;<span class='content'><span class='actionee'>"+sender+"</span>";
element.innerHTML += "&nbsp;"+message+"</span>"; element.innerHTML += "&nbsp;"+message+"</span>";
break; break;
default: default:
@ -604,6 +612,9 @@ class IRCChatWindow {
this.firstServer = true; this.firstServer = true;
this.currentBuffer = null; this.currentBuffer = null;
this.input_handler = new InputHandler(); this.input_handler = new InputHandler();
clientdom.smsctrig.onclick = (e) => {
toggleClass(clientdom.chat, "vopentrig");
}
} }
getBufferByName(buffername) { getBufferByName(buffername) {
@ -815,8 +826,8 @@ class IRCChatWindow {
if(kicker) if(kicker)
buffer.addMessage("has kicked "+user+" <span class='reason'>"+reason+"</span>", kicker.nickname, "part"); buffer.addMessage("has kicked "+user+" <span class='reason'>"+reason+"</span>", kicker.nickname, "part");
else else
buffer.addMessage("<span class='hostmask'>"+user.username+"@"+user.hostname+"</span> has left "+ buffer.addMessage("<span class='hostmask'>"+user.username+"@"+user.hostname+"</span> has left"+
channel+(reason != null ? "<span class='reason'>"+reason+"</span>" : ""), user.nickname, "part"); channel+(reason != null ? "&nbsp;<span class='reason'>"+reason+"</span>" : ""), user.nickname, "part");
if(kicker) if(kicker)
buffer.nicklist.nickRemove(user); buffer.nicklist.nickRemove(user);
else else
@ -858,8 +869,9 @@ window.onload = function() {
clientdom['send'] = clientdom.frame.querySelector('.sendbutton'); clientdom['send'] = clientdom.frame.querySelector('.sendbutton');
clientdom['chat'] = clientdom.frame.querySelector('.chatarea'); clientdom['chat'] = clientdom.frame.querySelector('.chatarea');
clientdom['topicbar'] = clientdom.chat.querySelector('.topicbar'); 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.auther = new IRCConnector();
irc.chat = new IRCChatWindow(); irc.chat = new IRCChatWindow();

73
public/main.styl
View File

@ -92,7 +92,7 @@ body
height: 56px height: 56px
background-color: #00c7e0 background-color: #00c7e0
position: relative position: relative
z-index: 10 z-index: 15
box-shadow: 2px 2px 4px #cecece box-shadow: 2px 2px 4px #cecece
.logo .logo
width: 56px; width: 56px;
@ -105,6 +105,7 @@ body
position: absolute; position: absolute;
left: 60px; left: 60px;
right: 0; right: 0;
white-space: nowrap;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
.tab .tab
@ -124,14 +125,15 @@ body
font-weight: 600; font-weight: 600;
#unread #unread
display: inline-block; display: inline-block;
min-width: 22px; min-width: 18px;
height: 22px; height: 18px;
background-color: #bf0000; background-color: #bf0000;
border: 1px solid #b00; border: 1px solid #b00;
box-shadow: inset 2px 2px 3px #f00; box-shadow: inset 2px 2px 3px #f00;
text-align: center; text-align: center;
font-size: 10px; font-size: 12px;
margin: 0 5px; margin: 0 5px;
line-height: 20px;
border-radius: 100%; border-radius: 100%;
&.none &.none
display: none; display: none;
@ -156,6 +158,21 @@ body
top: 56px; top: 56px;
width: 100%; width: 100%;
bottom: 46px; 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 .topicbar
position: absolute; position: absolute;
top: 0; top: 0;
@ -185,11 +202,32 @@ body
top: 0; top: 0;
bottom: 0; bottom: 0;
display: none; 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 &.vnicks
.nicklist .nicklist
display: block; display: block;
&.forceopen
display: block !important;
.letterbox .letterbox
right: 301px; right: 301px;
.topicbar .topicbar
@ -214,7 +252,7 @@ body
padding-right: 20px; padding-right: 20px;
margin-right: 0; margin-right: 0;
width: 183px; width: 183px;
text-overflow: clip; overflow: hidden;
.inputwrapper .inputwrapper
display: inline-block display: inline-block
position: absolute position: absolute
@ -289,3 +327,24 @@ body
font-weight: bold; font-weight: bold;
&.m_action .actionee &.m_action .actionee
color: #3f51b5; 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;