discourse/app/assets/stylesheets/common/admin/admin_report.scss
Krzysztof Kotlarek 043117ca13
FEATURE: separate admin page for whats new and reports (#26216)
Currently, a new sidebar link for what's new and reports is going to the main dashboard page and activates the proper tab.

It might be problematic, especially, when the instance has a lot of problems. In that case, it would be difficult for admin to find reports or what’s new which is rendered at the bottom of the page.

Therefore separate pages for reports and what's new were created.

Reports were moved to a component that is shared between a separate page and the dashboard.
2024-03-20 14:23:18 +11:00

253 lines
4.0 KiB
SCSS

.admin-report {
.conditional-loading-section {
&.is-loading {
margin: 0;
}
}
.header {
display: flex;
align-items: center;
border-bottom: 1px solid var(--primary-low);
margin-bottom: 0.5em;
padding-bottom: 0.5em;
}
.header .breadcrumb {
margin: 0;
list-style: none;
.item {
display: inline;
font-size: var(--font-up-1);
}
.all-reports .report-url {
font-weight: 700;
}
.report {
font-weight: 700;
.report-url {
color: var(--primary);
}
.info {
cursor: pointer;
margin-left: 0.25em;
color: var(--primary-low-mid);
&:hover {
color: var(--primary-medium);
}
}
}
}
.header .trend {
margin-left: auto;
margin-right: 8px;
&.trending-down,
&.high-trending-down {
color: var(--danger);
}
&.trending-up,
&.high-trending-up {
color: var(--success);
}
&.no-change {
color: var(--primary-medium);
.d-icon {
display: none;
}
}
.value {
font-size: var(--font-up-1);
}
.icon {
font-size: var(--font-up-1);
font-weight: 700;
}
}
.body {
display: flex;
}
.main {
flex: 1;
}
.main .report-alert {
margin: 0;
text-align: center;
padding: 3em;
border: 1px solid transparent;
a {
color: var(--primary-medium);
}
.d-icon {
color: currentColor;
font-size: var(--font-up-5);
display: block;
margin: 0.25em auto;
}
&.no-data,
&.rate-limited {
background: var(--secondary);
border-color: var(--primary-low);
color: var(--primary-low-mid);
}
&.rate-limited .d-icon {
color: var(--danger);
}
&.timeout,
&.exception {
border-color: var(--danger-low);
color: var(--danger);
}
}
.average-chart {
padding: 0.5em;
border: 1px solid var(--highlight);
color: var(--highlight);
margin-bottom: 1em;
text-align: center;
background: var(--highlight-bg);
}
.filters {
display: flex;
margin-left: 1em;
flex-direction: column;
width: 220px;
.modes {
margin: 0 0 1em 0;
padding: 0;
list-style: none;
.mode {
display: inline-flex;
flex: 1 0 0px;
.mode-btn.is-current {
color: var(--tertiary);
}
}
}
.chart-groupings {
display: grid;
grid-template-columns: repeat(auto-fill, 1fr);
grid-gap: 0.5em;
margin-bottom: 1em;
.chart-grouping.active {
background: var(--tertiary);
color: var(--secondary);
}
}
.control {
margin-bottom: 1em;
}
.control .label {
font-weight: 700;
width: 100%;
}
.control .input,
.control .select-kit {
width: 100%;
.export-csv-btn {
width: 100%;
}
.refresh-report-btn {
width: 100%;
}
}
}
}
.rtl .admin-report {
.filters {
margin-left: 0;
margin-right: 1em;
}
.trend {
margin-left: unset;
margin-right: auto;
}
}
.admin-report.storage-stats {
.main {
flex: 1 0 auto;
}
}
.admin-reports-header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
@media screen and (max-width: 400px) {
flex-wrap: wrap;
}
h2 {
margin: 0 0.5em 0 0;
a {
color: var(--primary);
}
}
}
.admin-reports-list {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0 -1.5%;
&__report {
margin: 1.5%;
border: 1px solid var(--primary-low);
flex: 1 1 28%;
transition: box-shadow 0.25s;
min-width: 225px;
max-width: 550px;
a {
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 1em;
.report-description {
color: var(--primary-high);
}
}
&:hover {
box-shadow: var(--shadow-card);
}
}
}