moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-22 17:22:22 -05:00
Code Issues Releases Wiki Activity

Merge branch 'redesign'

Browse Source 
Conflicts:
	public/css/otalk.css
This commit is contained in:
Lance Stout 2013-09-24 11:24:53 -07:00
commit 057038f000
6 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
clientapp/templates.js
View File

@ -13,7 +13,7 @@ exports.pages = {};
exports.body = function anonymous(locals) { exports.body = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus"><button class="reconnect">Reconnect</button><span class="message">disconnected</span></aside></div><aside id="menu"><nav class="main"><li><a href="/logout" class="button">Logout</a></li><li><a href="/" class="button"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></li></nav><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><section id="pages"></section></body>'); buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="reconnect">Reconnect</button></aside></div><aside id="menu"><nav class="main"><li><a href="/logout" class="button">Logout</a></li><li><a href="/" class="button"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg>Settings</a></li></nav><section id="roster"><h1>Roster</h1><nav></nav></section><section id="bookmarks"><h1>Bookmarks</h1><nav></nav></section></aside><section id="pages"></section></body>');
} }
return buf.join(""); return buf.join("");
}; };

6
clientapp/templates/body.jade
View File

@ -1,8 +1,10 @@
body body
#connectionOverlay #connectionOverlay
aside#connectionStatus aside#connectionStatus.box
p
| You're currently
strong disconnected
button.reconnect Reconnect button.reconnect Reconnect
span.message disconnected
aside#menu aside#menu
nav.main nav.main
li li

11
public/css/app/chat.styl
View File

@ -57,8 +57,6 @@
background: $grayOutline background: $grayOutline
.messages .messages
background: lighten($activeBlue, 97%)
font-weight: normal
margin: 0px margin: 0px
padding: 0px padding: 0px
padding-top: 130px padding-top: 130px
@ -68,6 +66,7 @@
bottom: 75px bottom: 75px
width: 100% width: 100%
borderbox() borderbox()
background: lighten($activeBlue, 97%)
li li
position: relative position: relative
@ -85,17 +84,18 @@
.message .message
font-size: 12px font-size: 12px
margin: 0px margin: 0px
padding: 7px 11px padding: 10px
display: inline-block display: inline-block
padding-right: 11px padding-right: 11px
min-width: 20px min-width: 20px
width: 100% width: 100%
border-bottom: 1px solid lighten($activeBlue, 90%)
borderbox() borderbox()
&:not(.mine)
color: $activeBlue
&.mine &.mine
background: white background: white
border-bottom: 1px solid lighten($grayOutline, 10%)
.timestamp .timestamp
color: darken($grayOutline, 20%) color: darken($grayOutline, 20%)
@ -116,7 +116,6 @@
word-break: break-word word-break: break-word
padding: 0px padding: 0px
margin: 0px margin: 0px
color: #111
.timestamp .timestamp
font-size: 10px font-size: 10px

28
public/css/app/connectionStatus.styl
View File

@ -15,26 +15,22 @@
height: 0px height: 0px
#connectionStatus #connectionStatus
top: -51px top: -200px
#connectionStatus #connectionStatus
height: 50px height: 75px
line-height: 50px width: 400px
top: 0px; top: 30%
position: fixed left: 50%
background-color: #333 margin-left: -200px
width: 100% position: absolute
z-index: 100 z-index: 10
text-align: center text-align: center
span.message p
display: inline-block padding: 0 0 20px 0
padding: 0px 10px margin: 0
font-weight: bold
font-size: $fontLarge
color: white
button button
padding: 5px 8px
position: relative position: relative
top: -3px top: -1px

3
public/css/app/layout.styl
View File

@ -18,3 +18,6 @@ h1, h2, h3, h4
right: 0px right: 0px
left: 181px left: 181px
borderbox() borderbox()
.page.main
padding: 20px

42
public/css/otalk.css
View File

@ -269,6 +269,9 @@ h4 {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
#pages .page.main {
padding: 20px;
}
#connectionOverlay { #connectionOverlay {
position: fixed; position: fixed;
top: 0px; top: 0px;
@ -286,29 +289,25 @@ h4 {
height: 0px; height: 0px;
} }
#connectionOverlay.connected #connectionStatus { #connectionOverlay.connected #connectionStatus {
top: -51px; top: -200px;
} }
#connectionStatus { #connectionStatus {
height: 50px; height: 75px;
line-height: 50px; width: 400px;
top: 0px; top: 30%;
position: fixed; left: 50%;
background-color: #333; margin-left: -200px;
width: 100%; position: absolute;
z-index: 100; z-index: 10;
text-align: center; text-align: center;
} }
#connectionStatus span.message { #connectionStatus p {
display: inline-block; padding: 0 0 20px 0;
padding: 0px 10px; margin: 0;
font-weight: bold;
font-size: 20px;
color: #fff;
} }
#connectionStatus button { #connectionStatus button {
padding: 5px 8px;
position: relative; position: relative;
top: -3px; top: -1px;
} }
#menu { #menu {
position: fixed; position: fixed;
@ -668,8 +667,6 @@ h4 {
background: #e4e4e4; background: #e4e4e4;
} }
.messages { .messages {
background: #f7fdff;
font-weight: normal;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
padding-top: 130px; padding-top: 130px;
@ -681,6 +678,7 @@ h4 {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: #f7fdff;
} }
.messages li { .messages li {
position: relative; position: relative;
@ -700,19 +698,20 @@ h4 {
.messages .message { .messages .message {
font-size: 12px; font-size: 12px;
margin: 0px; margin: 0px;
padding: 7px 11px; padding: 10px;
display: inline-block; display: inline-block;
padding-right: 11px; padding-right: 11px;
min-width: 20px; min-width: 20px;
width: 100%; width: 100%;
border-bottom: 1px solid #e4f8ff;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.messages .message:not(.mine) {
color: #00aeef;
}
.messages .message.mine { .messages .message.mine {
background: #fff; background: #fff;
border-bottom: 1px solid #e7e7e7;
} }
.messages .message.mine .timestamp { .messages .message.mine .timestamp {
color: #b6b6b6; color: #b6b6b6;
@ -731,7 +730,6 @@ h4 {
word-break: break-word; word-break: break-word;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
color: #111;
} }
.messages .message .timestamp { .messages .message .timestamp {
font-size: 10px; font-size: 10px;