Implemented flat UI design
This commit is contained in:
Mattias Erming
parent
fd29a95260
commit
9174bf49ff
@ -19,12 +19,20 @@
|
||||
<aside id="sidebar"></aside>
|
||||
<div id="chat"></div>
|
||||
|
||||
<footer id="footer">
|
||||
<a href="<%= homepage %>" target="_blank" class="btn">
|
||||
<strong><%= name %></strong>
|
||||
<%= version %>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/html" id="networks">
|
||||
{{#each networks}}
|
||||
<div id="network-{{id}}" data-nick="{{nick}}" class="network">
|
||||
<h2 class="header">{{host}}</h2>
|
||||
{{partial "#channels"}}
|
||||
</div>
|
||||
{{/each}}
|
||||
@ -41,16 +49,12 @@
|
||||
<script type="text/html" id="windows">
|
||||
{{#each windows}}
|
||||
<div id="window-{{id}}" class="window {{type}}">
|
||||
<div class="title">
|
||||
<h1>{{name}}</h1>
|
||||
<button class="close">Close</button>
|
||||
</div>
|
||||
<div class="users">
|
||||
{{partial "#users"}}
|
||||
</div>
|
||||
<div class="messages">
|
||||
<div class="show-more">
|
||||
<button class="show-more-button">Show more</button>
|
||||
<button class="btn">Show more</button>
|
||||
</div>
|
||||
{{partial "#messages"}}
|
||||
</div>
|
||||
@ -74,7 +78,7 @@
|
||||
</script>
|
||||
|
||||
<script type="text/html" id="messages">
|
||||
{{#slice messages limit="200"}}
|
||||
{{#slice messages limit="20"}}
|
||||
<div class="msg {{type}}">
|
||||
<span class="time">
|
||||
{{time}}
|
||||
@ -82,14 +86,13 @@
|
||||
<button class="user">
|
||||
{{from}}
|
||||
</button>
|
||||
{{#if type}}
|
||||
<span class="type">
|
||||
{{type}}
|
||||
</span>
|
||||
{{/if}}
|
||||
<span class="text">
|
||||
{{#if type}}
|
||||
<em class="type">{{type}}</em>
|
||||
{{/if}}
|
||||
{{{uri text}}}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
{{/slice}}
|
||||
</script>
|
||||
|
||||
@ -108,12 +108,7 @@ $(function() {
|
||||
break;
|
||||
|
||||
case "users":
|
||||
var users = $.map(data.users, function(u) { return u.name; });
|
||||
var tabComplete = commands.concat(users);
|
||||
$("#window-" + data.id)
|
||||
.find(".input")
|
||||
.data("list", tabComplete)
|
||||
.end()
|
||||
.find(".users")
|
||||
.html(render("#users", {users: data.users}))
|
||||
.end();
|
||||
@ -159,7 +154,7 @@ $(function() {
|
||||
});
|
||||
});
|
||||
|
||||
chat.on("click", ".show-more-button", function() {
|
||||
chat.on("click", ".show-more .btn", function() {
|
||||
var more = $(this).parent();
|
||||
var html = $.parseHTML(more.next(".hidden").remove().html());
|
||||
more.replaceWith(html);
|
||||
|
||||
171
client/style.css
171
client/style.css
@ -3,10 +3,22 @@
|
||||
}
|
||||
html,
|
||||
body {
|
||||
font: 12px "Consolas", monospace;
|
||||
background: #fff;
|
||||
color: #34495e;
|
||||
font: 13px Helvetica, Arial, sans-serif;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
a,
|
||||
.user {
|
||||
color: #16a085;
|
||||
text-decoration: none;
|
||||
transition: all .25s;
|
||||
}
|
||||
a:hover,
|
||||
.user:hover {
|
||||
color: #1abc9c;
|
||||
}
|
||||
a:focus,
|
||||
button:focus {
|
||||
outline: 0;
|
||||
@ -16,59 +28,103 @@ h2 {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
.user {
|
||||
button {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.user:hover {
|
||||
color: #f00;
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.user::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.btn {
|
||||
border: 2px solid #bdc3c7;
|
||||
border-radius: 3px;
|
||||
color: #aeb6bf;
|
||||
font: 14px Helvetica, Arial, sans-serif;
|
||||
padding: 8px 12px;
|
||||
text-decoration: none;
|
||||
transition: all .25s;
|
||||
}
|
||||
.btn:hover {
|
||||
border-color: #7f8c8d;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
.badge {
|
||||
background-color: #d8dce0;
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
line-height: 1.615;
|
||||
padding: 0 8px;
|
||||
}
|
||||
#wrap,
|
||||
#viewport {
|
||||
height: 100%;
|
||||
min-width: 640px;
|
||||
min-width: 720px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
#sidebar {
|
||||
border-right: 1px solid #e1e1e8;
|
||||
border-right: 4px solid #bdc3c7;
|
||||
float: left;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
width: 200px;
|
||||
}
|
||||
#sidebar .network {
|
||||
margin: 20px;
|
||||
#sidebar .network + .network {
|
||||
border-top: 2px solid #ebedef;
|
||||
margin-top: 14px;
|
||||
padding-top: 14px;
|
||||
}
|
||||
#sidebar .header {
|
||||
color: #aeb6bf;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
padding: 6px 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#sidebar .channel {
|
||||
border-radius: 2px;
|
||||
color: #16a085;
|
||||
display: block;
|
||||
margin: 5px;
|
||||
margin-left: 10px;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
line-height: 1.2;
|
||||
padding: 6px 12px;
|
||||
text-align: left;
|
||||
transition: all .25s;
|
||||
width: 100%;
|
||||
}
|
||||
#sidebar .channel:first-child {
|
||||
margin-left: 0;
|
||||
#sidebar .channel + .channel {
|
||||
margin-top: 3px;
|
||||
}
|
||||
#sidebar .channel:hover {
|
||||
background-color: #f1f2f3;
|
||||
color: #1abc9c;
|
||||
}
|
||||
#sidebar .channel.active {
|
||||
background-color: #ebedef;
|
||||
color: #526476;
|
||||
}
|
||||
#chat {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
font: 12px "Consolas", monospace;
|
||||
left: 200px;
|
||||
line-height: 16px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
#chat a {
|
||||
color: inherit;
|
||||
}
|
||||
#chat form {
|
||||
border-top: 1px solid #ddd;
|
||||
border-top: 1px solid #bdc3c7;
|
||||
bottom: 1px;
|
||||
height: 30px;
|
||||
left: 0;
|
||||
@ -89,8 +145,6 @@ h2 {
|
||||
#chat .lobby .close {
|
||||
display: none;
|
||||
}
|
||||
#chat .query .title,
|
||||
#chat .lobby .title,
|
||||
#chat .query .messages,
|
||||
#chat .lobby .messages {
|
||||
right: 0;
|
||||
@ -101,95 +155,76 @@ h2 {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
#chat .close {
|
||||
float: right;
|
||||
margin-top: 10px;
|
||||
}
|
||||
#chat .title {
|
||||
border-bottom: 1px solid #ddd;
|
||||
height: 42px;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
#chat .title h1 {
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
line-height: 42px;
|
||||
}
|
||||
#chat .messages {
|
||||
box-shadow: inset 8px 0 0 #f5f5f5;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
padding: 0 8px 4px;
|
||||
position: absolute;
|
||||
right: 160px;
|
||||
top: 42px;
|
||||
top: 0;
|
||||
word-wrap: break-word;
|
||||
z-index: 0;
|
||||
}
|
||||
#chat .show-more {
|
||||
display: none;
|
||||
padding: 2px 8px 0 16px;
|
||||
margin-top: 4px;
|
||||
padding: 2px 0;
|
||||
}
|
||||
#chat .show-more-button {
|
||||
padding: 6px 0;
|
||||
#chat .show-more .btn {
|
||||
width: 100%;
|
||||
}
|
||||
#chat .msg {
|
||||
border-left: 8px solid transparent;
|
||||
line-height: 1.3em;
|
||||
padding: 2px 8px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
#chat .time {
|
||||
color: #aaa;
|
||||
}
|
||||
#chat .highlight {
|
||||
background: #fcf8e3;
|
||||
border-left-color: #faebcc;
|
||||
}
|
||||
#chat .user {
|
||||
color: #f00;
|
||||
color: #bdc3c7;
|
||||
}
|
||||
#chat .error,
|
||||
#chat .join,
|
||||
#chat .kick,
|
||||
#chat .mode,
|
||||
#chat .motd,
|
||||
#chat .nick,
|
||||
#chat .notice,
|
||||
#chat .part,
|
||||
#chat .quit,
|
||||
#chat .topic,
|
||||
#chat .whois {
|
||||
color: #888;
|
||||
color: #95a5a6;
|
||||
}
|
||||
#chat .highlight .type,
|
||||
#chat .motd .type,
|
||||
#chat .notice .type,
|
||||
#chat .whois .type {
|
||||
display: none;
|
||||
}
|
||||
#chat .users {
|
||||
background: #fff;
|
||||
border-left: 1px solid #ddd;
|
||||
border-left: 4px solid #bdc3c7;
|
||||
bottom: 30px;
|
||||
line-height: 1.4em;
|
||||
overflow-y: auto;
|
||||
padding: 4px 8px;
|
||||
padding-bottom: 6px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 42px;
|
||||
top: 0;
|
||||
width: 160px;
|
||||
}
|
||||
#chat .users .count {
|
||||
color: #888;
|
||||
background: #ecf0f1;
|
||||
color: #aeb6bf;
|
||||
margin-bottom: 4px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
#chat .users .user {
|
||||
display: block;
|
||||
padding: 2px 0;
|
||||
padding: 4px 12px;
|
||||
}
|
||||
#footer {
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 195px;
|
||||
}
|
||||
#footer .btn {
|
||||
display: block;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
port: 9000,
|
||||
theme: "/themes/default.css",
|
||||
theme: "",
|
||||
defaults: {
|
||||
nick: "shout_user",
|
||||
realname: "http://github.com/erming/shout",
|
||||
|
||||
@ -12,18 +12,16 @@ function Chan(attr) {
|
||||
}, attr));
|
||||
};
|
||||
|
||||
Chan.prototype = {
|
||||
sortUsers: function() {
|
||||
this.users = _.sortBy(
|
||||
Chan.prototype.sortUsers = function() {
|
||||
this.users = _.sortBy(
|
||||
this.users,
|
||||
function(u) { return u.name.toLowerCase(); }
|
||||
);
|
||||
var modes = ["+", "@"];
|
||||
modes.forEach(function(mode) {
|
||||
this.users = _.remove(
|
||||
this.users,
|
||||
function(u) { return u.name.toLowerCase(); }
|
||||
);
|
||||
var modes = ["+", "@"];
|
||||
modes.forEach(function(mode) {
|
||||
this.users = _.remove(
|
||||
this.users,
|
||||
function(u) { return u.mode == mode; }
|
||||
).concat(this.users);
|
||||
}, this);
|
||||
}
|
||||
function(u) { return u.mode == mode; }
|
||||
).concat(this.users);
|
||||
}, this);
|
||||
};
|
||||
|
||||
@ -14,12 +14,18 @@ function Network(attr) {
|
||||
|
||||
// Add lobby
|
||||
this.channels.unshift(
|
||||
new Chan({name: this.host, type: "lobby"})
|
||||
new Chan({name: "Status", type: "lobby"})
|
||||
);
|
||||
};
|
||||
|
||||
Network.prototype = {
|
||||
toJSON: function() {
|
||||
return _.omit(this, "client");
|
||||
Network.prototype.toJSON = function() {
|
||||
var copy = _.omit(
|
||||
this,
|
||||
"client"
|
||||
);
|
||||
var name = copy.host.split(".")[1];
|
||||
if (name) {
|
||||
copy.host = name;
|
||||
}
|
||||
return copy;
|
||||
};
|
||||
|
||||
@ -15,7 +15,7 @@ var User = require("./models/user");
|
||||
|
||||
var sockets = null;
|
||||
var networks = [
|
||||
new Network({host: "Status"})
|
||||
new Network({host: "Shout Client"})
|
||||
];
|
||||
|
||||
var events = [
|
||||
@ -357,7 +357,7 @@ function event(e, data) {
|
||||
var type = "";
|
||||
var text = data.message;
|
||||
var network = this;
|
||||
text.split(/ |'|:/).forEach(function(w) {
|
||||
text.split(' ').forEach(function(w) {
|
||||
if (w.indexOf(network.client.me) == 0) type = "highlight";
|
||||
});
|
||||
var msg = new Msg({
|
||||
@ -433,7 +433,7 @@ function event(e, data) {
|
||||
var chan = channels[0];
|
||||
var msg = new Msg({
|
||||
type: "notice",
|
||||
from: data.to == "*" ? "-!-" : data.from,
|
||||
from: (data.to == "*" ? "-!-" : data.from) || "-!-",
|
||||
text: data.message,
|
||||
});
|
||||
chan.messages.push(msg);
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
"name": "shout",
|
||||
"description": "The modern IRC client",
|
||||
"version": "1.0.0-alpha1",
|
||||
"homepage": "http://github.com/erming/shout",
|
||||
"author": {
|
||||
"name": "Mattias Erming",
|
||||
"email": "mattias@mattiaserming.com"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user