cadey
/
Shuo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Responsive interface

This commit is contained in:
Mattias Erming 2014-07-07 23:44:49 +02:00
parent 9c2ffee7d0
commit 85d2ef0d39
6 changed files with 154 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/jquery/stickyscroll.js vendored
View File

@ -11,8 +11,6 @@
}); });
} }
console.log("YES");
var isBottom = false; var isBottom = false;
var self = this; var self = this;

96
client/css/style.css
View File

@ -44,6 +44,22 @@ button {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
padding: 0 30px; 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 { #sidebar {
background: #262c36; background: #262c36;
bottom: 0; bottom: 0;
@ -145,8 +161,10 @@ button {
text-align: center; text-align: center;
} }
#header button { #header button {
color: #aaa; border: 1px solid #bdc3c7;
font: 24px Octicons; border-radius: 2px;
color: #666;
font: 16px Octicons;
height: 32px; height: 32px;
opacity: .5; opacity: .5;
position: absolute; position: absolute;
@ -154,20 +172,25 @@ button {
transition: opacity .2s; transition: opacity .2s;
width: 32px; width: 32px;
} }
#header button:hover {
border-color: #bdc3c7;
opacity: 1;
}
#header #lt { #header #lt {
left: 4px; left: 4px;
} }
#header #rt { #header #rt {
right: 4px; right: 4px;
} }
#header #lt:before, #header #lt:before {
#header #rt:before {
content: "\f05e"; content: "\f05e";
} }
#header #rt:before {
content: "\f037";
}
#windows { #windows {
bottom: 40px; bottom: 40px;
position: absolute; position: absolute;
overflow: auto;
top: 0px; top: 0px;
width: 100%; width: 100%;
} }
@ -224,6 +247,10 @@ button {
#chat .msg:last-child .text { #chat .msg:last-child .text {
padding-bottom: 5px; padding-bottom: 5px;
} }
#chat .msg .type {
color: #ccc;
display: none;
}
#chat .time, #chat .time,
#chat .from, #chat .from,
#chat .text { #chat .text {
@ -255,10 +282,6 @@ button {
#chat .text a { #chat .text a {
word-break: break-all; word-break: break-all;
} }
#chat .type {
color: #ccc;
display: none;
}
#chat .join .type, #chat .join .type,
#chat .part .type, #chat .part .type,
#chat .mode .type, #chat .mode .type,
@ -340,6 +363,7 @@ button {
height: 100%; height: 100%;
outline: none; outline: none;
padding: 0 12px; padding: 0 12px;
-webkit-appearance: none;
width: 100%; width: 100%;
} }
#form #submit { #form #submit {
@ -349,11 +373,63 @@ button {
width: 0; width: 0;
} }
@media (max-width: 767px) { @media (max-width: 768px) {
#viewport.rt {
-webkit-transform: translate3d(-180px, 0, 0);
transform: translate3d(-180px, 0, 0);
}
#header { #header {
display: block; display: block;
} }
#header #lt {
display: none;
}
#windows { #windows {
top: 40px; 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;
}
} }

10
client/index.html
View File

@ -17,11 +17,13 @@
</head> </head>
<body> <body>
<div id="wrap">
<div id="viewport">
<aside id="sidebar"> <aside id="sidebar">
<div class="networks"></div> <div class="networks"></div>
<footer id="footer"> <footer id="footer">
<button id="btn-1" data-target="#connect"></button> <button id="btn-1" data-target="#connect" data-title="Connect"></button>
<button id="btn-2" data-target="#settings"></button> <button id="btn-2" data-target="#settings" data-title="Settings"></button>
</footer> </footer>
</aside> </aside>
<div id="main"> <div id="main">
@ -56,6 +58,8 @@
<input id="input"> <input id="input">
</form> </form>
</div> </div>
</div>
</div>
<div id="templates"> <div id="templates">
<script type="text/html" class="networks"> <script type="text/html" class="networks">
@ -68,7 +72,7 @@
<script type="text/html" class="channels"> <script type="text/html" class="channels">
{{#each 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> <span class="badge"></span>
{{name}} {{name}}
</button> </button>

38
client/js/chat.js
View File

@ -1,8 +1,6 @@
$(function() { $(function() {
var socket = io(); var socket = io();
var commands = [ var commands = [
"/ame",
"/amsg",
"/close", "/close",
"/connect", "/connect",
"/deop", "/deop",
@ -18,7 +16,6 @@ $(function() {
"/notice", "/notice",
"/op", "/op",
"/part", "/part",
"/partall",
"/query", "/query",
"/quit", "/quit",
"/raw", "/raw",
@ -134,17 +131,29 @@ $(function() {
.html(render("users", data)); .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") var input = $("#input")
.history() .history()
.tab(complete, {hint: false}); .tab(complete, {hint: false});
var form = $("#form").on("submit", function(e) { var form = $("#form").on("submit", function(e) {
e.preventDefault(); e.preventDefault();
var value = input.val(); var text = input.val();
input.val(""); input.val("");
socket.emit("input", { socket.emit("input", {
target: chat.data("id"), target: chat.data("id"),
text: value text: text
}); });
}); });
@ -168,6 +177,10 @@ $(function() {
.removeClass("highlight") .removeClass("highlight")
.empty(); .empty();
$("#rt").toggle(self.hasClass("chan"));
$("#header").find("h1").html(self.data("title"));
viewport.removeClass();
var chan = $(target) var chan = $(target)
.css("z-index", top++) .css("z-index", top++)
.find(".chat") .find(".chat")
@ -175,11 +188,11 @@ $(function() {
}); });
chat.on("input", ".search", function() { chat.on("input", ".search", function() {
var val = $(this).val(); var value = $(this).val();
var names = $(this).closest(".users").find(".names"); var names = $(this).closest(".users").find(".names");
names.find("button").each(function() { names.find("button").each(function() {
var btn = $(this); var btn = $(this);
if (btn.text().toLowerCase().indexOf(val) === 0) { if (btn.text().toLowerCase().indexOf(value) === 0) {
btn.show(); btn.show();
} else { } else {
btn.hide(); btn.hide();
@ -188,13 +201,18 @@ $(function() {
}); });
chat.on("click", ".user", function() { chat.on("click", ".user", function() {
var user = $(this).text(); var user = $(this).html().trim().replace(/[+%@~]/, "");
if (user.indexOf("#") !== -1) { if (user.indexOf("#") !== -1) {
return; return;
} }
var text = "/whois " + user;
console.log({
target: chat.data("id"),
text: text
});
socket.emit("input", { socket.emit("input", {
target: active, target: chat.data("id"),
text: "/whois " + user text: text
}); });
}); });

2
client/js/components.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
lib/plugins/inputs/raw.js
View File

@ -1,5 +1,5 @@
module.exports = function(network, chan, cmd, args) { module.exports = function(network, chan, cmd, args) {
if (cmd != "raw") { if (cmd != "raw" && cmd != "send") {
return; return;
} }
if (args.length !== 0) { if (args.length !== 0) {