Commit 3d017474 authored by alexpott's avatar alexpott

Issue #2412949 by kyuubi: Rewrite the system status report component inline with our CSS standards

parent 36b1c8b6
...@@ -187,37 +187,33 @@ small .admin-link:after { ...@@ -187,37 +187,33 @@ small .admin-link:after {
background: url(../../../misc/icons/787878/cog.svg) 0 50% no-repeat; background: url(../../../misc/icons/787878/cog.svg) 0 50% no-repeat;
} }
/** /* Status report. */
* Status report.
*/
.system-status-report td { .system-status-report td {
padding: 6px;
vertical-align: top; vertical-align: top;
} }
.system-status-report td:nth-child(-n+2) { .system-status-report__status-icon {
background-color: rgba(0, 0, 0, 0.04);
}
.system-status-report .status-icon {
width: 16px; width: 16px;
padding-right: 0; /* LTR */ padding-right: 0; /* LTR */
} }
[dir="rtl"] .system-status-report .status-icon { [dir="rtl"] .system-status-report__status-icon {
padding-left: 0; padding-left: 0;
padding-right: 6px; padding-right: 6px;
} }
.system-status-report .status-icon div { .system-status-report__status-icon:before {
content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
height: 16px; height: 16px;
width: 16px; width: 16px;
margin-top: 2px; margin-top: 2px;
display: block;
} }
.system-status-report .status-icon--error div { .system-status-report__status-icon--error:before {
background-image: url(../../../misc/icons/ea2800/error.svg); background-image: url(../../../misc/icons/ea2800/error.svg);
} }
.system-status-report .status-icon--warning div { .system-status-report__status-icon--warning:before {
background-image: url(../../../misc/icons/e29700/warning.svg); background-image: url(../../../misc/icons/e29700/warning.svg);
} }
.system-status-report .status-title { .system-status-report__status-title {
width: 25%; width: 25%;
} }
......
...@@ -26,17 +26,17 @@ ...@@ -26,17 +26,17 @@
<tbody> <tbody>
{% for requirement in requirements %} {% for requirement in requirements %}
{% if requirement.severity_status in ['warning', 'error'] %} {% if requirement.severity_status in ['warning', 'error'] %}
<tr class="color-{{ requirement.severity_status }}"> <tr class="system-status-report__entry color-{{ requirement.severity_status }}">
{% else %} {% else %}
<tr> <tr class="system-status-report__entry">
{% endif %} {% endif %}
<td class="status-icon status-icon--{{ requirement.severity_status }}"> <td class="system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}">
<div title="{{ requirement.severity_title }}"> <div title="{{ requirement.severity_title }}">
<span class="visually-hidden">{{ requirement.severity_title }}</span> <span class="visually-hidden">{{ requirement.severity_title }}</span>
</div> </div>
</td> </td>
<td class="status-title">{{ requirement.title }}</td> <td class="system-status-report__status-title">{{ requirement.title }}</td>
<td class="status-value"> <td>
{{ requirement.value }} {{ requirement.value }}
{% if requirement.description %} {% if requirement.description %}
<div class="description">{{ requirement.description }}</div> <div class="description">{{ requirement.description }}</div>
......
/**
* @file
* Seven styles for the System Status Report.
*/
.system-status-report__entry {
border-top: 1px solid #ccc;
border-bottom: inherit;
}
.system-status-report__entry:first-child {
border-top: 1px solid #bebfb9;
}
.system-status-report__entry:last-child {
border-bottom: 1px solid #bebfb9;
}
/** /**
* Tables. * @file
* Seven styles for Tables.
*/ */
table { table {
width: 100%; width: 100%;
margin: 0 0 10px; margin: 0 0 10px;
...@@ -123,26 +125,6 @@ th.select-all { ...@@ -123,26 +125,6 @@ th.select-all {
margin-bottom: 1.2em; margin-bottom: 1.2em;
} }
/**
* Status report table.
*/
table.system-status-report tr {
border-top: 1px solid #ccc;
border-bottom: inherit;
}
table.system-status-report tr:first-child {
border-top: 1px solid #bebfb9;
}
table.system-status-report tr:last-child {
border-bottom: 1px solid #bebfb9;
}
table.system-status-report td {
padding: 12px;
}
table.system-status-report td:nth-child(-n+2) {
background-color: transparent;
}
/** /**
* Responsive tables. * Responsive tables.
*/ */
......
...@@ -26,6 +26,7 @@ global-styling: ...@@ -26,6 +26,7 @@ global-styling:
css/components/panel.css: {} css/components/panel.css: {}
css/components/skip-link.css: {} css/components/skip-link.css: {}
css/components/tables.css: {} css/components/tables.css: {}
css/components/system-status-report.css: {}
css/components/tabs.css: {} css/components/tabs.css: {}
css/components/tour.theme.css: {} css/components/tour.theme.css: {}
css/components/update-status.css: {} css/components/update-status.css: {}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment