Files
discourse/app/assets/stylesheets/common/admin/dashboard.scss
Martin Brennan 20fe5eceb8 FEATURE: Scheduled group email credential problem check (#15396)
This commit adds a check that runs regularly as per
2d68e5d942 which tests the
credentials of groups with SMTP or IMAP enabled. If any issues
are found with those credentials a high priority problem is added to the
admin dashboard.

This commit also formats the admin dashboard differently if
there are high priority problems, bringing them to the top of
the list and highlighting them.

The problem will be cleared if the issue is fixed before the next
problem check, or if the group's settings are updated with a valid
credential.
2022-01-04 10:14:33 +10:00

700 lines
12 KiB
SCSS

.admin-reports,
.dashboard,
.dashboard-next {
&.admin-contents {
margin: 10px 0 0 0;
}
}
.dashboard,
.dashboard-next {
.navigation {
display: flex;
margin: 0 0 1em 0;
border-bottom: 1px solid var(--primary-low-mid);
.navigation-item {
display: inline;
&:hover {
background: var(--primary-very-low);
}
}
.navigation-link {
display: block;
font-weight: bold;
padding: 0.6em 1em 0.5em 1em;
}
}
@mixin active-navigation-item {
.navigation-link {
border-bottom: 0.4em solid var(--tertiary);
}
}
&.dashboard-moderation .navigation-item.moderation {
@include active-navigation-item;
}
&.dashboard-security .navigation-item.security {
@include active-navigation-item;
}
&.dashboard-reports .navigation-item.reports {
@include active-navigation-item;
}
&.general .navigation-item.general {
@include active-navigation-item;
}
.sections {
display: flex;
flex-direction: column;
}
.section-columns {
display: flex;
justify-content: space-between;
@include breakpoint(medium) {
flex-direction: column;
}
.section-column {
min-width: calc(50% - 0.5em);
max-width: 100%;
&:last-child {
margin-left: 0.5em;
}
&:first-child {
margin-right: 0.5em;
}
@include breakpoint(medium) {
min-width: 100%;
&:last-child {
order: 1;
}
&:first-child {
order: 2;
}
}
}
@include breakpoint(medium) {
.section-column:last-child,
.section-column:first-child {
margin: 0;
}
}
}
.section {
.section-title {
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);
}
}
}
.section-body {
margin-top: 1em;
> p {
margin-top: 0;
}
}
}
.admin-report .header {
border: 0;
padding: 0;
margin-bottom: 1em;
}
.charts {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
.admin-report {
grid-column: span 4;
&.consolidated-page-views {
grid-column: span 12;
}
}
@include breakpoint(medium) {
.admin-report {
grid-column: span 12;
}
}
.chart-canvas-container {
position: relative;
margin-left: -5px;
}
.chart-canvas {
width: 100%;
height: 100%;
}
}
.misc {
display: flex;
border: 1px solid var(--primary-low);
.storage-stats,
.last-dashboard-update {
flex: 1 1 50%;
box-sizing: border-box;
margin: 1em 0;
padding: 0 1em;
}
.storage-stats {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-right: 1px solid var(--primary-low);
.backups,
.uploads {
flex: 1 1 100%;
}
.uploads p:last-of-type {
margin-bottom: 0;
}
}
@media screen and (max-width: 400px) {
flex-wrap: wrap;
.storage-stats,
.last-dashboard-update {
flex: 1 1 100%;
text-align: left;
}
.last-dashboard-update {
display: block;
margin: 0 20px 20px 20px;
padding: 20px 0 0 0;
border-top: 1px solid var(--primary-low);
border-left: none;
}
}
.last-dashboard-update {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
div {
align-self: center;
h4 {
margin-bottom: 0;
}
}
}
}
.top-referred-topics {
margin-bottom: 2em;
}
.top-referred-topics,
.trending-search {
th:first-of-type {
text-align: left;
}
}
.period-chooser .period-chooser-header {
font-size: var(--font-down-2);
}
.dashboard-problems {
margin-bottom: 2em;
.problem-messages {
margin-bottom: 1.25em;
&.priority-high {
background-color: var(--danger-low);
border: 1px solid var(--danger-medium);
}
ul {
margin: 0 0 0 1.25em;
li.dashboard-problem {
padding: 0.5em 0.5em;
}
}
}
.d-icon-exclamation-triangle {
color: var(--danger);
}
.actions {
margin: 1em 0 0 0;
display: flex;
align-items: center;
color: var(--primary-medium);
.btn {
margin-right: 1em;
}
}
}
}
.counters-list {
display: flex;
flex: 1 0 0px;
flex-direction: column;
.counters-header {
display: grid;
flex: 1 0 auto;
grid-template-columns: 33% repeat(auto-fit, minmax(20px, 1fr));
border: 1px solid var(--primary-low);
border-bottom: 0;
font-weight: 700;
text-align: right;
align-items: center;
padding: 0.65em 0.25em;
}
.admin-report .main {
border: 1px solid var(--primary-low);
&:hover {
background-color: var(--primary-very-low);
}
}
.admin-report:not(:last-child) {
.main {
border-bottom: 0;
}
.conditional-loading-section.is-loading {
border-bottom: 0;
}
}
.admin-report .conditional-loading-section.is-loading {
display: flex;
flex-direction: row;
padding: 0.5em 0.25em;
align-items: flex-start;
justify-content: flex-start;
border: 1px solid var(--primary-low);
.title {
font-size: $font-0;
}
.spinner {
margin: 0;
width: 8px;
height: 8px;
margin-left: 0.5em;
}
}
.admin-report .main .report-alert {
display: flex;
flex-direction: row;
padding: 0.5em 0.25em;
align-items: center;
text-align: left;
border: 0;
&:hover {
background-color: var(--primary-very-low);
}
.d-icon {
font-size: $font-up-1;
margin: 0 0.25em 0 0;
color: var(--primary-low-mid);
}
}
}
.activity-metrics {
margin-bottom: 2em;
}
.user-metrics {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
.dashboard-inline-table {
flex: 1 0 auto;
max-width: 95%;
}
.table-cell {
display: flex;
flex: 0 1 auto;
margin: 0 10px 5px 0;
padding: 1px;
border-radius: 10px;
.label {
display: flex;
align-items: center;
color: var(--primary);
justify-content: center;
border-radius: 9px 0 0 9px;
padding: 0 5px 0 8px;
.d-icon {
margin-right: 5px;
font-size: $font-down-1;
}
}
.value {
background: var(--secondary);
border-radius: 0 9px 9px 0;
padding: 0 8px 0 5px;
}
&.user-newuser {
.label {
color: var(--primary-high);
}
}
&.user-basic,
&.user-member {
background: var(--bronze);
.label {
color: var(--secondary);
}
}
&.user-regular {
background: var(--silver);
.label {
color: var(--secondary);
}
}
&.user-leader {
background: var(--gold);
.label {
color: var(--secondary);
}
}
}
}
.rtl .dashboard-next {
.section-column {
&:last-child {
margin-right: 1em;
margin-left: 0;
}
&:first-child {
margin-left: 1em;
margin-right: 0;
}
}
.user-metrics .table-cell {
margin: 0 0 5px 10px;
}
.table-cell {
.label {
border-radius: 0 9px 9px 0;
.d-icon {
margin-right: 0;
margin-left: 5px;
}
}
}
}
.users-by-trust-level,
.users-by-type {
margin-bottom: 2em;
}
.community-health.section {
margin-bottom: 2em;
}
.dashboard-moderation,
.dashboard-security {
.section-body {
margin-bottom: 2em;
}
.main-section {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
> * {
grid-column: span 12;
}
.admin-dashboard-security-bottom-outlet,
.admin-dashboard-moderation-bottom-outlet {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
}
}
.admin-report {
grid-column: span 12;
}
}
.dashboard-moderation {
.admin-dashboard-moderation-top {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
}
}
.dashboard-reports {
.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: shadow("card");
}
}
}
.version-checks {
display: flex;
flex-wrap: wrap;
.section-title {
flex: 1 1 100%;
border-bottom: 1px solid var(--primary-low);
padding-bottom: 0.5em;
}
h2 {
margin: 0;
}
}
.version-check {
display: flex;
flex: 1 1 50%;
flex-wrap: wrap;
align-items: flex-start;
align-self: flex-start;
justify-content: space-between;
padding-top: 1em;
.upgrade-header {
flex: 1 1 100%;
@media screen and (max-width: 650px) {
margin: 0;
}
tr {
border: none;
}
th {
background: transparent;
padding: 0;
}
}
h2 {
flex: 1 1 100%;
}
.version-number {
font-size: $font-up-2;
line-height: $line-height-small;
box-sizing: border-box;
font-weight: bold;
margin-bottom: 2em;
margin-right: 1em;
flex: 1 1 27%;
h3 {
flex: 1 0 auto;
margin: 0;
white-space: nowrap;
}
h4 {
font-size: $font-down-2;
margin-bottom: 0.5em;
}
.sha-link {
display: inline-flex;
font-size: $font-down-2;
font-weight: normal;
}
}
.version-status {
display: flex;
align-items: center;
margin: 0 0 1em 0;
flex: 1 1 24%;
box-sizing: border-box;
padding-right: 20px;
min-width: 250px;
@include breakpoint(medium) {
max-width: unset;
}
.face {
margin: 0 0.75em 0 0;
font-size: $font-up-3;
}
}
&.critical .version-notes .normal-note {
display: none;
}
&.normal .version-notes .critical-note {
display: none;
}
.fa {
font-size: $font-up-4;
}
.up-to-date {
color: var(--success);
}
.updates-available {
color: var(--danger);
}
.critical-updates-available {
color: var(--danger);
}
}
.update-nag {
.d-icon {
font-size: $font-up-3;
}
}
.dashboard-next.general {
display: flex;
flex-direction: column;
}
.dashboard-new-features {
&.ordered-first {
order: -1;
}
&:not(.ordered-first) {
.section-title {
margin-top: 1.5em;
}
.new-features-dismiss {
display: none;
}
}
.section-body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
grid-gap: 1.5em;
&.three-or-more-items {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
}
.section-footer {
margin: 1.5em;
display: flex;
justify-content: flex-end;
align-items: center;
.btn {
margin-left: 1em;
}
}
}
.admin-new-feature-item {
display: flex;
align-items: flex-start;
.new-feature-emoji {
font-size: 3.5em;
padding-right: 0.5em;
padding-left: 0.5em;
width: 25%;
text-align: center;
}
.new-feature-content {
padding-right: 0.5em;
width: 75%;
.header {
font-size: $font-up-1;
font-weight: bold;
margin-bottom: 0.5em;
}
}
}