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>
<div class="admin-config-area" {{didInsert this.loadNewFeatures}}>
<div
class="admin-config-area__primary-content"
{{didInsert this.loadNewFeatures}}
>
{{#if this.groupedNewFeatures}}
{{#each this.groupedNewFeatures as |groupedFeatures|}}
<AdminConfigAreaCard @translatedHeading={{groupedFeatures.date}}>

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

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

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

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

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

@ -48,6 +48,33 @@
}
.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 {
.admin-site-settings-filter-controls {
margin-bottom: 1em;

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

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