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

Added FontAwesome

This commit is contained in:
Mattias Erming 2014-06-21 21:39:51 +02:00
parent c2ff4566fa
commit 14cd7e2409
3 changed files with 49 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
client/css/style.css
View File

@ -126,8 +126,10 @@ button {
font: bold 15px Lato; font: bold 15px Lato;
margin-bottom: 6px; margin-bottom: 6px;
} }
#sidebar h2 { #sidebar .lobby {
color: #84d1ff; color: #84d1ff !important;
font-size: 15px;
font-weight: bold;
text-transform: capitalize; text-transform: capitalize;
} }
#sidebar .close { #sidebar .close {
@ -168,11 +170,28 @@ button {
} }
#sidebar .pulse { #sidebar .pulse {
color: #fff; color: #fff;
transition: color 0.2s; transition: color .2s;
} }
#sidebar .network { #sidebar .network {
margin-top: 30px; margin-top: 30px;
} }
#sidebar .footer {
bottom: 0;
height: 50px;
left: 0;
padding: 0 40px;
position: absolute;
right: 0;
}
#sidebar .footer small {
color: #7c838d;
display: block;
font-size: 12px;
opacity: .4;
text-align: center;
text-transform: uppercase;
word-spacing: 3px;
}
#main { #main {
bottom: 0; bottom: 0;
left: 220px; left: 220px;
@ -280,25 +299,24 @@ button {
font-size: 15px; font-size: 15px;
} }
#chat .header button { #chat .header button {
background: no-repeat url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE2IDE2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMTUuNDk5LDAuMDFIMC41MDFjLTAuMjc1LDAtMC41LDAuMjQtMC41LDAuNTM0djEuOTQ4YzAsMC4yODIsMC4yMjUsMC41MTMsMC41LDAuNTEzaDE0Ljk5OGMwLjI3NSwwLDAuNS0wLjIzLDAuNS0wLjUxMw0KCQkJVjAuNTQ0QzE1Ljk5OSwwLjI1LDE1Ljc3NCwwLjAxLDE1LjQ5OSwwLjAxeiBNMTUuNDk5LDUuMDFIMC41MDFjLTAuMjc1LDAtMC41LDAuMjQtMC41LDAuNTM1djEuOTQ3DQoJCQljMCwwLjI4MywwLjIyNSwwLjUxMywwLjUsMC41MTNoMTQuOTk4YzAuMjc1LDAsMC41LTAuMjMsMC41LTAuNTEzVjUuNTQ0QzE1Ljk5OSw1LjI1LDE1Ljc3NCw1LjAxLDE1LjQ5OSw1LjAxeiBNMTUuNDk5LDEwLjAxDQoJCQlIMC41MDFjLTAuMjc1LDAtMC41LDAuMjQtMC41LDAuNTM1djEuOTQ3YzAsMC4yODEsMC4yMjUsMC41MTIsMC41LDAuNTEyaDE0Ljk5OGMwLjI3NSwwLDAuNS0wLjIzLDAuNS0wLjUxMnYtMS45NDcNCgkJCUMxNS45OTksMTAuMjUsMTUuNzc0LDEwLjAxLDE1LjQ5OSwxMC4wMXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==); color: #aaa;
background-position: 8px 10px;
height: 32px; height: 32px;
opacity: .2; font-size: 18px !important;
transition: all .1s; opacity: .5;
top: 1px;
transition: opacity .2s;
width: 32px; width: 32px;
} }
#chat .header button:hover { #chat .header button:hover {
opacity: .5; opacity: 1;
} }
#chat .header .lt { #chat .header .lt {
left: 4px; left: 4px;
position: absolute; position: absolute;
top: 4px;
} }
#chat .header .rt { #chat .header .rt {
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 4px;
} }
#chat .header .type { #chat .header .type {
text-transform: capitalize; text-transform: capitalize;
@ -543,3 +561,10 @@ button {
display: none; display: none;
} }
} }
@media (max-device-width: 767px) {
#chat .header .rt,
#chat .header .lt {
top: 3px;
}
}

18
client/index.html
View File

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/normalize.css"> <link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<%= typeof theme !== "undefined" ? theme : "" %>"> <link rel="stylesheet" href="<%= typeof theme !== "undefined" ? theme : "" %>">
<link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png" /> <link rel="apple-touch-icon" sizes="144x144" href="/img/apple-icon-144x144.png" />
@ -28,8 +29,12 @@
<a id="logout" href="" style="display: none;">Sign out</a> <a id="logout" href="" style="display: none;">Sign out</a>
<% } %> <% } %>
</section> </section>
<div id="networks"> <div id="networks"></div>
</div> <footer class="footer">
<small>
Shout <%= version %>
</small>
</footer>
</aside> </aside>
<div id="main"> <div id="main">
<div id="windows"> <div id="windows">
@ -57,7 +62,6 @@
<script type="text/html" class="networks"> <script type="text/html" class="networks">
{{#each networks}} {{#each networks}}
<section id="network-{{id}}" class="network"> <section id="network-{{id}}" class="network">
<h2>{{name}}</h2>
{{partial "channels"}} {{partial "channels"}}
</section> </section>
{{/each}} {{/each}}
@ -93,8 +97,12 @@
</div> </div>
</div> </div>
<header class="header"> <header class="header">
<button class="lt"></button> <button class="lt">
<button class="rt"></button> <i class="fa fa-navicon"></i>
</button>
<button class="rt">
<i class="fa fa-navicon"></i>
</button>
{{partial "meta"}} {{partial "meta"}}
</header> </header>
<form class="form" data-target="{{id}}"> <form class="form" data-target="{{id}}">

2
lib/models/network.js
View File

@ -17,7 +17,7 @@ function Network(attr) {
// Add lobby // Add lobby
this.channels.unshift( this.channels.unshift(
new Chan({name: this.host, type: "lobby"}) new Chan({name: this.name, type: "lobby"})
); );
}; };