1
0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-12 04:25:05 -05:00

[ux] cleanup: buttons and typography

This commit is contained in:
karolinaszczur 2013-10-25 18:09:18 +02:00
parent 463fb2baf3
commit 639ab50536
7 changed files with 21 additions and 11 deletions

View File

@ -187,7 +187,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><img class="avatar"/><h1 class="name"></h1><button class="primary joinRoom">Join</button><button class="secondary leaveRoom">Leave</button></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><img class="avatar"/><h1 class="name"></h1><div class="controls"><button class="primary joinRoom">Join</button><button class="secondary 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("");
}; };

View File

@ -3,8 +3,9 @@ section.page.chat
header header
img.avatar img.avatar
h1.name h1.name
button.primary.joinRoom Join .controls
button.secondary.leaveRoom Leave button.primary.joinRoom Join
button.secondary.leaveRoom Leave
ul.messages ul.messages
.chatBox .chatBox
form form

View File

@ -114,4 +114,7 @@ button
margin-left: 5px margin-left: 5px
.addContact .addContact
margin-top: -2px margin-top: -2px
.joinRoom, .leaveRoom
margin: 3px 5px 0 0

View File

@ -518,6 +518,10 @@ button.secondary:hover:not(:disabled) {
.addContact { .addContact {
margin-top: -2px; margin-top: -2px;
} }
.joinRoom,
.leaveRoom {
margin: 3px 5px 0 0;
}
#connectionOverlay { #connectionOverlay {
position: fixed; position: fixed;
top: 0px; top: 0px;
@ -601,7 +605,6 @@ button.secondary:hover:not(:disabled) {
#roster li, #roster li,
#bookmarks li { #bookmarks li {
display: table; display: table;
list-style-type: none;
padding: 7px 35px 7px 10px; padding: 7px 35px 7px 10px;
margin: 0px; margin: 0px;
position: relative; position: relative;
@ -891,6 +894,9 @@ button.secondary:hover:not(:disabled) {
box-sizing: border-box; box-sizing: border-box;
background: #f7f7f7; background: #f7f7f7;
} }
.conversation header .controls {
float: right;
}
.conversation header .avatar { .conversation header .avatar {
margin-right: 5px; margin-right: 5px;
width: 30px; width: 30px;
@ -1064,8 +1070,7 @@ button.secondary:hover:not(:disabled) {
word-break: break-word; word-break: break-word;
} }
.messages .message .timestamp { .messages .message .timestamp {
font-size: 12px; font-size: 10px;
font-weight: 800;
color: #88d5f7; color: #88d5f7;
float: right; float: right;
display: block; display: block;

View File

@ -24,6 +24,9 @@
borderbox() borderbox()
background: lighten($gray-light, 93%) background: lighten($gray-light, 93%)
.controls
float: right
.avatar .avatar
margin-right: 5px margin-right: 5px
avatar() avatar()
@ -174,8 +177,7 @@
word-break: break-word word-break: break-word
.timestamp .timestamp
font-size: $font-size-small font-size: $font-size-smaller
font-weight: $font-weight-bold
color: lighten($blue, 50%) color: lighten($blue, 50%)
float: right float: right
display: block display: block

View File

@ -47,7 +47,6 @@
li li
display: table display: table
list-style-type: none
padding: 7px 35px 7px 10px padding: 7px 35px 7px 10px
margin: 0px margin: 0px
position: relative position: relative

View File

@ -1,5 +1,5 @@
CACHE MANIFEST CACHE MANIFEST
# 0.0.1 1382716344670 # 0.0.1 1382717200112
CACHE: CACHE:
/app.js /app.js