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}}
@refreshProblems={{action "refreshProblems"}}
/>
<ul class="nav nav-pills">
<li class="navigation-item general">
<LinkTo @route="admin.dashboard.general" class="navigation-link">
{{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"}}
<nav>
<ul class="nav nav-pills">
<li class="navigation-item general">
<LinkTo @route="admin.dashboard.general" class="navigation-link">
{{i18n "admin.dashboard.general_tab"}}
</LinkTo>
</li>
{{/if}}
{{#if this.isSecurityTabVisible}}
<li class="navigation-item security">
<LinkTo @route="admin.dashboardSecurity" class="navigation-link">
{{i18n "admin.dashboard.security_tab"}}
</LinkTo>
</li>
{{/if}}
{{#if this.isModerationTabVisible}}
<li class="navigation-item moderation">
<LinkTo @route="admin.dashboardModeration" class="navigation-link">
{{i18n "admin.dashboard.moderation_tab"}}
</LinkTo>
</li>
{{/if}}
{{#if this.isReportsTabVisible}}
<li class="navigation-item reports">
<LinkTo @route="admin.dashboardReports" class="navigation-link">
{{i18n "admin.dashboard.reports_tab"}}
</LinkTo>
</li>
{{/if}}
{{#if this.isSecurityTabVisible}}
<li class="navigation-item security">
<LinkTo @route="admin.dashboardSecurity" class="navigation-link">
{{i18n "admin.dashboard.security_tab"}}
</LinkTo>
</li>
{{/if}}
{{#if this.isNewFeaturesTabVisible}}
<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}}
{{#if this.isReportsTabVisible}}
<li class="navigation-item reports">
<LinkTo @route="admin.dashboardReports" class="navigation-link">
{{i18n "admin.dashboard.reports_tab"}}
</LinkTo>
</li>
{{/if}}
<PluginOutlet @name="admin-dashboard-tabs-after" />
</ul>
{{#if this.isNewFeaturesTabVisible}}
<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}}

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

@ -2,6 +2,14 @@
.dashboard-next {
&.admin-contents {
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;
border-bottom: 1px solid var(--primary-low);
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 {
.emoji {