diff options
| author | Egor Tensin <Egor.Tensin@gmail.com> | 2022-04-11 02:55:56 +0200 |
|---|---|---|
| committer | Egor Tensin <Egor.Tensin@gmail.com> | 2022-04-11 02:56:00 +0200 |
| commit | 0973338dbd24ff914ad8e5694b61f0c6c706c1d9 (patch) | |
| tree | c98f581d8ee74769000d64f3668b91f0503ffac2 | |
| parent | index.html: display placeholders if no data (diff) | |
| download | linux-status-0973338dbd24ff914ad8e5694b61f0c6c706c1d9.tar.gz linux-status-0973338dbd24ff914ad8e5694b61f0c6c706c1d9.zip | |
index.html: use flexbox for header
Drop the weird workaround. Also, make the power buttons stack vertically
on my phone.
Diffstat (limited to '')
| -rw-r--r-- | html/index.html | 28 |
1 files changed, 21 insertions, 7 deletions
diff --git a/html/index.html b/html/index.html index a116867..659b3b4 100644 --- a/html/index.html +++ b/html/index.html @@ -10,13 +10,15 @@ <div class="container"> <div class="row mt-3"> <div class="col"> - <h1 id="hostname">-</h1> - <p class="mb-0"><small>refreshed every <span id="status_refresh_interval">-</span> seconds</small></p> - </div> - <div class="col h1 text-right"> - <div class="btn-group align-middle" role="group"> - <a role="button" class="btn btn-sm btn-warning" href="#" onclick="reboot();">Reboot</a> - <a role="button" class="btn btn-sm btn-danger" href="#" onclick="shutdown();">Shutdown</a> + <div style="display: flex; justify-content: space-between; align-items: center; gap: .5em;"> + <div> + <h1 id="hostname">-</h1> + <p class="mb-0 small">refreshed every <span id="status_refresh_interval">-</span> seconds</p> + </div> + <div class="btn-group" role="group" id="power_buttons"> + <a role="button" class="btn btn-sm btn-warning" href="#" onclick="reboot();">Reboot</a> + <a role="button" class="btn btn-sm btn-danger" href="#" onclick="shutdown();">Shutdown</a> + </div> </div> </div> </div> @@ -342,6 +344,18 @@ function main() { $(function() { main(); }); + +function on_resize(width) { + if (width < 576) { // xs, in Bootstrap's terms + $('#power_buttons').attr('class', 'btn-group-vertical'); + } else { + $('#power_buttons').attr('class', 'btn-group'); + } +} + +$(window).bind('resize', function() { + on_resize($(this).width()); +}).trigger('resize'); </script> </body> </html> |