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 {
background: url(../../../misc/icons/787878/cog.svg) 0 50% no-repeat;
}
/**
* Status report.
*/
/* Status report. */
.system-status-report td {
padding: 6px;
vertical-align: top;
}
.system-status-report td:nth-child(-n+2) {
background-color: rgba(0, 0, 0, 0.04);
}
.system-status-report .status-icon {
.system-status-report__status-icon {
width: 16px;
padding-right: 0; /* LTR */
}
[dir="rtl"] .system-status-report .status-icon {
[dir="rtl"] .system-status-report__status-icon {
padding-left: 0;
padding-right: 6px;
}
.system-status-report .status-icon div {
.system-status-report__status-icon:before {
content: "";
background-repeat: no-repeat;
height: 16px;
width: 16px;
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);
}
.system-status-report .status-icon--warning div {
.system-status-report__status-icon--warning:before {
background-image: url(../../../misc/icons/e29700/warning.svg);
}
.system-status-report .status-title {
.system-status-report__status-title {
width: 25%;
}
......
......@@ -26,17 +26,17 @@
<tbody>
{% for requirement in requirements %}
{% if requirement.severity_status in ['warning', 'error'] %}
<tr class="color-{{ requirement.severity_status }}">
<tr class="system-status-report__entry color-{{ requirement.severity_status }}">
{% else %}
<tr>
<tr class="system-status-report__entry">
{% 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 }}">
<span class="visually-hidden">{{ requirement.severity_title }}</span>
</div>
</td>
<td class="status-title">{{ requirement.title }}</td>
<td class="status-value">
<td class="system-status-report__status-title">{{ requirement.title }}</td>
<td>
{{ requirement.value }}
{% if requirement.description %}
<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 {
width: 100%;
margin: 0 0 10px;
......@@ -123,26 +125,6 @@ th.select-all {
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.
*/
......
......@@ -26,6 +26,7 @@ global-styling:
css/components/panel.css: {}
css/components/skip-link.css: {}
css/components/tables.css: {}
css/components/system-status-report.css: {}
css/components/tabs.css: {}
css/components/tour.theme.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