Simplify chat page headers
This commit is contained in:
Lance Stout
parent
6d41183a49
commit
7ed8321121
|
|
@ -194,7 +194,7 @@ exports.misc.growlMessage = function anonymous(locals) {
|
|||
exports.pages.chat = function anonymous(locals) {
|
||||
var buf = [];
|
||||
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("");
|
||||
};
|
||||
|
|
@ -203,7 +203,7 @@ exports.pages.chat = function anonymous(locals) {
|
|||
exports.pages.groupchat = function anonymous(locals) {
|
||||
var buf = [];
|
||||
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("");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
section.page.chat
|
||||
section.conversation
|
||||
header
|
||||
h1.name
|
||||
.status
|
||||
.idleTime
|
||||
.tzo
|
||||
h1
|
||||
span.name
|
||||
span.status
|
||||
button.primary.small.call call
|
||||
.activeCall
|
||||
.tzo
|
||||
//.activeCall
|
||||
video.remote(autoplay)
|
||||
video.local(autoplay, muted)
|
||||
aside.button-wrap
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
section.page.chat
|
||||
section.conversation
|
||||
header.online
|
||||
h1.name
|
||||
.status
|
||||
h1
|
||||
span.name
|
||||
span.status
|
||||
.controls
|
||||
button.primary.small.joinRoom Join
|
||||
button.secondary.small.leaveRoom Leave
|
||||
|
|
|
|||
|
|
@ -894,8 +894,8 @@ button.secondary:hover:not(:disabled) {
|
|||
.conversation header:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 5px;
|
||||
top: 18px;
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
margin-top: -3px;
|
||||
|
|
@ -962,29 +962,35 @@ button.secondary:hover:not(:disabled) {
|
|||
left: 11px;
|
||||
vertical-align: top;
|
||||
}
|
||||
.conversation header .name,
|
||||
.conversation header .call {
|
||||
float: left;
|
||||
.conversation header h1 {
|
||||
font-size: 12px;
|
||||
margin: 5px;
|
||||
margin-left: 10px;
|
||||
padding: 0px;
|
||||
white-space: nowrap;
|
||||
max-width: 80%;
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
}
|
||||
.conversation header .name {
|
||||
margin: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
padding: 0px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
max-width: 50%;
|
||||
border-width: 0px;
|
||||
padding: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
.conversation header .status {
|
||||
margin: 10px;
|
||||
margin-left: 0px;
|
||||
padding: 0px;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
max-width: 75%;
|
||||
float: left;
|
||||
border-width: 0px;
|
||||
padding: 0px;
|
||||
max-width: 80%;
|
||||
padding-left: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: all 0.25s;
|
||||
display: inline-block;
|
||||
}
|
||||
.conversation header .status:not(:empty):before {
|
||||
content: '- ';
|
||||
|
|
@ -1014,8 +1020,9 @@ button.secondary:hover:not(:disabled) {
|
|||
font-weight: bold;
|
||||
}
|
||||
.conversation header .call {
|
||||
margin-top: 5px;
|
||||
margin-top: -2px;
|
||||
text-transform: capitalize;
|
||||
display: inline-block;
|
||||
}
|
||||
.conversation header .activeCall {
|
||||
height: 0px;
|
||||
|
|
|
|||
|
|
@ -27,8 +27,8 @@
|
|||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 50%
|
||||
left: 5px
|
||||
top: 18px
|
||||
height: 6px
|
||||
width: 6px
|
||||
margin-top: -3px
|
||||
|
|
@ -85,28 +85,35 @@
|
|||
left: 11px
|
||||
vertical-align: top
|
||||
|
||||
.name, .call
|
||||
float: left
|
||||
h1
|
||||
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
|
||||
margin: 10px
|
||||
margin-left: 10px
|
||||
margin-right: 5px
|
||||
padding: 0px
|
||||
font-size: 12px
|
||||
font-weight: bold
|
||||
max-width: 50%
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
display: inline-block
|
||||
|
||||
.status
|
||||
margin: 10px
|
||||
margin-left: 0px
|
||||
padding: 0px
|
||||
font-weight: normal
|
||||
font-size: 12px
|
||||
max-width: 75%
|
||||
float: left
|
||||
border-width: 0px
|
||||
padding: 0px
|
||||
max-width: 80%
|
||||
padding-left: 5px
|
||||
white-space: nowrap
|
||||
overflow: hidden
|
||||
text-overflow: ellipsis
|
||||
white-space: nowrap
|
||||
transition: all .25s
|
||||
display: inline-block
|
||||
|
||||
&:not(:empty):before
|
||||
content: '- '
|
||||
|
|
@ -131,8 +138,9 @@
|
|||
font-weight: bold
|
||||
|
||||
.call
|
||||
margin-top: 5px
|
||||
margin-top: -2px
|
||||
text-transform: capitalize
|
||||
display: inline-block
|
||||
|
||||
.activeCall
|
||||
transition(height 250ms)
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
CACHE MANIFEST
|
||||
# 0.0.1 1387575045653
|
||||
# 0.0.1 1387577442446
|
||||
|
||||
CACHE:
|
||||
/app.js
|
||||
|
|
|
|||
Loading…
Reference in New Issue