💄 — Correctly show results on small screens

This commit is contained in:
Luc Didry 2024-09-24 10:58:58 +02:00
parent 839429f460
commit 89f4590fb7
No known key found for this signature in database
GPG key ID: EA868E12D0257E3C
3 changed files with 42 additions and 1 deletions

View file

@ -2,6 +2,8 @@
## [Unreleased] ## [Unreleased]
- 💄 — Correctly show results on small screens
## 0.4.1 ## 0.4.1
Date: 2024-09-18 Date: 2024-09-18

View file

@ -1,5 +1,22 @@
@import url("pico.min.css"); @import url("pico.min.css");
.display-small {
display: none;
text-align: center;
}
@media (max-width: 767px) {
.display-large {
display: none !important;
}
.display-small {
display: block;
}
.display-small article {
display: inline-block;
width: 24%;
}
}
code { code {
white-space: pre-wrap; white-space: pre-wrap;
} }

View file

@ -44,7 +44,29 @@
</ul> </ul>
</nav> </nav>
<div class="container"> <div class="container">
<div class="grid grid-index"> <div class="display-small">
<article title="Unknown">
<br>
{{ counts_dict['unknown'] }}
</article>
<article title="OK">
<br>
{{ counts_dict['ok'] }}
</article>
<article title="Warning">
⚠️
<br>
{{ counts_dict['warning'] }}
</article>
<article title="Critical">
<br>
{{ counts_dict['critical'] }}
</article>
</div>
<div class="grid grid-index display-large">
<article> <article>
<header title="Unknown"> <header title="Unknown">