IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: improve layout for admin tables in mobile (#29320)

Browse Source
This commit is contained in:
Ella E. 2024-10-21 18:19:21 -06:00 committed by GitHub
parent bd4e8422fe
commit 9e74095488
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 117 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,15 @@
$mobile-breakpoint: 700px; $mobile-breakpoint: 700px;
:root {
--space-1: 0.25rem;
--space-2: calc(0.25rem * 2);
--space-3: calc(0.25rem * 3);
--space-4: calc(0.25rem * 4);
--space-5: calc(0.25rem * 5);
--space-6: calc(0.25rem * 6);
}
// Common admin styles // Common admin styles
.admin-main-nav { .admin-main-nav {
@ -74,13 +83,6 @@ $mobile-breakpoint: 700px;
} }
.admin-contents { .admin-contents {
--space-1: 0.25rem;
--space-2: calc(0.25rem * 2);
--space-3: calc(0.25rem * 3);
--space-4: calc(0.25rem * 4);
--space-5: calc(0.25rem * 5);
--space-6: calc(0.25rem * 6);
position: relative; position: relative;
.nav-stacked { .nav-stacked {
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
@ -1086,6 +1088,7 @@ a.inline-editable-field {
@import "common/admin/plugins"; @import "common/admin/plugins";
@import "common/admin/site-settings"; @import "common/admin/site-settings";
@import "common/admin/admin_config_area"; @import "common/admin/admin_config_area";
@import "common/admin/admin_table";
@import "common/admin/admin_reports"; @import "common/admin/admin_reports";
@import "common/admin/admin_report"; @import "common/admin/admin_report";
@import "common/admin/admin_report_counters"; @import "common/admin/admin_report_counters";

107
app/assets/stylesheets/common/admin/admin_table.scss Normal file
View File

@ -0,0 +1,107 @@
.d-admin-table {
box-shadow: none;
@include breakpoint("mobile-extra-large") {
border-collapse: collapse;
margin-bottom: var(--space-3);
}
thead {
@include breakpoint("mobile-extra-large") {
display: none;
}
}
th {
color: var(--primary-high);
}
.d-admin-row__content {
position: relative;
padding: var(--space-1) 0;
@include breakpoint("mobile-extra-large") {
display: block;
margin-bottom: var(--space-3);
box-shadow: var(--shadow-card);
}
}
td {
border-top: none;
@include breakpoint("mobile-extra-large") {
display: block;
border-top: 1px solid var(--primary-very-low);
}
&:first-child,
&:last-child {
@include breakpoint("mobile-extra-large") {
border-top: 0;
}
}
}
}
.d-admin-row__overview {
&-name {
font-weight: 700;
max-width: 80%;
}
&-author {
font-size: var(--font-down-2);
padding: 0 0 var(--space-1) 0;
}
&-about {
.d-icon {
font-size: var(--font-down-3);
margin-bottom: 0.1em;
}
}
}
td.d-admin-row__detail {
@include breakpoint("mobile-extra-large") {
display: flex;
justify-content: space-between;
border-top: 1px solid var(--primary-low);
}
}
.d-admin-row__toggle {
.d-toggle-switch {
display: inline-block;
}
}
.d-admin-row__control {
&-options {
text-align: right;
display: flex;
flex-direction: row;
gap: 0.5em;
justify-content: flex-end;
.fk-d-menu__trigger {
font-size: var(--font-down-1);
}
}
@include breakpoint("mobile-extra-large") {
position: absolute;
top: 0;
right: 0;
}
}
.d-admin-row__mobile-label {
display: none;
@include breakpoint("mobile-extra-large") {
display: inline-flex;
color: var(--secondary-medium);
}
}