[ux] full buttons refactor
This commit is contained in:
parent
db2372f128
commit
f5c0dc56c7
|
@ -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" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="reconnect">Reconnect</button></aside></div><header id="calls"></header><div id="wrapper"><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><main id="pages"></main></div></body>');
|
buf.push('<body><div id="connectionOverlay"><aside id="connectionStatus" class="box"><p> \nYou\'re currently <strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></aside></div><header id="calls"></header><div id="wrapper"><aside id="menu"><nav class="main"><li><a href="/logout" class="button secondary">Logout</a></li><li><a href="/" class="button secondary"> <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><main id="pages"></main></div></body>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
@ -78,7 +78,7 @@ exports.includes.contactListItemResource = function anonymous(locals) {
|
||||||
exports.includes.contactRequest = function anonymous(locals) {
|
exports.includes.contactRequest = function anonymous(locals) {
|
||||||
var buf = [];
|
var buf = [];
|
||||||
with (locals || {}) {
|
with (locals || {}) {
|
||||||
buf.push('<li><span class="jid"></span><button class="approve">Approve</button><button class="deny">Deny</button></li>');
|
buf.push('<li><span class="jid"></span><button class="primary approve">Approve</button><button class="secondary deny">Deny</button></li>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
@ -178,7 +178,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><img class="avatar"/><h1 class="name"></h1><div class="tzo"></div><button class="call">call</button><div class="activeCall"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="buttons"><button class="end">End</button><button class="mute">Mute</button><button class="unmute">Unmute</button></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><img class="avatar"/><h1 class="name"></h1><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>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
@ -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="joinRoom">Join</button><button class="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><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>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
@ -196,7 +196,7 @@ exports.pages.groupchat = function anonymous(locals) {
|
||||||
exports.pages.main = function anonymous(locals) {
|
exports.pages.main = function anonymous(locals) {
|
||||||
var buf = [];
|
var buf = [];
|
||||||
with (locals || {}) {
|
with (locals || {}) {
|
||||||
buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="installFirefox">Install app</button></div></section>');
|
buf.push('<section class="page main"><div><h3>Current status</h3><div contenteditable="true" class="status"></div></div><div id="avatarChanger"><h3>Change Avatar</h3><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h3>Add / Approve Contacts</h3><input type="text" id="addcontact"/><button class="addContact">Add</button><ul id="contactrequests"></ul></div><div><h3>Desktop Integration</h3><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button></div></section>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
@ -205,7 +205,7 @@ exports.pages.main = function anonymous(locals) {
|
||||||
exports.pages.signin = function anonymous(locals) {
|
exports.pages.signin = function anonymous(locals) {
|
||||||
var buf = [];
|
var buf = [];
|
||||||
with (locals || {}) {
|
with (locals || {}) {
|
||||||
buf.push('<section class="page signin"><div id="loginForm"><form><label>JID:<input type="text" id="jid" placeholder="you@aweso.me"/></label><label>Password:<input type="password" id="password"/></label><label>WebSocket URL:<input type="text" id="wsURL" placeholder="wss://aweso.me:5281/xmpp-websocket"/></label><input type="submit" value="Connect"/></form></div></section>');
|
buf.push('<section class="page signin"><div id="loginForm"><form><label>JID:<input type="text" id="jid" placeholder="you@aweso.me"/></label><label>Password:<input type="password" id="password"/></label><label>WebSocket URL:<input type="text" id="wsURL" placeholder="wss://aweso.me:5281/xmpp-websocket"/></label><input type="submit" value="Connect" class="button primary"/></form></div></section>');
|
||||||
}
|
}
|
||||||
return buf.join("");
|
return buf.join("");
|
||||||
};
|
};
|
||||||
|
|
|
@ -4,15 +4,15 @@ body
|
||||||
p
|
p
|
||||||
| You're currently
|
| You're currently
|
||||||
strong disconnected
|
strong disconnected
|
||||||
button.reconnect Reconnect
|
button.primary.reconnect Reconnect
|
||||||
header#calls
|
header#calls
|
||||||
#wrapper
|
#wrapper
|
||||||
aside#menu
|
aside#menu
|
||||||
nav.main
|
nav.main
|
||||||
li
|
li
|
||||||
a(href="/logout", class="button") Logout
|
a(href="/logout", class="button secondary") Logout
|
||||||
li
|
li
|
||||||
a(href="/", class="button")
|
a(href="/", class="button secondary")
|
||||||
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")
|
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)')
|
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(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')
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
li
|
li
|
||||||
span.jid
|
span.jid
|
||||||
button.approve Approve
|
button.primary.approve Approve
|
||||||
button.deny Deny
|
button.secondary.deny Deny
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
</header>
|
</header>
|
||||||
<section class="box connect">
|
<section class="box connect">
|
||||||
<h2>Connecting...</h2>
|
<h2>Connecting...</h2>
|
||||||
<a class="button" href="/logout">Cancel</a>
|
<a class="button secondary" href="/logout">Cancel</a>
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -4,14 +4,15 @@ section.page.chat
|
||||||
img.avatar
|
img.avatar
|
||||||
h1.name
|
h1.name
|
||||||
.tzo
|
.tzo
|
||||||
button.call call
|
button.primary.small.call call
|
||||||
.activeCall
|
.activeCall
|
||||||
video.remote(autoplay)
|
video.remote(autoplay)
|
||||||
video.local(autoplay, muted)
|
video.local(autoplay, muted)
|
||||||
aside.buttons
|
aside.button-wrap
|
||||||
button.end End
|
button.end.primary End
|
||||||
button.mute Mute
|
.button-group.outlined
|
||||||
button.unmute Unmute
|
button.mute Mute
|
||||||
|
button.unmute Unmute
|
||||||
ul.messages.scroll-container
|
ul.messages.scroll-container
|
||||||
.chatBox
|
.chatBox
|
||||||
form
|
form
|
||||||
|
|
|
@ -3,8 +3,8 @@ section.page.chat
|
||||||
header
|
header
|
||||||
img.avatar
|
img.avatar
|
||||||
h1.name
|
h1.name
|
||||||
button.joinRoom Join
|
button.primary.joinRoom Join
|
||||||
button.leaveRoom Leave
|
button.secondary.leaveRoom Leave
|
||||||
ul.messages
|
ul.messages
|
||||||
.chatBox
|
.chatBox
|
||||||
form
|
form
|
||||||
|
|
|
@ -21,4 +21,4 @@ section.page.main
|
||||||
div
|
div
|
||||||
h3 Desktop Integration
|
h3 Desktop Integration
|
||||||
button.enableAlerts Enable alerts
|
button.enableAlerts Enable alerts
|
||||||
button.installFirefox Install app
|
button.primary.installFirefox Install app
|
||||||
|
|
|
@ -7,4 +7,4 @@ section.page.signin
|
||||||
input(type="password", id="password")
|
input(type="password", id="password")
|
||||||
label WebSocket URL:
|
label WebSocket URL:
|
||||||
input(type="text", id="wsURL", placeholder="wss://aweso.me:5281/xmpp-websocket")
|
input(type="text", id="wsURL", placeholder="wss://aweso.me:5281/xmpp-websocket")
|
||||||
input(type="submit", value="Connect")
|
input(type="submit", value="Connect", class="button primary")
|
||||||
|
|
|
@ -0,0 +1,114 @@
|
||||||
|
// Buttons
|
||||||
|
|
||||||
|
button
|
||||||
|
border: none
|
||||||
|
|
||||||
|
.button
|
||||||
|
line-height: 35px
|
||||||
|
|
||||||
|
.button, button
|
||||||
|
display: inline-block
|
||||||
|
border-radius: 3px
|
||||||
|
padding: 0 15px
|
||||||
|
height: 35px
|
||||||
|
background: $gray-lighter
|
||||||
|
font-size: $font-size-small
|
||||||
|
font-weight: $font-weight-bold
|
||||||
|
text-align: center
|
||||||
|
text-decoration: none
|
||||||
|
color: $gray-light
|
||||||
|
text-overflow: ellipsis
|
||||||
|
vertical-align: middle
|
||||||
|
user-select()
|
||||||
|
|
||||||
|
&:hover:not(:disabled)
|
||||||
|
color: $gray
|
||||||
|
background: darken($gray-lighter, 10%)
|
||||||
|
transition: all .3s ease-in
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
cursor: not-allowed
|
||||||
|
color: lighten($gray-light, 40%)
|
||||||
|
|
||||||
|
&.small
|
||||||
|
height: 25px
|
||||||
|
padding: 0 8px
|
||||||
|
font-size: $font-size-small
|
||||||
|
line-height: 25px
|
||||||
|
|
||||||
|
&.large
|
||||||
|
height: 50px
|
||||||
|
line-height: 50px
|
||||||
|
padding: 0 30px
|
||||||
|
font-size: $font-size-large
|
||||||
|
|
||||||
|
&.primary, &.secondary, &.primary:hover, &.secondary:hover
|
||||||
|
color: white
|
||||||
|
|
||||||
|
&.primary
|
||||||
|
background: $pink
|
||||||
|
|
||||||
|
&:hover:not(:disabled)
|
||||||
|
background: darken($pink, 10%)
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
background: $pink-light
|
||||||
|
|
||||||
|
&.secondary
|
||||||
|
background: $blue
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
background: $blue-light
|
||||||
|
|
||||||
|
&:hover:not(:disabled)
|
||||||
|
background: darken($blue, 10%)
|
||||||
|
|
||||||
|
.button-group
|
||||||
|
|
||||||
|
.button, button
|
||||||
|
border-radius: 0
|
||||||
|
margin-left: -1px
|
||||||
|
|
||||||
|
&:first-child:only-child
|
||||||
|
border-radius: 3px
|
||||||
|
|
||||||
|
&:first-child
|
||||||
|
border-radius: 3px 0 0 3px
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
border-radius: 0 3px 3px 0
|
||||||
|
|
||||||
|
&.outlined
|
||||||
|
display: inline-block
|
||||||
|
border-radius: 3px
|
||||||
|
|
||||||
|
button, .button
|
||||||
|
border: 1px solid lighten($gray-light, 70%)
|
||||||
|
|
||||||
|
&.primary
|
||||||
|
|
||||||
|
button, .button
|
||||||
|
background: $pink-lighter
|
||||||
|
border: 1px solid $pink-light
|
||||||
|
color: $pink
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background: lighten($pink-light, 40%)
|
||||||
|
|
||||||
|
&.secondary
|
||||||
|
|
||||||
|
button, .button
|
||||||
|
background: $blue-lighter
|
||||||
|
border: 1px solid $blue-light
|
||||||
|
color: $blue
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background: lighten($blue-light, 40%)
|
||||||
|
|
||||||
|
// Specific buttons styles
|
||||||
|
|
||||||
|
.installFirefox, .addContact
|
||||||
|
margin-left: 5px
|
||||||
|
|
||||||
|
.addContact
|
||||||
|
margin-top: -2px
|
|
@ -59,10 +59,7 @@
|
||||||
background: $gray-lighter
|
background: $gray-lighter
|
||||||
|
|
||||||
.call
|
.call
|
||||||
margin-top: 10px
|
margin-top: 9px
|
||||||
height: 25px
|
|
||||||
line-height: 25px
|
|
||||||
min-width: 60px
|
|
||||||
text-transform: capitalize
|
text-transform: capitalize
|
||||||
|
|
||||||
.activeCall
|
.activeCall
|
||||||
|
@ -86,13 +83,13 @@
|
||||||
border: 2px solid $gray-lighter
|
border: 2px solid $gray-lighter
|
||||||
transform(scaleX(-1))
|
transform(scaleX(-1))
|
||||||
|
|
||||||
.buttons
|
.button-wrap
|
||||||
position: absolute
|
position: absolute
|
||||||
left: 10px
|
left: 10px
|
||||||
bottom: 10px
|
bottom: 10px
|
||||||
|
|
||||||
button
|
.button-group
|
||||||
margin-right: 10px
|
margin-left: 5px
|
||||||
|
|
||||||
// while on video call the parent has
|
// while on video call the parent has
|
||||||
// this class so we animate the height
|
// this class so we animate the height
|
||||||
|
|
|
@ -37,32 +37,4 @@ label
|
||||||
margin-bottom: 5px
|
margin-bottom: 5px
|
||||||
font-size: 13px
|
font-size: 13px
|
||||||
font-weight: $font-weight-bold
|
font-weight: $font-weight-bold
|
||||||
color: $gray
|
color: $gray
|
||||||
|
|
||||||
a.button
|
|
||||||
line-height: 35px
|
|
||||||
|
|
||||||
button, a.button
|
|
||||||
display: inline-block
|
|
||||||
gotham()
|
|
||||||
roundall(3px)
|
|
||||||
border: none
|
|
||||||
height: 35px
|
|
||||||
min-width: 80px
|
|
||||||
padding: 0 1em
|
|
||||||
color: white
|
|
||||||
background: $blue
|
|
||||||
font-size: $font-size-small
|
|
||||||
font-weight: $font-weight-bold
|
|
||||||
text-decoration: none
|
|
||||||
text-align: center
|
|
||||||
cursor: pointer
|
|
||||||
|
|
||||||
&:focus
|
|
||||||
outline: none
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: darken($blue, 30%)
|
|
||||||
|
|
||||||
.installFirefox, .addContact
|
|
||||||
margin-left: 5px
|
|
|
@ -35,12 +35,6 @@
|
||||||
position: relative
|
position: relative
|
||||||
width: 150px
|
width: 150px
|
||||||
|
|
||||||
.button
|
|
||||||
background: $blue-saturated
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background: $blue-saturated-light
|
|
||||||
|
|
||||||
h1
|
h1
|
||||||
font-size: $font-size-small
|
font-size: $font-size-small
|
||||||
margin: 0
|
margin: 0
|
||||||
|
|
|
@ -271,12 +271,6 @@ h3 {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
}
|
}
|
||||||
#menu .main li .button {
|
|
||||||
background: #192a47;
|
|
||||||
}
|
|
||||||
#menu .main li .button:hover {
|
|
||||||
background: #34465a;
|
|
||||||
}
|
|
||||||
#menu h1 {
|
#menu h1 {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -628,10 +622,7 @@ h3 {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
}
|
}
|
||||||
.conversation header .call {
|
.conversation header .call {
|
||||||
margin-top: 10px;
|
margin-top: 9px;
|
||||||
height: 25px;
|
|
||||||
line-height: 25px;
|
|
||||||
min-width: 60px;
|
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
}
|
}
|
||||||
.conversation header .activeCall {
|
.conversation header .activeCall {
|
||||||
|
@ -661,13 +652,13 @@ h3 {
|
||||||
-ms-transform: scaleX(-1);
|
-ms-transform: scaleX(-1);
|
||||||
transform: scaleX(-1);
|
transform: scaleX(-1);
|
||||||
}
|
}
|
||||||
.conversation header .activeCall .buttons {
|
.conversation header .activeCall .button-wrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
.conversation header .activeCall .buttons button {
|
.conversation header .activeCall .button-wrap .button-group {
|
||||||
margin-right: 10px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
.conversation.onCall .activeCall {
|
.conversation.onCall .activeCall {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
|
@ -961,42 +952,141 @@ label {
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
color: #565656;
|
color: #565656;
|
||||||
}
|
}
|
||||||
a.button {
|
button {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.button {
|
||||||
line-height: 35px;
|
line-height: 35px;
|
||||||
}
|
}
|
||||||
button,
|
.button,
|
||||||
a.button {
|
button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
-khtml-border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
-border-radius: 3px;
|
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: none;
|
padding: 0 15px;
|
||||||
height: 35px;
|
height: 35px;
|
||||||
min-width: 80px;
|
background: #eee;
|
||||||
padding: 0 1em;
|
|
||||||
color: #fff;
|
|
||||||
background: #12acef;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-decoration: none;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
text-decoration: none;
|
||||||
|
color: #878787;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
button:focus,
|
.button:hover:not(:disabled),
|
||||||
a.button:focus {
|
button:hover:not(:disabled) {
|
||||||
outline: none;
|
color: #565656;
|
||||||
|
background: #d6d6d6;
|
||||||
|
-webkit-transition: all 0.3s ease-in;
|
||||||
|
-o-transition: all 0.3s ease-in;
|
||||||
|
transition: all 0.3s ease-in;
|
||||||
|
-moz-transition: all 0.3s ease-in;
|
||||||
}
|
}
|
||||||
button:hover,
|
.button:disabled,
|
||||||
a.button:hover {
|
button:disabled {
|
||||||
background: #0b79a9;
|
cursor: not-allowed;
|
||||||
|
color: #b7b7b7;
|
||||||
|
}
|
||||||
|
.button.small,
|
||||||
|
button.small {
|
||||||
|
height: 25px;
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 25px;
|
||||||
|
}
|
||||||
|
.button.large,
|
||||||
|
button.large {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
padding: 0 30px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
.button.primary,
|
||||||
|
button.primary,
|
||||||
|
.button.secondary,
|
||||||
|
button.secondary,
|
||||||
|
.button.primary:hover,
|
||||||
|
button.primary:hover,
|
||||||
|
.button.secondary:hover,
|
||||||
|
button.secondary:hover {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.button.primary,
|
||||||
|
button.primary {
|
||||||
|
background: #ec008c;
|
||||||
|
}
|
||||||
|
.button.primary:hover:not(:disabled),
|
||||||
|
button.primary:hover:not(:disabled) {
|
||||||
|
background: #d4007e;
|
||||||
|
}
|
||||||
|
.button.primary:disabled,
|
||||||
|
button.primary:disabled {
|
||||||
|
background: #f8bee0;
|
||||||
|
}
|
||||||
|
.button.secondary,
|
||||||
|
button.secondary {
|
||||||
|
background: #12acef;
|
||||||
|
}
|
||||||
|
.button.secondary:disabled,
|
||||||
|
button.secondary:disabled {
|
||||||
|
background: #88d5f7;
|
||||||
|
}
|
||||||
|
.button.secondary:hover:not(:disabled),
|
||||||
|
button.secondary:hover:not(:disabled) {
|
||||||
|
background: #0f9bd9;
|
||||||
|
}
|
||||||
|
.button-group .button,
|
||||||
|
.button-group button {
|
||||||
|
border-radius: 0;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
.button-group .button:first-child:only-child,
|
||||||
|
.button-group button:first-child:only-child {
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.button-group .button:first-child,
|
||||||
|
.button-group button:first-child {
|
||||||
|
border-radius: 3px 0 0 3px;
|
||||||
|
}
|
||||||
|
.button-group .button:last-child,
|
||||||
|
.button-group button:last-child {
|
||||||
|
border-radius: 0 3px 3px 0;
|
||||||
|
}
|
||||||
|
.button-group.outlined {
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.button-group.outlined button,
|
||||||
|
.button-group.outlined .button {
|
||||||
|
border: 1px solid #dbdbdb;
|
||||||
|
}
|
||||||
|
.button-group.outlined.primary button,
|
||||||
|
.button-group.outlined.primary .button {
|
||||||
|
background: #fce8f1;
|
||||||
|
border: 1px solid #f8bee0;
|
||||||
|
color: #ec008c;
|
||||||
|
}
|
||||||
|
.button-group.outlined.primary button:hover,
|
||||||
|
.button-group.outlined.primary .button:hover {
|
||||||
|
background: #fbd8ec;
|
||||||
|
}
|
||||||
|
.button-group.outlined.secondary button,
|
||||||
|
.button-group.outlined.secondary .button {
|
||||||
|
background: #e7f7fd;
|
||||||
|
border: 1px solid #88d5f7;
|
||||||
|
color: #12acef;
|
||||||
|
}
|
||||||
|
.button-group.outlined.secondary button:hover,
|
||||||
|
.button-group.outlined.secondary .button:hover {
|
||||||
|
background: #b8e6fa;
|
||||||
}
|
}
|
||||||
.installFirefox,
|
.installFirefox,
|
||||||
.addContact {
|
.addContact {
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
}
|
}
|
||||||
|
.addContact {
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
#wrapper {
|
#wrapper {
|
||||||
position: relative !important;
|
position: relative !important;
|
||||||
-webkit-transition: all 1s;
|
-webkit-transition: all 1s;
|
||||||
|
|
|
@ -8,4 +8,5 @@
|
||||||
@import 'app/settings'
|
@import 'app/settings'
|
||||||
@import 'app/aux'
|
@import 'app/aux'
|
||||||
@import 'app/forms'
|
@import 'app/forms'
|
||||||
|
@import 'app/buttons'
|
||||||
@import 'app/callbar'
|
@import 'app/callbar'
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
CACHE MANIFEST
|
CACHE MANIFEST
|
||||||
# 0.0.1 1382550861581
|
# 0.0.1 1382650276075
|
||||||
|
|
||||||
CACHE:
|
CACHE:
|
||||||
/app.js
|
/app.js
|
||||||
|
|
|
@ -16,14 +16,14 @@ block content
|
||||||
.fieldContainer
|
.fieldContainer
|
||||||
label(for='fieldEmail') Email
|
label(for='fieldEmail') Email
|
||||||
input#fieldEmail(type='email', name="cm-trulhji-trulhji", placeholder='you@aweso.me', required)
|
input#fieldEmail(type='email', name="cm-trulhji-trulhji", placeholder='you@aweso.me', required)
|
||||||
button(type='submit') Subscribe to updates!
|
button(type='submit', class="secondary") Subscribe to updates!
|
||||||
|
|
||||||
|
|
||||||
section#loginbox.content.box
|
section#loginbox.content.box
|
||||||
.head
|
.head
|
||||||
h2
|
h2
|
||||||
| Log in
|
| Log in
|
||||||
a.button(href="/oauth/login") Have an &yet account?
|
a.button(href="/oauth/login", class="secondary") Have an &yet account?
|
||||||
|
|
||||||
.content
|
.content
|
||||||
|
|
||||||
|
@ -38,7 +38,7 @@ block content
|
||||||
label(for='wsURL') WebSocket URL
|
label(for='wsURL') WebSocket URL
|
||||||
input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3')
|
input(type='text', id='wsURL', name='wsURL', placeholder='wss://aweso.me:5281/xmpp-websocket', tabindex='3')
|
||||||
|
|
||||||
button(type='submit', tabindex='3') Go!
|
button(type='submit', tabindex='3', class="primary") Go!
|
||||||
|
|
||||||
block scripts
|
block scripts
|
||||||
script(src="/js/login.js")
|
script(src="/js/login.js")
|
||||||
|
|
Loading…
Reference in New Issue