Responsive interface
This commit is contained in:
Mattias Erming
parent
9c2ffee7d0
commit
85d2ef0d39
|
|
@ -11,8 +11,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
console.log("YES");
|
||||
|
||||
var isBottom = false;
|
||||
var self = this;
|
||||
|
||||
|
|
|
|||
|
|
@ -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 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,44 +17,48 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<aside id="sidebar">
|
||||
<div class="networks"></div>
|
||||
<footer id="footer">
|
||||
<button id="btn-1" data-target="#connect"></button>
|
||||
<button id="btn-2" data-target="#settings"></button>
|
||||
</footer>
|
||||
</aside>
|
||||
<div id="main">
|
||||
<header id="header">
|
||||
<button id="lt"></button>
|
||||
<button id="rt"></button>
|
||||
<h1>#channel</h1>
|
||||
</header>
|
||||
<div id="windows">
|
||||
<div id="chat"></div>
|
||||
<div id="connect">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Connect</h1>
|
||||
<div id="wrap">
|
||||
<div id="viewport">
|
||||
<aside id="sidebar">
|
||||
<div class="networks"></div>
|
||||
<footer id="footer">
|
||||
<button id="btn-1" data-target="#connect" data-title="Connect"></button>
|
||||
<button id="btn-2" data-target="#settings" data-title="Settings"></button>
|
||||
</footer>
|
||||
</aside>
|
||||
<div id="main">
|
||||
<header id="header">
|
||||
<button id="lt"></button>
|
||||
<button id="rt"></button>
|
||||
<h1>#channel</h1>
|
||||
</header>
|
||||
<div id="windows">
|
||||
<div id="chat"></div>
|
||||
<div id="connect">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Connect</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="settings">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Settings</h1>
|
||||
<div id="settings">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Settings</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form id="form" action="">
|
||||
<input id="submit" tabindex="-1" type="submit">
|
||||
<input id="input">
|
||||
</form>
|
||||
</div>
|
||||
<form id="form" action="">
|
||||
<input id="submit" tabindex="-1" type="submit">
|
||||
<input id="input">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="templates">
|
||||
|
|
@ -68,7 +72,7 @@
|
|||
|
||||
<script type="text/html" class="channels">
|
||||
{{#each channels}}
|
||||
<button data-id="{{id}}" data-target="#chan-{{id}}" class="chan">
|
||||
<button data-id="{{id}}" data-target="#chan-{{id}}" data-title="{{name}}" class="chan">
|
||||
<span class="badge"></span>
|
||||
{{name}}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
$(function() {
|
||||
var socket = io();
|
||||
var commands = [
|
||||
"/ame",
|
||||
"/amsg",
|
||||
"/close",
|
||||
"/connect",
|
||||
"/deop",
|
||||
|
|
@ -18,7 +16,6 @@ $(function() {
|
|||
"/notice",
|
||||
"/op",
|
||||
"/part",
|
||||
"/partall",
|
||||
"/query",
|
||||
"/quit",
|
||||
"/raw",
|
||||
|
|
@ -134,17 +131,29 @@ $(function() {
|
|||
.html(render("users", data));
|
||||
});
|
||||
|
||||
var viewport = $("#viewport");
|
||||
$("#rt, #lt").on("click", function(e) {
|
||||
var self = $(this);
|
||||
viewport.toggleClass(self.attr("id"));
|
||||
if (viewport.is(".lt, .rt")) {
|
||||
e.stopPropagation();
|
||||
chat.find(".chat").one("click", function() {
|
||||
viewport.removeClass("lt rt");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var input = $("#input")
|
||||
.history()
|
||||
.tab(complete, {hint: false});
|
||||
|
||||
var form = $("#form").on("submit", function(e) {
|
||||
e.preventDefault();
|
||||
var value = input.val();
|
||||
var text = input.val();
|
||||
input.val("");
|
||||
socket.emit("input", {
|
||||
target: chat.data("id"),
|
||||
text: value
|
||||
text: text
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -168,6 +177,10 @@ $(function() {
|
|||
.removeClass("highlight")
|
||||
.empty();
|
||||
|
||||
$("#rt").toggle(self.hasClass("chan"));
|
||||
$("#header").find("h1").html(self.data("title"));
|
||||
viewport.removeClass();
|
||||
|
||||
var chan = $(target)
|
||||
.css("z-index", top++)
|
||||
.find(".chat")
|
||||
|
|
@ -175,11 +188,11 @@ $(function() {
|
|||
});
|
||||
|
||||
chat.on("input", ".search", function() {
|
||||
var val = $(this).val();
|
||||
var value = $(this).val();
|
||||
var names = $(this).closest(".users").find(".names");
|
||||
names.find("button").each(function() {
|
||||
var btn = $(this);
|
||||
if (btn.text().toLowerCase().indexOf(val) === 0) {
|
||||
if (btn.text().toLowerCase().indexOf(value) === 0) {
|
||||
btn.show();
|
||||
} else {
|
||||
btn.hide();
|
||||
|
|
@ -188,13 +201,18 @@ $(function() {
|
|||
});
|
||||
|
||||
chat.on("click", ".user", function() {
|
||||
var user = $(this).text();
|
||||
var user = $(this).html().trim().replace(/[+%@~]/, "");
|
||||
if (user.indexOf("#") !== -1) {
|
||||
return;
|
||||
}
|
||||
var text = "/whois " + user;
|
||||
console.log({
|
||||
target: chat.data("id"),
|
||||
text: text
|
||||
});
|
||||
socket.emit("input", {
|
||||
target: active,
|
||||
text: "/whois " + user
|
||||
target: chat.data("id"),
|
||||
text: text
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = function(network, chan, cmd, args) {
|
||||
if (cmd != "raw") {
|
||||
if (cmd != "raw" && cmd != "send") {
|
||||
return;
|
||||
}
|
||||
if (args.length !== 0) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue