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

View File

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

View File

@ -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 #lt {
#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;
}
}

View File

@ -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>

View File

@ -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

View File

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