From c0396713b33bf2dd121aa50898d2426eece0030f Mon Sep 17 00:00:00 2001 From: Lance Stout Date: Fri, 20 Dec 2013 12:59:53 -0800 Subject: [PATCH] Move settings button to header --- clientapp/templates.js | 2 +- clientapp/templates/body.jade | 16 ++++++---------- public/css/otalk.css | 30 +++++++++++++++++++++++++++++- public/css/pages/header.styl | 26 ++++++++++++++++++++++++++ public/css/pages/roster.styl | 4 +++- public/x-manifest.cache | 2 +- 6 files changed, 66 insertions(+), 14 deletions(-) diff --git a/clientapp/templates.js b/clientapp/templates.js index c3a58b9..f6c1213 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('

Settings
'); } return buf.join(""); }; diff --git a/clientapp/templates/body.jade b/clientapp/templates/body.jade index 7edc118..fe198a6 100644 --- a/clientapp/templates/body.jade +++ b/clientapp/templates/body.jade @@ -7,16 +7,6 @@ body button.primary.reconnect Reconnect #wrapper aside#menu - nav.main - li - a(href="/logout", class="button secondary") Logout - 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(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 section#roster h1 Roster nav @@ -28,4 +18,10 @@ body img.avatar span.name span.status(contenteditable="true") + 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 diff --git a/public/css/otalk.css b/public/css/otalk.css index fe758ab..99867dd 100644 --- a/public/css/otalk.css +++ b/public/css/otalk.css @@ -747,8 +747,10 @@ button.secondary:hover:not(:disabled) { #roster li .user, #bookmarks li .user { color: #fff; - width: 70%; + width: 100%; line-height: 100%; + overflow: hidden; + text-overflow: ellipsis; } #roster li .name, #bookmarks li .name { @@ -1528,3 +1530,29 @@ rgba(0,0,0,0.7) border: 1px solid #efe391; color: #d2bd2d; } +#me .settings { + position: fixed; + padding-left: 30px; + line-height: 30px; + height: 30px; + right: 5px; + top: 5px; + background-color: #fff; + color: #12acef; + transition: none; +} +#me .settings svg { + position: absolute; + top: 50%; + left: 5px; + margin: 0px; + margin-top: -13px; + fill: #12acef; +} +#me .settings:hover { + background-color: #12acef; + color: #fff; +} +#me .settings:hover svg { + fill: #fff; +} diff --git a/public/css/pages/header.styl b/public/css/pages/header.styl index 71e79b1..1652646 100644 --- a/public/css/pages/header.styl +++ b/public/css/pages/header.styl @@ -62,3 +62,29 @@ background-color: #fffcea border: 1px solid #efe391 color: #d2bd2d + + .settings + position: fixed + padding-left: 30px + line-height: 30px + height: 30px + right: 5px + top: 5px + background-color: #fff + color: #12acef + transition: none + + svg + position: absolute + top: 50% + left: 5px + margin: 0px + margin-top: -13px + fill: #12acef + + &:hover + background-color: #12acef + color: #fff + + svg + fill: #fff diff --git a/public/css/pages/roster.styl b/public/css/pages/roster.styl index e3af68a..ad7aa82 100644 --- a/public/css/pages/roster.styl +++ b/public/css/pages/roster.styl @@ -148,8 +148,10 @@ .user color: white - width: 70% + width: 100% line-height: 100% + overflow: hidden + text-overflow: ellipsis .name display: inline-block diff --git a/public/x-manifest.cache b/public/x-manifest.cache index db82cd5..cbb1fae 100644 --- a/public/x-manifest.cache +++ b/public/x-manifest.cache @@ -1,5 +1,5 @@ CACHE MANIFEST -# 0.0.1 1387566998684 +# 0.0.1 1387572419314 CACHE: /app.js