github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-06-23 00:21:36 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Set consistent width for primary content in admin UI config area (#29147)

Browse Source 
* UX: Adjust the config area primary content width

* UX: Tweak spacing on the new feature cards

* apply prettier
This commit is contained in:
Ella E.
2024-10-09 19:40:05 -06:00
committed by GitHub
parent 32e261ef73
commit 663ce73e26
5 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs
View File

@ -45,7 +45,10 @@ export default class DashboardNewFeatures extends Component {
} }
<template> <template>
<div class="admin-config-area" {{didInsert this.loadNewFeatures}}> <div
class="admin-config-area__primary-content"
{{didInsert this.loadNewFeatures}}
>
{{#if this.groupedNewFeatures}} {{#if this.groupedNewFeatures}}
{{#each this.groupedNewFeatures as |groupedFeatures|}} {{#each this.groupedNewFeatures as |groupedFeatures|}}
<AdminConfigAreaCard @translatedHeading={{groupedFeatures.date}}> <AdminConfigAreaCard @translatedHeading={{groupedFeatures.date}}>

31
app/assets/javascripts/admin/addon/templates/whats-new.hbs
View File

@ -1,16 +1,19 @@
<div class="admin-config-area"> <AdminPageHeader
<AdminPageHeader @titleLabel="admin.dashboard.new_features.title"
@titleLabel="admin.dashboard.new_features.title" @descriptionLabel="admin.dashboard.new_features.subtitle"
@descriptionLabel="admin.dashboard.new_features.subtitle" @learnMoreUrl="https://meta.discourse.org/tags/c/announcements/67/release-notes"
@learnMoreUrl="https://meta.discourse.org/tags/c/announcements/67/release-notes" @hideTabs={{true}}
> >
<:breadcrumbs> <:breadcrumbs>
<DBreadcrumbsItem <DBreadcrumbsItem
@path="/admin/whats-new" @path="/admin/whats-new"
@label={{i18n "admin.dashboard.new_features.title"}} @label={{i18n "admin.dashboard.new_features.title"}}
/> />
</:breadcrumbs> </:breadcrumbs>
</AdminPageHeader> </AdminPageHeader>
<DashboardNewFeatures /> <div class="admin-container admin-config-page__main-area">
<div class="admin-config-area">
<DashboardNewFeatures />
</div>
</div> </div>

3
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -459,7 +459,8 @@ $mobile-breakpoint: 700px;
} }
.admin-container { .admin-container {
margin-top: 10px; margin-top: var(--space-4);
margin-bottom: var(--space-4);
.admin-section { .admin-section {
margin-bottom: 1em; margin-bottom: 1em;

27
app/assets/stylesheets/common/admin/admin_config_area.scss
View File

@ -48,6 +48,33 @@
} }
.admin-config-area { .admin-config-area {
display: flex;
flex-wrap: nowrap;
gap: var(--space-4);
align-items: flex-start;
@media (max-width: $mobile-breakpoint) {
flex-direction: column;
}
&__primary-content {
flex: 0 1 70%;
@media (max-width: $mobile-breakpoint) {
flex: 0 1 auto;
}
}
&__aside {
/* use for help inset */
flex: 0 1 30%;
padding: var(--space-2);
@media (max-width: $mobile-breakpoint) {
flex: 0 1 auto;
}
}
&__settings { &__settings {
.admin-site-settings-filter-controls { .admin-site-settings-filter-controls {
margin-bottom: 1em; margin-bottom: 1em;

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

@ -655,7 +655,6 @@
margin-bottom: 1em; margin-bottom: 1em;
} }
.admin-new-feature-item__learn-more { .admin-new-feature-item__learn-more {
margin-bottom: 1em;
display: inline-block; display: inline-block;
} }
} }
@ -663,8 +662,10 @@
.admin-new-feature-item { .admin-new-feature-item {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
margin-bottom: 1.5em;
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
&:not(:first-child) {
margin-top: var(--space-4);
}
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
@ -676,12 +677,11 @@
} }
&__content { &__content {
padding-right: 0.5em;
width: 100%; width: 100%;
} }
&__header { &__header {
display: flex; display: flex;
align-items: flex-start; align-items: baseline;
font-weight: bold; font-weight: bold;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }