redo user menu adding small glyphs linking to various functions

This commit is contained in:
Sam 2015-08-31 12:02:00 +10:00
parent 82148fc200
commit 4d67bba44a
2 changed files with 39 additions and 12 deletions

View File

@ -1,12 +1,27 @@
{{#menu-panel visible=visible}}
<ul class='menu-links-header'>
<li>{{#link-to 'userActivity.bookmarks' currentUser}}<i class='fa fa-bookmark'></i> {{i18n 'user.bookmarks'}}{{/link-to}}</li>
{{#if allowAnon}}
<li><a href {{action 'toggleAnon'}}><i class='fa fa-user-secret'></i> {{#if isAnon}}{{i18n 'switch_from_anon'}}{{else}}{{i18n 'switch_to_anon'}}{{/if}}</a></li>
{{/if}}
<div class='menu-links-header'>
<ul class='menu-links-row'>
<li>{{#link-to 'user' currentUser class="user-activity-link" }}<i class='fa fa-user'></i> {{i18n 'user.profile'}}{{/link-to}}</li>
{{#if allowAnon}}
{{#if isAnon}}
<li>
<a href {{action 'toggleAnon'}}>{{i18n 'switch_from_anon'}}</a>
</li>
{{/if}}
{{/if}}
<li class='glyphs'>
<a href="{{currentUser.path}}/activity/bookmarks" title="{{i18n 'user.bookmarks'}}" aria-label="{{i18n 'user.bookmarks'}}"><i class='fa fa-bookmark'></i></a>
<a href="{{currentUser.path}}/messages" title="{{i18n 'user.private_messages'}}" aria-label="{{i18n 'user.private_messages'}}"><i class='fa fa-envelope'></i></a>
{{#if allowAnon}}
{{#unless isAnon}}
<a href {{action 'toggleAnon'}} title="{{i18n 'switch_to_anon'}}" aria-label="{{i18n 'switch_to_anon'}}"><i class='fa fa-user-secret'></i></a>
{{/unless}}
{{/if}}
<a href="{{currentUser.path}}/preferences" title="{{i18n 'user.preferences'}}" aria-label="{{i18n 'user.preferences'}}"><i class='fa fa-gear'></i></a>
</li>
</ul>
</div>
<div class='notifications'>
{{#conditional-loading-spinner condition=loadingNotifications containerClass="spinner-container"}}
@ -22,5 +37,6 @@
</ul>
{{/if}}
{{/conditional-loading-spinner}}
{{plugin-outlet "user-menu-bottom"}}
</div>
{{/menu-panel}}

View File

@ -218,27 +218,38 @@
}
}
ul.menu-links-header {
div.menu-links-header {
width: 100%;
display: table;
table-layout: fixed;
li:hover {
border-collapse: separate;
border-spacing: 0 0.5em;
.menu-links-row {
display: table-row;
}
a:hover {
background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
}
a {
padding: 0.5em;
}
li {
display: table-cell;
width: auto;
text-align: center;
padding: 0.5em 0;
}
li:first-child {
text-align: left;
padding-left: 0.5em;
}
li:last-child {
text-align: right;
padding-right: 0.5em;
}
a {
font-size: 1.1em;
}
.fa-user {
margin-right: 0.2em;
}
}