From 0973338dbd24ff914ad8e5694b61f0c6c706c1d9 Mon Sep 17 00:00:00 2001
From: Egor Tensin <Egor.Tensin@gmail.com>
Date: Mon, 11 Apr 2022 02:55:56 +0200
Subject: index.html: use flexbox for header

Drop the weird workaround. Also, make the power buttons stack vertically
on my phone.
---
 html/index.html | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

(limited to 'html/index.html')

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>
-- 
cgit v1.2.3