From a6975901242e08657d567855cca162be9aaa3515 Mon Sep 17 00:00:00 2001 From: karolinaszczur Date: Mon, 23 Sep 2013 10:37:02 +0200 Subject: [PATCH] [ux] make logout and settings buttons --- clientapp/templates.js | 2 +- clientapp/templates/body.jade | 4 ++-- public/css/_variables.styl | 1 + public/css/app/forms.styl | 2 +- public/css/app/roster.styl | 22 +++++++++++----------- public/css/otalk.css | 25 +++++++++++++------------ 6 files changed, 29 insertions(+), 27 deletions(-) diff --git a/clientapp/templates.js b/clientapp/templates.js index 2e9a198..16fae99 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('
'); + buf.push('
'); } return buf.join(""); }; diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade index c423d57..be67cf0 100644 --- a/clientapp/templates/body.jade +++ b/clientapp/templates/body.jade @@ -6,9 +6,9 @@ body aside#menu nav.main li - a(href="/logout") Logout + a(href="/logout", class="button") Logout li - a(href="/") + 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') diff --git a/public/css/_variables.styl b/public/css/_variables.styl index 22f1ad8..a8f9a07 100644 --- a/public/css/_variables.styl +++ b/public/css/_variables.styl @@ -5,6 +5,7 @@ $actionPink = #ec008c $sidebarBg = #0b1316 $sidebarActive = #192a47 +$sidebarButton = #1f2d49 $baseText = #565656 $textSecondary = #b7b7b7 diff --git a/public/css/app/forms.styl b/public/css/app/forms.styl index 39ed5e1..2d31e43 100644 --- a/public/css/app/forms.styl +++ b/public/css/app/forms.styl @@ -49,7 +49,7 @@ button, a.button padding: 0 1em color: white background: $activeBlue - font-size: $fontMedium + font-size: $fontSmall font-weight: bold text-decoration: none text-align: center diff --git a/public/css/app/roster.styl b/public/css/app/roster.styl index 220ee95..e10d7a6 100644 --- a/public/css/app/roster.styl +++ b/public/css/app/roster.styl @@ -17,7 +17,11 @@ .main li list-style-type: none - line-height: 12px + margin: 10px 0 5px 0 + text-align: center + + &:last-child + margin: 0 svg position: absolute @@ -26,19 +30,15 @@ margin-top: -13px fill: white - &:hover - background: $activeBlue - a - display: block position: relative - padding: 0 15px 0 40px - text-decoration: none - font-size: $fontMedium - color: white - font-weight: 600 - line-height: 35px + width: 120px + .button + background: $sidebarButton + + &:hover + background: lighten($sidebarButton, 10%) h1 font-size: $fontSmall diff --git a/public/css/otalk.css b/public/css/otalk.css index caf1125..d387ccd 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -265,7 +265,11 @@ td { } #menu .main li { list-style-type: none; - line-height: 12px; + margin: 10px 0 5px 0; + text-align: center; +} +#menu .main li:last-child { + margin: 0; } #menu .main li svg { position: absolute; @@ -274,18 +278,15 @@ td { margin-top: -13px; fill: #fff; } -#menu .main li:hover { - background: #00aeef; -} #menu .main li a { - display: block; position: relative; - padding: 0 15px 0 40px; - text-decoration: none; - font-size: 14px; - color: #fff; - font-weight: 600; - line-height: 35px; + width: 120px; +} +#menu .main li .button { + background: #1f2d49; +} +#menu .main li .button:hover { + background: #2b3f65; } #menu h1 { font-size: 12px; @@ -808,7 +809,7 @@ a.button { padding: 0 1em; color: #fff; background: #00aeef; - font-size: 14px; + font-size: 12px; font-weight: bold; text-decoration: none; text-align: center;