Commit eb6330d5 authored by alexpott's avatar alexpott

Issue #1591744 by MathieuSpil, pguillard, droplet, rudraram, DeeLay,...

Issue #1591744 by MathieuSpil, pguillard, droplet, rudraram, DeeLay, LewisNyman, mansspams, Aleksandar_P, Manjit.Singh, cchanana, lauriii: Clean up CSS and markup for status report
parent 4b78e91b
......@@ -188,24 +188,30 @@ small .admin-link:after {
}
/* Status report. */
.system-status-report td {
.system-status-report__status-title {
position: relative;
vertical-align: top;
width: 25%;
padding: 10px 6px 10px 40px; /* LTR */
box-sizing: border-box;
font-weight: normal;
}
.system-status-report__status-icon {
width: 16px;
padding-right: 0; /* LTR */
}
[dir="rtl"] .system-status-report__status-icon {
padding-left: 0;
padding-right: 6px;
[dir="rtl"] .system-status-report__status-title {
padding: 10px 40px 10px 6px;
}
.system-status-report__status-icon:before {
content: "";
background-repeat: no-repeat;
height: 16px;
width: 16px;
margin-top: 2px;
display: block;
position: absolute;
left: 12px; /* LTR */
top: 12px;
}
[dir="rtl"] .system-status-report__status-icon:before {
left: auto;
right: 12px;
}
.system-status-report__status-icon--error:before {
background-image: url(../../../misc/icons/e32700/error.svg);
......@@ -213,9 +219,6 @@ small .admin-link:after {
.system-status-report__status-icon--warning:before {
background-image: url(../../../misc/icons/e29700/warning.svg);
}
.system-status-report__status-title {
width: 25%;
}
/**
* Appearance page.
......
......@@ -18,29 +18,23 @@
*/
#}
<table class="system-status-report">
<thead>
<tr class="visually-hidden">
<th>{{ 'Status'|t }}</th><th>{{ 'Component'|t }}</th><th>{{ 'Details'|t }}</th>
</tr>
</thead>
<tbody>
{% for requirement in requirements %}
{% if requirement.severity_status %}
<tr class="system-status-report__entry color-{{ requirement.severity_status }}">
{% endif %}
<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="system-status-report__status-title">{{ requirement.title }}</td>
<td>
{{ requirement.value }}
{% if requirement.description %}
<div class="description">{{ requirement.description }}</div>
{% endif %}
</td>
</tr>
<tr class="system-status-report__entry system-status-report__entry--{{ requirement.severity_status }} color-{{ requirement.severity_status }}">
{% if requirement.severity_status in ['warning', 'error'] %}
<th class="system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}">
<span class="visually-hidden">{{ requirement.severity_title }}</span>
{% else %}
<th class="system-status-report__status-title">
{% endif %}
{{ requirement.title }}
</th>
<td>
{{ requirement.value }}
{% if requirement.description %}
<div class="description">{{ requirement.description }}</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
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