From 5745de5e15d67d385be64ce8f8c6134475d0bd39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Hut?= Date: Mon, 23 Feb 2015 15:43:00 +0100 Subject: [PATCH] Update UI --- clientapp/templates.js | 2 +- clientapp/templates/body.jade | 22 ++-- public/css/_variables.styl | 8 +- public/css/otalk.css | 119 ++++++++++------------ public/css/otalk.styl | 2 +- public/css/pages/chat.styl | 2 +- public/css/pages/header.styl | 29 +----- public/css/pages/{footer.styl => me.styl} | 37 +++---- public/css/pages/roster.styl | 35 +++++-- 9 files changed, 119 insertions(+), 137 deletions(-) rename public/css/pages/{footer.styl => me.styl} (66%) diff --git a/clientapp/templates.js b/clientapp/templates.js index a571846..c862cb9 100644 --- a/clientapp/templates.js +++ b/clientapp/templates.js @@ -13,7 +13,7 @@ exports.pages = {}; exports.body = function anonymous(locals) { var buf = []; with (locals || {}) { - buf.push('

Update available!

You\'re currently disconnected

Settings
'); + buf.push('

Update available!

You\'re currently disconnected

'); } return buf.join(""); }; diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade index c0a3397..12d2f61 100644 --- a/clientapp/templates/body.jade +++ b/clientapp/templates/body.jade @@ -6,6 +6,11 @@ body aside#menu section#organization span#orga_name + a(href="/", class="button secondary settings") + 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(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') section#bookmarks h1 Rooms nav @@ -21,16 +26,11 @@ body | You're currently  strong disconnected button.primary.reconnect Reconnect - a(href="/", class="button secondary settings") - 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(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') - | Settings - main#pages - #footer #me + img.avatar div - img.avatar - span.name - span.status(contenteditable="true", spellcheck="false") + span.name + span.status(contenteditable="true", spellcheck="false") + main#pages + + diff --git a/public/css/_variables.styl b/public/css/_variables.styl index 2c4f9c9..f0a76ca 100644 --- a/public/css/_variables.styl +++ b/public/css/_variables.styl @@ -91,10 +91,10 @@ $sidebarRequestBorder = $sidebarHover $sidebarStatusText = $sidebarNames $sidebarStatusBorder = $sidebarInputBorder -$settingsBg = #fff -$settingsText = $sidebarBg -$settingsHoverBg = $sidebarBg -$settingsHoverText = #fff +$settingsBg = $sidebarBg +$settingsText = #fff +$settingsHoverBg = #fff +$settingsHoverText = $sidebarSelectionBg // Font families diff --git a/public/css/otalk.css b/public/css/otalk.css index a367ce0..c6ed131 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -534,9 +534,7 @@ button.secondary:hover:not(:disabled) { } #menu #organization { width: 220px; - height: 53px; - background-color: #1a233f; - border-bottom: 2px solid #121a33; + height: 42px; margin-bottom: 10px; } #menu #organization #orga_name { @@ -547,6 +545,26 @@ button.secondary:hover:not(:disabled) { vertical-align: middle; margin-left: 20px; } +#menu #organization .settings { + position: relative; + height: 30px; + left: 0px; + background-color: #3d486b; + color: #fff; + transition: none; + border: 0; +} +#menu #organization .settings svg { + position: absolute; + top: 55%; + left: 3px; + margin: 0px; + margin-top: -13px; + fill: #fff; +} +#menu #organization .settings:hover svg { + fill: #94b021; +} #menu .main { margin: 10px 0 0 0; text-align: center; @@ -630,8 +648,8 @@ button.secondary:hover:not(:disabled) { #bookmarks li { list-style-type: none; padding: 4px 10px; - margin: 0px; - border-radius: 0px 0.25rem 0.25rem 0px; + margin: 0px 0px 0px 10px; + border-radius: 0.25rem; position: relative; height: 25px; font-size: 14px; @@ -799,7 +817,7 @@ button.secondary:hover:not(:disabled) { height: 17px; text-shadow: 0px 1px 1px rgba(0,0,0,0.3); position: absolute; - left: 32px; + left: 22px; max-width: 140px; } #roster li .unread, @@ -868,10 +886,10 @@ button.secondary:hover:not(:disabled) { display: inline-block; } #roster .wrap { - padding-left: 10px; + padding-left: 0px; } #bookmarks .wrap { - padding-left: 24px; + padding-left: 14px; } @-moz-keyframes pulsate { 0% { @@ -938,7 +956,7 @@ button.secondary:hover:not(:disabled) { top: 0px; right: 0px; left: 220px; - right: 90px; + right: 200px; height: 55px; z-index: 101; } @@ -1752,7 +1770,7 @@ rgba(0,0,0,0.7) margin: 0; } #topbar.connected { - background-color: transparent; + background-color: #f7f7f7; z-index: 100; } #topbar.connected #connectionStatus { @@ -1793,69 +1811,37 @@ rgba(0,0,0,0.7) margin: 3px 0; cursor: pointer; } -#topbar .settings { +#topbar #me { + display: none; position: fixed; - padding-left: 30px; - line-height: 30px; - height: 30px; - right: 5px; - top: 12px; - background-color: #fff; - color: #3d486b; - transition: none; - border: 0; + right: 0; + padding: 8px 5px 5px 5px; + width: 175px; } -#topbar .settings svg { - position: absolute; - top: 50%; - left: 5px; - margin: 0px; - margin-top: -13px; - fill: #3d486b; -} -#topbar .settings:hover { - background-color: #3d486b; - color: #fff; -} -#topbar .settings:hover svg { - fill: #fff; -} -#footer { - bottom: 0px; - left: 0px; - background-color: #1a233f; - width: 100%; - height: 4rem; - position: fixed; - z-index: 301; -} -#footer #me { - border-top: 2px solid #121a33; - padding: 7px 0px 9px 8px; -} -#footer .avatar { - float: left; - width: 48px; - height: 48px; +#topbar .avatar { + float: right; + width: 35px; + height: 35px; background: rgba(0,0,0,0); background-color: transparent; vertical-align: middle; - margin: 0px 0.5rem 0px 0px; + margin: 3px 0.5rem 0px 0px; } -#footer .name, -#footer .status { +#topbar .name, +#topbar .status { display: block; - width: 145px; + width: 120px; overflow: hidden; text-overflow: ellipsis; + text-align: right; } -#footer .name { - color: #fff; +#topbar .name { + color: #555459; font-size: 17px; font-weight: 900; } -#footer .status { - color: #c1dcec; +#topbar .status { + color: #9e9ea6; font-weight: normal; font-size: 14px; line-height: 14px; @@ -1873,16 +1859,19 @@ rgba(0,0,0,0.7) -ms-user-select: initial; user-select: initial; } -#footer .status:focus { +#topbar .status:focus { border-radius: 0.25rem; - border: 1px solid #626f9c; + border: 1px solid #9e9ea6; outline: none; padding: 2px; } -#footer .status:empty:before { +#topbar .status:empty:before { content: 'Update your status'; } -#footer .status:before, -#footer .status:empty:focus:before { +#topbar .status:before, +#topbar .status:empty:focus:before { content: ''; } +#topbar.connected #me { + display: block; +} diff --git a/public/css/otalk.styl b/public/css/otalk.styl index f81b193..b4dab30 100644 --- a/public/css/otalk.styl +++ b/public/css/otalk.styl @@ -13,4 +13,4 @@ @import 'pages/aux' @import 'pages/callbar' @import 'pages/header' -@import 'pages/footer' +@import 'pages/me' diff --git a/public/css/pages/chat.styl b/public/css/pages/chat.styl index 804e25e..5672238 100644 --- a/public/css/pages/chat.styl +++ b/public/css/pages/chat.styl @@ -18,7 +18,7 @@ top: 0px right: 0px left: 220px - right: 90px + right: 200px height: 55px z-index: 101 diff --git a/public/css/pages/header.styl b/public/css/pages/header.styl index be4dd06..46cdde4 100644 --- a/public/css/pages/header.styl +++ b/public/css/pages/header.styl @@ -2,7 +2,7 @@ @import '../_mixins' #topbar.connected - background-color: transparent + background-color: rgb(247, 247, 247) z-index: 100 #connectionStatus display: none @@ -36,30 +36,3 @@ height: 30px margin: 3px 0 cursor: pointer - - .settings - position: fixed - padding-left: 30px - line-height: 30px - height: 30px - right: 5px - top: 12px - background-color: $settingsBg - color: $settingsText - transition: none - border: 0 - - svg - position: absolute - top: 50% - left: 5px - margin: 0px - margin-top: -13px - fill: $settingsText - - &:hover - background-color: $settingsHoverBg - color: $settingsHoverText - - svg - fill: #fff diff --git a/public/css/pages/footer.styl b/public/css/pages/me.styl similarity index 66% rename from public/css/pages/footer.styl rename to public/css/pages/me.styl index c301a63..82809fb 100644 --- a/public/css/pages/footer.styl +++ b/public/css/pages/me.styl @@ -1,42 +1,39 @@ @import '../_variables' @import '../_mixins' -#footer - bottom: 0px - left: 0px - background-color: $sidebarTopAndBottomBg - width:100% - height: 4rem; - position: fixed - z-index: 301 +#topbar #me - border-top: 2px solid $sidebarBorder - padding: 7px 0px 9px 8px; + display: none + position: fixed + right: 0 + padding: 8px 5px 5px 5px + width: 175px .avatar - float:left - width: 48px - height: 48px + float:right + width: 35px + height: 35px background: rgba(0,0,0,0) background-color: transparent vertical-align: middle - margin: 0px 0.5rem 0px 0px; + margin: 3px 0.5rem 0px 0px; .name, .status display: block - width: 145px + width: 120px overflow: hidden text-overflow: ellipsis + text-align: right .name - color: #fff + color: $gray-dark font-size: $font-size-large font-weight: $font-weight-bolder .status - color: $sidebarStatusText + color: $gray font-weight: normal font-size: $font-size-base line-height: $font-size-base @@ -51,7 +48,7 @@ &:focus border-radius: 0.25rem - border: 1px solid $sidebarStatusBorder + border: 1px solid $gray outline: none padding: 2px @@ -61,3 +58,7 @@ &:before, &:empty:focus:before content: '' + + &.connected + #me + display: block diff --git a/public/css/pages/roster.styl b/public/css/pages/roster.styl index c2771d9..e1c7bd4 100644 --- a/public/css/pages/roster.styl +++ b/public/css/pages/roster.styl @@ -18,9 +18,7 @@ #organization width: 220px - height: 53px - background-color: $sidebarTopAndBottomBg - border-bottom: 2px solid $sidebarBorder + height: 42px margin-bottom: 10px #orga_name @@ -31,6 +29,27 @@ vertical-align: middle margin-left: 20px + .settings + position: relative + height: 30px + left: 0px + background-color: $settingsBg + color: $settingsText + transition: none + border: 0 + + svg + position: absolute + top: 55% + left: 3px + margin: 0px + margin-top: -13px + fill: $settingsText + + &:hover + svg + fill: $settingsHoverText + .main margin: 10px 0 0 0 text-align: center @@ -104,8 +123,8 @@ li list-style-type: none padding: 4px 10px - margin: 0px - border-radius: 0px 0.25rem 0.25rem 0px; + margin: 0px 0px 0px 10px + border-radius: 0.25rem position: relative height: 25px font-size: $font-size-base @@ -230,7 +249,7 @@ height: $font-size-base+3 text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3) position: absolute - left: 32px + left: 22px max-width: 140px .unread @@ -285,11 +304,11 @@ #roster .wrap - padding-left: 10px + padding-left: 0px #bookmarks .wrap - padding-left: 24px + padding-left: 14px @keyframes pulsate 0%