redo user menu adding small glyphs linking to various functions
This commit is contained in:
parent
82148fc200
commit
4d67bba44a
|
@ -1,12 +1,27 @@
|
||||||
{{#menu-panel visible=visible}}
|
{{#menu-panel visible=visible}}
|
||||||
<ul class='menu-links-header'>
|
<div class='menu-links-header'>
|
||||||
<li>{{#link-to 'userActivity.bookmarks' currentUser}}<i class='fa fa-bookmark'></i> {{i18n 'user.bookmarks'}}{{/link-to}}</li>
|
<ul class='menu-links-row'>
|
||||||
{{#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}}
|
|
||||||
|
|
||||||
<li>{{#link-to 'user' currentUser class="user-activity-link" }}<i class='fa fa-user'></i> {{i18n 'user.profile'}}{{/link-to}}</li>
|
<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>
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class='notifications'>
|
<div class='notifications'>
|
||||||
{{#conditional-loading-spinner condition=loadingNotifications containerClass="spinner-container"}}
|
{{#conditional-loading-spinner condition=loadingNotifications containerClass="spinner-container"}}
|
||||||
|
@ -22,5 +37,6 @@
|
||||||
</ul>
|
</ul>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
{{/conditional-loading-spinner}}
|
{{/conditional-loading-spinner}}
|
||||||
|
{{plugin-outlet "user-menu-bottom"}}
|
||||||
</div>
|
</div>
|
||||||
{{/menu-panel}}
|
{{/menu-panel}}
|
||||||
|
|
|
@ -218,27 +218,38 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.menu-links-header {
|
div.menu-links-header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: table;
|
display: table;
|
||||||
table-layout: fixed;
|
border-collapse: separate;
|
||||||
li:hover {
|
border-spacing: 0 0.5em;
|
||||||
|
.menu-links-row {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
|
background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
|
||||||
}
|
}
|
||||||
|
a {
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
li {
|
li {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: auto;
|
width: auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.5em 0;
|
|
||||||
}
|
}
|
||||||
li:first-child {
|
li:first-child {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding-left: 0.5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li:last-child {
|
li:last-child {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 0.5em;
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.fa-user {
|
||||||
|
margin-right: 0.2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue