Issue #1591744 by MathieuSpil, pguillard, droplet, rudraram, DeeLay, LewisNyman, mansspams, Aleksandar_P, Manjit.Singh, cchanana, lauriii: Clean up CSS and markup for status report

8.0.x
Alex Pott 2015-09-10 13:36:04 +01:00
parent 4b78e91bf8
commit eb6330d5f0
2 changed files with 31 additions and 34 deletions

View File

@ -188,24 +188,30 @@ small .admin-link:after {
} }
/* Status report. */ /* Status report. */
.system-status-report td { .system-status-report__status-title {
position: relative;
vertical-align: top; vertical-align: top;
width: 25%;
padding: 10px 6px 10px 40px; /* LTR */
box-sizing: border-box;
font-weight: normal;
} }
.system-status-report__status-icon { [dir="rtl"] .system-status-report__status-title {
width: 16px; padding: 10px 40px 10px 6px;
padding-right: 0; /* LTR */
}
[dir="rtl"] .system-status-report__status-icon {
padding-left: 0;
padding-right: 6px;
} }
.system-status-report__status-icon:before { .system-status-report__status-icon:before {
content: ""; content: "";
background-repeat: no-repeat; background-repeat: no-repeat;
height: 16px; height: 16px;
width: 16px; width: 16px;
margin-top: 2px;
display: block; 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 { .system-status-report__status-icon--error:before {
background-image: url(../../../misc/icons/e32700/error.svg); background-image: url(../../../misc/icons/e32700/error.svg);
@ -213,9 +219,6 @@ small .admin-link:after {
.system-status-report__status-icon--warning:before { .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 {
width: 25%;
}
/** /**
* Appearance page. * Appearance page.

View File

@ -18,29 +18,23 @@
*/ */
#} #}
<table class="system-status-report"> <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 %} {% for requirement in requirements %}
{% if requirement.severity_status %} <tr class="system-status-report__entry system-status-report__entry--{{ requirement.severity_status }} color-{{ requirement.severity_status }}">
<tr class="system-status-report__entry color-{{ requirement.severity_status }}"> {% if requirement.severity_status in ['warning', 'error'] %}
{% endif %} <th class="system-status-report__status-title system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}">
<td class="system-status-report__status-icon system-status-report__status-icon--{{ requirement.severity_status }}"> <span class="visually-hidden">{{ requirement.severity_title }}</span>
<div title="{{ requirement.severity_title }}"> {% else %}
<span class="visually-hidden">{{ requirement.severity_title }}</span> <th class="system-status-report__status-title">
</div> {% endif %}
</td> {{ requirement.title }}
<td class="system-status-report__status-title">{{ requirement.title }}</td> </th>
<td> <td>
{{ requirement.value }} {{ requirement.value }}
{% if requirement.description %} {% if requirement.description %}
<div class="description">{{ requirement.description }}</div> <div class="description">{{ requirement.description }}</div>
{% endif %} {% endif %}
</td> </td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>