DEV: Try out double nav for new experimental user page nav (#18495)
No tests and this redesign is still highly highly experimental
This commit is contained in:
Alan Guo Xiang Tan
GitHub
parent
7d8cda9858
commit
14532ad425
|
|
@ -1,79 +1,77 @@
|
||||||
{{#if @shouldDisplay}}
|
<section class="user-navigation user-navigation-primary">
|
||||||
<section class="user-primary-navigation" {{did-insert this.registerClickListener}} {{will-destroy this.unregisterClickListener}}>
|
<ul class="main-nav nav nav-pills user-nav">
|
||||||
<ul class="main-nav nav nav-pills user-nav">
|
{{#unless @user.profile_hidden}}
|
||||||
{{#unless @user.profile_hidden}}
|
<li class="summary">
|
||||||
<li class="summary">
|
<LinkTo @route="user.summary">
|
||||||
<LinkTo @route="user.summary">
|
{{d-icon "user"}}
|
||||||
{{d-icon "user"}}
|
{{i18n "user.summary.title"}}
|
||||||
{{i18n "user.summary.title"}}
|
</LinkTo>
|
||||||
</LinkTo>
|
</li>
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="user-activity">
|
<li class="user-activity">
|
||||||
<LinkTo @route="userActivity">
|
<LinkTo @route="userActivity">
|
||||||
{{d-icon "stream"}}
|
{{d-icon "stream"}}
|
||||||
{{i18n "user.activity_stream"}}
|
{{i18n "user.activity_stream"}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
|
|
||||||
{{#if @showNotificationsTab}}
|
{{#if @showNotificationsTab}}
|
||||||
<li class="user-notifications">
|
<li class="user-notifications">
|
||||||
<LinkTo @route="userNotifications">
|
<LinkTo @route="userNotifications">
|
||||||
{{d-icon "bell" class="glyph"}}{{i18n "user.notifications"}}
|
{{d-icon "bell" class="glyph"}}{{i18n "user.notifications"}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if @showPrivateMessages}}
|
{{#if @showPrivateMessages}}
|
||||||
<li class="private-messages">
|
<li class="private-messages">
|
||||||
<LinkTo @route="userPrivateMessages">
|
<LinkTo @route="userPrivateMessages">
|
||||||
{{d-icon "far-envelope"}}
|
{{d-icon "far-envelope"}}
|
||||||
{{i18n "user.private_messages"}}
|
{{i18n "user.private_messages"}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if @canInviteToForum}}
|
{{#if @canInviteToForum}}
|
||||||
<li class="invited">
|
<li class="invited">
|
||||||
<LinkTo @route="userInvited">
|
<LinkTo @route="userInvited">
|
||||||
{{d-icon "user-plus"}}
|
{{d-icon "user-plus"}}
|
||||||
{{i18n "user.invited.title"}}
|
{{i18n "user.invited.title"}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if @showBadges}}
|
{{#if @showBadges}}
|
||||||
<li class="badges">
|
<li class="badges">
|
||||||
<LinkTo @route="user.badges">
|
<LinkTo @route="user.badges">
|
||||||
{{d-icon "certificate"}}
|
{{d-icon "certificate"}}
|
||||||
{{i18n "badges.title"}}
|
{{i18n "badges.title"}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<PluginOutlet
|
<PluginOutlet
|
||||||
@name="user-main-nav"
|
@name="user-main-nav"
|
||||||
@connectorTagName="li"
|
@connectorTagName="li"
|
||||||
@args={{hash model=@user}} />
|
@args={{hash model=@user}} />
|
||||||
|
|
||||||
{{#if @user.can_edit}}
|
{{#if @user.can_edit}}
|
||||||
<li class="preferences">
|
<li class="preferences">
|
||||||
<LinkTo @route="preferences">
|
<LinkTo @route="preferences">
|
||||||
{{d-icon "cog"}}
|
{{d-icon "cog"}}
|
||||||
{{i18n "user.preferences"}}
|
{{i18n "user.preferences"}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if (and this.site.mobileView this.currentUser.staff)}}
|
{{#if (and this.site.mobileView this.currentUser.staff)}}
|
||||||
<li class="admin">
|
<li class="admin">
|
||||||
<a href={{@user.adminPath}} >
|
<a href={{@user.adminPath}} >
|
||||||
{{d-icon "wrench"}}
|
{{d-icon "wrench"}}
|
||||||
{{i18n "admin.user.manage_user"}}
|
{{i18n "admin.user.manage_user"}}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
{{/if}}
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="user-navigation-container">
|
<div class="user-navigation user-navigation-secondary">
|
||||||
{{#if (gt @user.groupsWithMessages.length 0)}}
|
{{#if (gt @user.groupsWithMessages.length 0)}}
|
||||||
<ol class="category-breadcrumb">
|
<ol class="category-breadcrumb">
|
||||||
<li>
|
<li>
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
</ol>
|
</ol>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
<ul id="navigation-bar" class="messages-nav nav-pills action-list">
|
<ul class="messages-nav nav-pills action-list">
|
||||||
{{#if @isPersonal}}
|
{{#if @isPersonal}}
|
||||||
<li>
|
<li>
|
||||||
<LinkTo @route="userPrivateMessages.index" @model={{@user}}>
|
<LinkTo @route="userPrivateMessages.index" @model={{@user}}>
|
||||||
|
|
|
||||||
|
|
@ -17,13 +17,6 @@ export default Controller.extend(CanCheckEmails, {
|
||||||
dialog: service(),
|
dialog: service(),
|
||||||
userNotifications: controller("user-notifications"),
|
userNotifications: controller("user-notifications"),
|
||||||
adminTools: optionalService(),
|
adminTools: optionalService(),
|
||||||
displayUserNav: false,
|
|
||||||
|
|
||||||
init() {
|
|
||||||
this._super(...arguments);
|
|
||||||
|
|
||||||
this.displayUserNav = this.site.desktopView;
|
|
||||||
},
|
|
||||||
|
|
||||||
@discourseComputed("model.username")
|
@discourseComputed("model.username")
|
||||||
viewingSelf(username) {
|
viewingSelf(username) {
|
||||||
|
|
@ -195,11 +188,6 @@ export default Controller.extend(CanCheckEmails, {
|
||||||
}
|
}
|
||||||
),
|
),
|
||||||
|
|
||||||
@action
|
|
||||||
toggleUserNav() {
|
|
||||||
this.toggleProperty("displayUserNav");
|
|
||||||
},
|
|
||||||
|
|
||||||
get displayTopLevelAdminButton() {
|
get displayTopLevelAdminButton() {
|
||||||
if (!this.currentUser?.staff) {
|
if (!this.currentUser?.staff) {
|
||||||
return false;
|
return false;
|
||||||
|
|
|
||||||
|
|
@ -1,75 +1,153 @@
|
||||||
<DSection @pageClass="user-preferences" @class="user-secondary-navigation">
|
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
||||||
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
|
<DSection @pageClass="user-preferences" />
|
||||||
<li class="nav-account">
|
|
||||||
<LinkTo @route="preferences.account">
|
|
||||||
{{i18n "user.preferences_nav.account"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
<li class="nav-security">
|
|
||||||
<LinkTo @route="preferences.security">
|
|
||||||
{{i18n "user.preferences_nav.security"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
<li class="nav-profile">
|
|
||||||
<LinkTo @route="preferences.profile">
|
|
||||||
{{i18n "user.preferences_nav.profile"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
<li class="nav-emails">
|
|
||||||
<LinkTo @route="preferences.emails">
|
|
||||||
{{i18n "user.preferences_nav.emails"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
<li class="nav-notifications">
|
|
||||||
<LinkTo @route="preferences.notifications">
|
|
||||||
{{i18n "user.preferences_nav.notifications"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
{{#if this.model.can_change_tracking_preferences}}
|
|
||||||
<li class="indent nav-categories">
|
|
||||||
<LinkTo @route="preferences.categories">
|
|
||||||
{{i18n "user.preferences_nav.categories"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
{{/if}}
|
|
||||||
<li class="indent nav-users">
|
|
||||||
<LinkTo @route="preferences.users">
|
|
||||||
{{i18n "user.preferences_nav.users"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
{{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}}
|
|
||||||
<li class="indent nav-tags">
|
|
||||||
<LinkTo @route="preferences.tags">
|
|
||||||
{{i18n "user.preferences_nav.tags"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
{{/if}}
|
|
||||||
<li class="nav-interface">
|
|
||||||
<LinkTo @route="preferences.interface">
|
|
||||||
{{i18n "user.preferences_nav.interface"}}
|
|
||||||
</LinkTo>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
|
<div class="user-navigation user-navigation-secondary">
|
||||||
<li class="indent nav-sidebar">
|
<ul class="nav-pills action-list">
|
||||||
<LinkTo @route="preferences.sidebar">
|
<li class="nav-account">
|
||||||
{{i18n "user.preferences_nav.sidebar"}}
|
<LinkTo @route="preferences.account">
|
||||||
|
{{i18n "user.preferences_nav.account"}}
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
<li class="nav-security">
|
||||||
|
<LinkTo @route="preferences.security">
|
||||||
<PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
|
{{i18n "user.preferences_nav.security"}}
|
||||||
|
|
||||||
{{#if this.model.userApiKeys}}
|
|
||||||
<li class="nav-apps">
|
|
||||||
<LinkTo @route="preferences.apps">
|
|
||||||
{{i18n "user.preferences_nav.apps"}}
|
|
||||||
</LinkTo>
|
</LinkTo>
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
<li class="nav-profile">
|
||||||
<PluginOutlet @name="user-preferences-nav" @tagName="span" @connectorTagName="li" @args={{hash model=this.model}} />
|
<LinkTo @route="preferences.profile">
|
||||||
</MobileNav>
|
{{i18n "user.preferences_nav.profile"}}
|
||||||
</DSection>
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
<li class="nav-emails">
|
||||||
|
<LinkTo @route="preferences.emails">
|
||||||
|
{{i18n "user.preferences_nav.emails"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
<li class="nav-notifications">
|
||||||
|
<LinkTo @route="preferences.notifications">
|
||||||
|
{{i18n "user.preferences_nav.notifications"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{#if this.model.can_change_tracking_preferences}}
|
||||||
|
<li class="indent nav-categories">
|
||||||
|
<LinkTo @route="preferences.categories">
|
||||||
|
{{i18n "user.preferences_nav.categories"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
<li class="indent nav-users">
|
||||||
|
<LinkTo @route="preferences.users">
|
||||||
|
{{i18n "user.preferences_nav.users"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}}
|
||||||
|
<li class="indent nav-tags">
|
||||||
|
<LinkTo @route="preferences.tags">
|
||||||
|
{{i18n "user.preferences_nav.tags"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
<li class="nav-interface">
|
||||||
|
<LinkTo @route="preferences.interface">
|
||||||
|
{{i18n "user.preferences_nav.interface"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
|
||||||
|
<li class="indent nav-sidebar">
|
||||||
|
<LinkTo @route="preferences.sidebar">
|
||||||
|
{{i18n "user.preferences_nav.sidebar"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
|
||||||
|
|
||||||
|
{{#if this.model.userApiKeys}}
|
||||||
|
<li class="nav-apps">
|
||||||
|
<LinkTo @route="preferences.apps">
|
||||||
|
{{i18n "user.preferences_nav.apps"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=this.model}} />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
<DSection @pageClass="user-preferences" @class="user-secondary-navigation">
|
||||||
|
<MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
|
||||||
|
<li class="nav-account">
|
||||||
|
<LinkTo @route="preferences.account">
|
||||||
|
{{i18n "user.preferences_nav.account"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
<li class="nav-security">
|
||||||
|
<LinkTo @route="preferences.security">
|
||||||
|
{{i18n "user.preferences_nav.security"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
<li class="nav-profile">
|
||||||
|
<LinkTo @route="preferences.profile">
|
||||||
|
{{i18n "user.preferences_nav.profile"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
<li class="nav-emails">
|
||||||
|
<LinkTo @route="preferences.emails">
|
||||||
|
{{i18n "user.preferences_nav.emails"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
<li class="nav-notifications">
|
||||||
|
<LinkTo @route="preferences.notifications">
|
||||||
|
{{i18n "user.preferences_nav.notifications"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{#if this.model.can_change_tracking_preferences}}
|
||||||
|
<li class="indent nav-categories">
|
||||||
|
<LinkTo @route="preferences.categories">
|
||||||
|
{{i18n "user.preferences_nav.categories"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
<li class="indent nav-users">
|
||||||
|
<LinkTo @route="preferences.users">
|
||||||
|
{{i18n "user.preferences_nav.users"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}}
|
||||||
|
<li class="indent nav-tags">
|
||||||
|
<LinkTo @route="preferences.tags">
|
||||||
|
{{i18n "user.preferences_nav.tags"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
<li class="nav-interface">
|
||||||
|
<LinkTo @route="preferences.interface">
|
||||||
|
{{i18n "user.preferences_nav.interface"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
|
||||||
|
<li class="indent nav-sidebar">
|
||||||
|
<LinkTo @route="preferences.sidebar">
|
||||||
|
{{i18n "user.preferences_nav.sidebar"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
|
<PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
|
||||||
|
|
||||||
|
{{#if this.model.userApiKeys}}
|
||||||
|
<li class="nav-apps">
|
||||||
|
<LinkTo @route="preferences.apps">
|
||||||
|
{{i18n "user.preferences_nav.apps"}}
|
||||||
|
</LinkTo>
|
||||||
|
</li>
|
||||||
|
{{/if}}
|
||||||
|
<PluginOutlet @name="user-preferences-nav" @tagName="span" @connectorTagName="li" @args={{hash model=this.model}} />
|
||||||
|
</MobileNav>
|
||||||
|
</DSection>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
<section class="user-content user-preferences">
|
<section class="user-content user-preferences">
|
||||||
<PluginOutlet @name="above-user-preferences" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
|
<PluginOutlet @name="above-user-preferences" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,23 @@
|
||||||
{{#if this.can_see_invite_details}}
|
{{#if this.can_see_invite_details}}
|
||||||
<DSection @class="user-secondary-navigation" @pageClass="user-invites">
|
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
||||||
<MobileNav @class="invites-nav" @desktopClass="nav-stacked action-list">
|
<DSection @pageClass="user-invites" />
|
||||||
<NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{this.pendingLabel}} />
|
|
||||||
<NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{this.expiredLabel}} />
|
<div class="user-navigation user-navigation-secondary">
|
||||||
<NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} />
|
<ul id="navigation-bar" class="nav-pills action-list">
|
||||||
</MobileNav>
|
<NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{this.pendingLabel}} />
|
||||||
</DSection>
|
<NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{this.expiredLabel}} />
|
||||||
|
<NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
{{else}}
|
||||||
|
<DSection @class="user-secondary-navigation" @pageClass="user-invites">
|
||||||
|
<MobileNav @class="invites-nav" @desktopClass="nav-stacked action-list">
|
||||||
|
<NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{this.pendingLabel}} />
|
||||||
|
<NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{this.expiredLabel}} />
|
||||||
|
<NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} />
|
||||||
|
</MobileNav>
|
||||||
|
</DSection>
|
||||||
|
{{/if}}
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{outlet}}
|
{{outlet}}
|
||||||
|
|
|
||||||
|
|
@ -77,12 +77,6 @@
|
||||||
<DButton @ariaExpanded={{this.collapsedInfoState.isExpanded}} @ariaLabel={{this.collapsedInfoState.ariaLabel}} @ariaControls="collapsed-info-panel" @class="btn-default" @label={{concat "user." this.collapsedInfoState.label}} @icon={{this.collapsedInfoState.icon}} @action={{action this.collapsedInfoState.action}} />
|
<DButton @ariaExpanded={{this.collapsedInfoState.isExpanded}} @ariaLabel={{this.collapsedInfoState.ariaLabel}} @ariaControls="collapsed-info-panel" @class="btn-default" @label={{concat "user." this.collapsedInfoState.label}} @icon={{this.collapsedInfoState.icon}} @action={{action this.collapsedInfoState.action}} />
|
||||||
</li>
|
</li>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if (and this.site.mobileView this.currentUser.redesigned_user_page_nav_enabled)}}
|
|
||||||
<li>
|
|
||||||
<DButton @class="btn-default toggle-mobile-user-menu" @action={{this.toggleUserNav}} @icon="bars" @label="hamburger_menu" />
|
|
||||||
</li>
|
|
||||||
{{/if}}
|
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
@ -237,8 +231,6 @@
|
||||||
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
||||||
<div class="new-user-wrapper">
|
<div class="new-user-wrapper">
|
||||||
<UserNav
|
<UserNav
|
||||||
@shouldDisplay={{this.displayUserNav}}
|
|
||||||
@toggleUserNav={{this.toggleUserNav}}
|
|
||||||
@user={{this.model}}
|
@user={{this.model}}
|
||||||
@showNotificationsTab={{this.showNotificationsTab}}
|
@showNotificationsTab={{this.showNotificationsTab}}
|
||||||
@showPrivateMessages={{this.showPrivateMessages}}
|
@showPrivateMessages={{this.showPrivateMessages}}
|
||||||
|
|
@ -249,11 +241,9 @@
|
||||||
@showDrafts={{this.showDrafts}}
|
@showDrafts={{this.showDrafts}}
|
||||||
@showBookmarks={{this.showBookmarks}} />
|
@showBookmarks={{this.showBookmarks}} />
|
||||||
|
|
||||||
{{#if (or this.site.desktopView (not this.displayUserNav))}}
|
<div class="new-user-content-wrapper">
|
||||||
<div class="new-user-content-wrapper">
|
{{outlet}}
|
||||||
{{outlet}}
|
</div>
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
<div class='user-content-wrapper'>
|
<div class='user-content-wrapper'>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
||||||
<DSection @pageClass="user-activity" />
|
<DSection @pageClass="user-activity" />
|
||||||
|
|
||||||
<div class="user-navigation-container">
|
<div class="user-navigation user-navigation-secondary">
|
||||||
<ul id="navigation-bar" class="nav-pills action-list">
|
<ul class="nav-pills action-list">
|
||||||
<DNavigationItem @route="userActivity.index">{{i18n "user.filters.all"}}</DNavigationItem>
|
<DNavigationItem @route="userActivity.index">{{i18n "user.filters.all"}}</DNavigationItem>
|
||||||
<DNavigationItem @route="userActivity.topics">{{i18n "user_action_groups.4"}}</DNavigationItem>
|
<DNavigationItem @route="userActivity.topics">{{i18n "user_action_groups.4"}}</DNavigationItem>
|
||||||
<DNavigationItem @route="userActivity.replies">{{i18n "user_action_groups.5"}}</DNavigationItem>
|
<DNavigationItem @route="userActivity.replies">{{i18n "user_action_groups.5"}}</DNavigationItem>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
{{#if this.currentUser.redesigned_user_page_nav_enabled}}
|
||||||
<DSection @pageClass="user-notifications" />
|
<DSection @pageClass="user-notifications" />
|
||||||
|
|
||||||
<div class="user-navigation-container">
|
<div class="user-navigation user-navigation-secondary">
|
||||||
<ul id="navigation-bar" class="messages-nav nav-pills action-list">
|
<ul id="navigation-bar" class="messages-nav nav-pills action-list">
|
||||||
<li>
|
<li>
|
||||||
<LinkTo @route="userNotifications.index">
|
<LinkTo @route="userNotifications.index">
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,48 @@
|
||||||
.new-user-wrapper {
|
.new-user-wrapper {
|
||||||
|
.user-navigation {
|
||||||
|
&.user-navigation-secondary {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
|
||||||
|
.nav-pills {
|
||||||
|
border-bottom: 1px solid var(--primary-low);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-pills {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 2px solid var(--primary-low);
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
|
||||||
|
&.active,
|
||||||
|
&:hover {
|
||||||
|
color: var(--quaternary);
|
||||||
|
background-color: var(--secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active::after {
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 2px solid var(--quaternary);
|
||||||
|
bottom: -4px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.user-nav-dropdown-button {
|
.user-nav-dropdown-button {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,14 +7,7 @@
|
||||||
grid-template-rows: auto 1fr;
|
grid-template-rows: auto 1fr;
|
||||||
grid-gap: 20px;
|
grid-gap: 20px;
|
||||||
|
|
||||||
.user-secondary-navigation {
|
.user-navigation-secondary {
|
||||||
grid-column-start: 1;
|
|
||||||
grid-column-end: 2;
|
|
||||||
grid-row-start: 1;
|
|
||||||
grid-row-end: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-navigation-container {
|
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-column-end: 3;
|
grid-column-end: 3;
|
||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
|
|
@ -24,7 +17,7 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-navigation-container ~ .user-content {
|
.user-navigation-secondary ~ .user-content {
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-column-end: 3;
|
grid-column-end: 3;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
|
|
@ -32,6 +25,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-content {
|
.user-content {
|
||||||
|
margin-top: 1em;
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-column-end: 3;
|
grid-column-end: 3;
|
||||||
grid-row-start: 1;
|
grid-row-start: 1;
|
||||||
|
|
@ -43,11 +37,6 @@
|
||||||
justify-self: start;
|
justify-self: start;
|
||||||
grid-row-start: 2;
|
grid-row-start: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-secondary-navigation ~ .user-content {
|
|
||||||
grid-column-start: 2;
|
|
||||||
grid-column-end: 3;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-nav-dropdown-list-item {
|
.user-nav-dropdown-list-item {
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,24 @@
|
||||||
.new-user-wrapper {
|
.new-user-wrapper {
|
||||||
.user-nav {
|
.user-navigation {
|
||||||
flex-direction: column;
|
width: 100%;
|
||||||
|
|
||||||
> li {
|
.nav-pills {
|
||||||
width: 100%;
|
margin: 0.5em 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
.d-icon {
|
scrollbar-width: none;
|
||||||
margin-right: 0.5em;
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(:first-of-type) {
|
li {
|
||||||
border-top: 1px solid var(--primary-low);
|
a {
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
> a,
|
padding: 0.5em 0.5em;
|
||||||
button {
|
white-space: nowrap;
|
||||||
padding: 1em 0.75em;
|
}
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -49,17 +51,4 @@
|
||||||
@include ellipsis;
|
@include ellipsis;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#navigation-bar {
|
|
||||||
margin-top: 1em;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: scroll;
|
|
||||||
margin-bottom: 0;
|
|
||||||
padding-bottom: 0.5em;
|
|
||||||
a {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue