discourse/app/assets/stylesheets/common/admin/plugins.scss
Martin Brennan 4e7a75a7ec
DEV: Single admin plugin page for consistent admin plugin UX (#26024)
This commit adds new plugin show routes (`/admin/plugins/:plugin_id`) as we move
towards every plugin having a consistent UI/landing page.

As part of this, we are introducing a consistent way for plugins
to show an inner sidebar in their config page, via a new plugin
API `register_admin_config_nav_routes`

This accepts an array of links with a label/text, and an
ember route. Once this commit is merged we can start the process
of conforming other plugins to follow this pattern, as well
as supporting a single-page version of this for simpler plugins
that don't require an inner sidebar.

Part of /t/122841 internally
2024-03-13 13:15:12 +10:00

97 lines
1.7 KiB
SCSS

// Styles for /admin/plugins
.admin-contents.admin-plugins {
.controls {
.settings-button {
margin-left: auto;
}
}
.admin-plugins-list {
@media screen and (min-width: 550px) {
tr {
grid-template-columns: 0.25fr repeat(4, 1fr);
}
}
@include breakpoint(mobile-extra-large) {
tr {
grid-template-columns: 0.25fr repeat(3, 1fr);
}
.admin-plugins-list {
&__row {
grid-column-start: 2;
grid-column-end: -1;
}
&__settings {
grid-row: 2;
grid-column-start: 4;
text-align: right;
button {
display: flex;
}
}
&__version {
grid-row: 2;
grid-column-start: 3;
}
&__enabled {
grid-row: 2;
grid-column-start: 2;
}
}
}
&__author {
font-size: var(--font-down-2);
padding: 0 0 0.25em 0;
}
&__name-with-badges {
display: flex;
}
&__name {
font-weight: bold;
margin-right: 0.5em;
}
&__badge {
font-weight: 400;
font-size: var(--font-down-2);
background-color: var(--primary-low);
color: var(--primary-medium);
padding: 0.2em 0.8em;
.d-icon {
font-size: 0.8em;
}
& + .admin-plugins-list__badge {
margin-left: 0.5em;
}
}
&__version {
.commit-hash {
font-size: var(--font-down-1);
}
}
}
}
.admin-plugin-config-page {
&__main-area {
.admin-detail {
padding-top: 15px;
}
&.-without-inner-sidebar {
.admin-detail {
border-left: 0;
padding-left: 0;
width: 100%;
}
}
}
}