Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: fix dashboard nav overflow (#27963)

This commit is contained in:
Ella E. 2024-07-18 09:39:59 -06:00 committed by GitHub
parent 9719aa0e2d
commit 79e0aa6a64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 77 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
app/assets/javascripts/admin/addon/templates/dashboard.hbs
View File

@ -18,51 +18,52 @@
@problemsTimestamp={{this.problemsTimestamp}} @problemsTimestamp={{this.problemsTimestamp}}
@refreshProblems={{action "refreshProblems"}} @refreshProblems={{action "refreshProblems"}}
/> />
<nav>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="navigation-item general"> <li class="navigation-item general">
<LinkTo @route="admin.dashboard.general" class="navigation-link"> <LinkTo @route="admin.dashboard.general" class="navigation-link">
{{i18n "admin.dashboard.general_tab"}} {{i18n "admin.dashboard.general_tab"}}
</LinkTo>
</li>
{{#if this.isModerationTabVisible}}
<li class="navigation-item moderation">
<LinkTo @route="admin.dashboardModeration" class="navigation-link">
{{i18n "admin.dashboard.moderation_tab"}}
</LinkTo> </LinkTo>
</li> </li>
{{/if}}
{{#if this.isSecurityTabVisible}} {{#if this.isModerationTabVisible}}
<li class="navigation-item security"> <li class="navigation-item moderation">
<LinkTo @route="admin.dashboardSecurity" class="navigation-link"> <LinkTo @route="admin.dashboardModeration" class="navigation-link">
{{i18n "admin.dashboard.security_tab"}} {{i18n "admin.dashboard.moderation_tab"}}
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
{{#if this.isReportsTabVisible}} {{#if this.isSecurityTabVisible}}
<li class="navigation-item reports"> <li class="navigation-item security">
<LinkTo @route="admin.dashboardReports" class="navigation-link"> <LinkTo @route="admin.dashboardSecurity" class="navigation-link">
{{i18n "admin.dashboard.reports_tab"}} {{i18n "admin.dashboard.security_tab"}}
</LinkTo> </LinkTo>
</li> </li>
{{/if}} {{/if}}
{{#if this.isNewFeaturesTabVisible}} {{#if this.isReportsTabVisible}}
<li class="navigation-item new-features"> <li class="navigation-item reports">
<LinkTo @route="admin.dashboardNewFeatures" class="navigation-link"> <LinkTo @route="admin.dashboardReports" class="navigation-link">
{{#if this.hasUnseenFeatures}} {{i18n "admin.dashboard.reports_tab"}}
{{replace-emoji ":gift:"}} </LinkTo>
{{/if}} </li>
{{i18n "admin.dashboard.new_features.title"}} {{/if}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="admin-dashboard-tabs-after" /> {{#if this.isNewFeaturesTabVisible}}
</ul> <li class="navigation-item new-features">
<LinkTo @route="admin.dashboardNewFeatures" class="navigation-link">
{{#if this.hasUnseenFeatures}}
{{replace-emoji ":gift:"}}
{{/if}}
{{i18n "admin.dashboard.new_features.title"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="admin-dashboard-tabs-after" />
</ul>
</nav>
{{outlet}} {{outlet}}

37
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -2,6 +2,14 @@
.dashboard-next { .dashboard-next {
&.admin-contents { &.admin-contents {
margin: 10px 0 0 0; margin: 10px 0 0 0;
nav {
position: relative;
width: calc(100% + 10px);
padding-left: 10px;
margin-left: -10px;
margin-right: -10px;
}
} }
} }
@ -11,6 +19,35 @@
margin: 0 0 2em 0; margin: 0 0 2em 0;
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
font-size: var(--font-up-1); font-size: var(--font-up-1);
white-space: nowrap;
flex-wrap: nowrap;
overflow-x: scroll;
// Fade-out for horizontal scroll nav
&:before {
content: "";
position: absolute;
width: 10px;
margin-left: -10px;
height: 100%;
background: linear-gradient(
to left,
rgba(var(--secondary-rgb), 1),
rgba(var(--secondary-rgb), 0)
);
}
&:after {
content: "";
position: absolute;
right: 0px;
width: 30px;
height: 100%;
background: linear-gradient(
to right,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
}
.navigation-link { .navigation-link {
.emoji { .emoji {