diff options
| -rw-r--r-- | client/css/main.css | 16 | ||||
| -rw-r--r-- | client/html/top_nav.hbs | 5 | ||||
| -rw-r--r-- | client/js/controllers/top_nav_controller.js | 2 | ||||
| -rw-r--r-- | client/js/views/top_nav_view.js | 2 |
4 files changed, 22 insertions, 3 deletions
diff --git a/client/css/main.css b/client/css/main.css index 0b33966..f508251 100644 --- a/client/css/main.css +++ b/client/css/main.css @@ -97,9 +97,11 @@ nav.plain-nav ul li a { nav.text-nav { margin: 1em 0; + line-height: 2.3em; + vertical-align: middle; } nav.text-nav ul li a { - padding: 0.3em 1.2em; + padding: 0 1.2em; } nav.text-nav ul li:not(.active) a { color: var(--inactive-tab-text-color); @@ -120,6 +122,7 @@ nav.text-nav ul li.active a { #top-nav ul li { float: left; } +#top-nav ul li[data-name=account], #top-nav ul li[data-name=register], #top-nav ul li[data-name=login], #top-nav ul li[data-name=logout], @@ -129,6 +132,17 @@ nav.text-nav ul li.active a { #top-nav .access-key { text-decoration: underline; } +#top-nav .thumbnail, #top-nav span { + vertical-align: middle; +} +#top-nav .thumbnail { + width: 1.5em; + height: 1.5em; + margin: calc((2.3em - 1.5em) / 2); + margin-right: 0.6em; + margin-left: calc(0.6em - 1.2em); + float: left; +} .messages { margin: 0 auto; diff --git a/client/html/top_nav.hbs b/client/html/top_nav.hbs index fb693c2..750e524 100644 --- a/client/html/top_nav.hbs +++ b/client/html/top_nav.hbs @@ -3,7 +3,10 @@ -->{{#each items}}<!-- -->{{#if this.available}}<!-- --><li data-name='{{@key}}'><!-- - --><a href='{{this.url}}' accesskey='{{this.accessKey}}'>{{this.name}}</a><!-- + --><a href='{{this.url}}' accesskey='{{this.accessKey}}'><!-- + -->{{#if this.imageUrl}}{{thumbnail this.imageUrl}}{{/if}}<!-- + --><span class='text'>{{this.name}}</span><!-- + --></a><!-- --></li><!-- -->{{/if}}<!-- -->{{/each}}<!-- diff --git a/client/js/controllers/top_nav_controller.js b/client/js/controllers/top_nav_controller.js index 4e27395..a9c15ea 100644 --- a/client/js/controllers/top_nav_controller.js +++ b/client/js/controllers/top_nav_controller.js @@ -10,6 +10,7 @@ class NavigationItem { this.name = name; this.url = url; this.available = true; + this.imageUrl = null; } } @@ -46,6 +47,7 @@ class TopNavController { updateVisibility() { this.items.account.url = '/user/' + api.userName; + this.items.account.imageUrl = api.user ? api.user.avatarUrl : null; const b = Object.keys(this.items); for (let key of b) { diff --git a/client/js/views/top_nav_view.js b/client/js/views/top_nav_view.js index 2c6cdf6..2369553 100644 --- a/client/js/views/top_nav_view.js +++ b/client/js/views/top_nav_view.js @@ -13,7 +13,7 @@ class TopNavView { const target = this.navHolder; const source = this.template(ctx); - for (let link of source.querySelectorAll('a')) { + for (let link of source.querySelectorAll('a span.text')) { const regex = new RegExp( '(' + link.getAttribute('accesskey') + ')', 'i'); link.innerHTML = link.textContent.replace( |