moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2025-01-13 22:58:01 -05:00
Code Issues Releases Wiki Activity

Simplify chat page headers

Browse Source
This commit is contained in:
Lance Stout 2013-12-20 14:15:29 -08:00
parent 6d41183a49
commit 7ed8321121
6 changed files with 59 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
clientapp/templates.js
View File

@ -194,7 +194,7 @@ exports.misc.growlMessage = function anonymous(locals) {
exports.pages.chat = function anonymous(locals) { exports.pages.chat = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<section class="page chat"><section class="conversation"><header><h1 class="name"></h1><div class="status"></div><div class="idleTime"></div><div class="tzo"></div><button class="primary small call">call</button><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="end primary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>'); buf.push('<section class="page chat"><section class="conversation"><header><h1><span class="name"></span><span class="status"></span></h1><button class="primary small call">call</button><div class="tzo"></div><!--.activeCall<video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="end primary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside>--></header><ul class="messages scroll-container"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
} }
return buf.join(""); return buf.join("");
}; };
@ -203,7 +203,7 @@ exports.pages.chat = function anonymous(locals) {
exports.pages.groupchat = function anonymous(locals) { exports.pages.groupchat = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<section class="page chat"><section class="conversation"><header class="online"><h1 class="name"></h1><div class="status"></div><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></div></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>'); buf.push('<section class="page chat"><section class="conversation"><header class="online"><h1><span class="name"></span><span class="status"></span></h1><div class="controls"><button class="primary small joinRoom">Join</button><button class="secondary small leaveRoom">Leave</button></div></header><ul class="messages"></ul><div class="chatBox"><form><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
} }
return buf.join(""); return buf.join("");
}; };

10
clientapp/templates/pages/chat.jade
View File

@ -1,12 +1,12 @@
section.page.chat section.page.chat
section.conversation section.conversation
header header
h1.name h1
.status span.name
.idleTime span.status
.tzo
button.primary.small.call call button.primary.small.call call
.activeCall .tzo
//.activeCall
video.remote(autoplay) video.remote(autoplay)
video.local(autoplay, muted) video.local(autoplay, muted)
aside.button-wrap aside.button-wrap

5
clientapp/templates/pages/groupchat.jade
View File

@ -1,8 +1,9 @@
section.page.chat section.page.chat
section.conversation section.conversation
header.online header.online
h1.name h1
.status span.name
span.status
.controls .controls
button.primary.small.joinRoom Join button.primary.small.joinRoom Join
button.secondary.small.leaveRoom Leave button.secondary.small.leaveRoom Leave

41
public/css/otalk.css
View File

@ -894,8 +894,8 @@ button.secondary:hover:not(:disabled) {
.conversation header:before { .conversation header:before {
content: ''; content: '';
position: absolute; position: absolute;
top: 50%;
left: 5px; left: 5px;
top: 18px;
height: 6px; height: 6px;
width: 6px; width: 6px;
margin-top: -3px; margin-top: -3px;
@ -962,29 +962,35 @@ button.secondary:hover:not(:disabled) {
left: 11px; left: 11px;
vertical-align: top; vertical-align: top;
} }
.conversation header .name, .conversation header h1 {
.conversation header .call { font-size: 12px;
float: left; margin: 5px;
margin-left: 10px;
padding: 0px;
white-space: nowrap;
max-width: 80%;
display: inline-block;
height: 25px;
line-height: 25px;
} }
.conversation header .name { .conversation header .name {
margin: 10px;
margin-left: 10px;
margin-right: 5px;
padding: 0px;
font-size: 12px; font-size: 12px;
font-weight: bold; border-width: 0px;
max-width: 50%; padding: 0px;
display: inline-block;
} }
.conversation header .status { .conversation header .status {
margin: 10px; font-weight: normal;
margin-left: 0px;
padding: 0px;
font-size: 12px; font-size: 12px;
max-width: 75%; border-width: 0px;
float: left; padding: 0px;
max-width: 80%;
padding-left: 5px;
white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; transition: all 0.25s;
display: inline-block;
} }
.conversation header .status:not(:empty):before { .conversation header .status:not(:empty):before {
content: '- '; content: '- ';
@ -1014,8 +1020,9 @@ button.secondary:hover:not(:disabled) {
font-weight: bold; font-weight: bold;
} }
.conversation header .call { .conversation header .call {
margin-top: 5px; margin-top: -2px;
text-transform: capitalize; text-transform: capitalize;
display: inline-block;
} }
.conversation header .activeCall { .conversation header .activeCall {
height: 0px; height: 0px;

40
public/css/pages/chat.styl
View File

@ -27,8 +27,8 @@
&:before &:before
content: '' content: ''
position: absolute position: absolute
top: 50%
left: 5px left: 5px
top: 18px
height: 6px height: 6px
width: 6px width: 6px
margin-top: -3px margin-top: -3px
@ -85,28 +85,35 @@
left: 11px left: 11px
vertical-align: top vertical-align: top
.name, .call h1
float: left font-size: 12px
margin: 5px
margin-left: 10px
padding: 0px
white-space: nowrap
max-width: 80%
display: inline-block
height: 25px
line-height: 25px
.name .name
margin: 10px
margin-left: 10px
margin-right: 5px
padding: 0px
font-size: 12px font-size: 12px
font-weight: bold border-width: 0px
max-width: 50% padding: 0px
display: inline-block
.status .status
margin: 10px font-weight: normal
margin-left: 0px
padding: 0px
font-size: 12px font-size: 12px
max-width: 75% border-width: 0px
float: left padding: 0px
max-width: 80%
padding-left: 5px
white-space: nowrap
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
white-space: nowrap transition: all .25s
display: inline-block
&:not(:empty):before &:not(:empty):before
content: '- ' content: '- '
@ -131,8 +138,9 @@
font-weight: bold font-weight: bold
.call .call
margin-top: 5px margin-top: -2px
text-transform: capitalize text-transform: capitalize
display: inline-block
.activeCall .activeCall
transition(height 250ms) transition(height 250ms)

2
public/x-manifest.cache
View File

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 0.0.1 1387575045653 # 0.0.1 1387577442446
CACHE: CACHE:
/app.js /app.js