ui: status: use one column on mobile

Status and checks are unreadable on mobile. Use one column on high-DPI screens. Signed-off-by: Jakub Kicinski <[email protected]>
linux-netdev · May 26, 2024 · 3b28d09 · 3b28d09
1 parent 583b1e3
commit 3b28d09
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 18 deletions.
diff --git a/ui/contest.html b/ui/contest.html
@@ -21,7 +21,7 @@
 </head>
 <body onload="do_it();">
 <div id="sitemap"></div>
-<div class="row">
+<div class="row-small">
     <fieldset>
         <legend>Loading:</legend>
         <label for="ld_branch">Single branch:</label>
@@ -35,8 +35,8 @@
     <fieldset>
       <legend>Filtering:</legend>
 
-      <div class="row">
-          <div class="column">
+      <div class="row-small">
+          <div class="column-small">
               <div>
                   <input type="checkbox" id="pass" name="fl-pw" disabled checked />
                   <label for="pass">Pass</label>
@@ -54,7 +54,7 @@
                   <label for="fail">Fail</label>
               </div>
           </div>
-          <div class="column">
+          <div class="column-small">
               <div>
                   <label for="remote">Remote</label>
                   <select id="remote" name="fl-pw" disabled>
@@ -74,7 +74,7 @@
                   </select>
               </div>
           </div>
-          <div class="column">
+          <div class="column-small">
               <div>
                   <input type="checkbox" id="pw-y" name="fl-pw" disabled checked />
                   <label for="pw-y">Reported to patchwork</label>
@@ -89,7 +89,7 @@
               </div>
           </div>
       </div>
-      <div class="row">
+      <div class="row-small">
           <span id="fl-warn-box" style="color: red">Loading...</span>
       </div>
     </fieldset>

diff --git a/ui/flakes.html b/ui/flakes.html
@@ -21,29 +21,29 @@
 </head>
 <body onload="do_it();">
 <div id="sitemap"></div>
-<div class="row">
+<div class="row-small">
     <fieldset>
         <legend>Filtering:</legend>
-        <div class="row">
-            <div class="column">
+        <div class="row-small">
+            <div class="column-small">
                 <label for="tn-needle">Name contains: </label>
                 <input type="text" id="tn-needle" name="fl-pw" disabled>
             </div>
-            <div class="column">
+            <div class="column-small">
                 <label for="min-flip">Min state flips: </label>
                 <input type="number" id="min-flip" name="fl-pw" min="0" value="1" disabled>
                 <br />
                 <label for="br-cnt">Number of branches / columns: </label>
                 <input type="number" id="br-cnt" name="fl-pw" min="1" value="100" disabled>
             </div>
-            <div class="column">
+            <div class="column-small">
                 <input type="checkbox" id="pw-y" name="fl-pw" disabled checked />
                 <label for="pw-y">Reported to patchwork</label>
                 <br />
                 <input type="checkbox" id="pw-n" name="fl-pw" disabled checked />
                 <label for="pw-n">Ignored by patchwork</label>
             </div>
-            <div class="column">
+            <div class="column-small">
                 <fieldset>
                     <legend>Sort:</legend>
 
@@ -58,12 +58,12 @@
                 </fieldset>
             </div>
         </div>
-        <div class="row">
+        <div class="row-small">
             <span id="fl-warn-box" style="color: red">Loading...</span>
         </div>
     </fieldset>
-    <div class="row">
-        <div class="column">
+    <div class="row-small">
+        <div class="column-small">
             <table>
                 <tbody>
                 <tr><td class="box-pass">pass</td></tr>

diff --git a/ui/nipa.css b/ui/nipa.css
@@ -29,11 +29,22 @@ tr:nth-child(even) {
 .box-flake { background-color: red; }
 .box-fail  { background-color: #d06060; }
 
-.row {
-    display: flex;
+@media screen and (max-resolution: 116dpi) {
+    .row {
+	display: flex;
+    }
+
+    .column {
+	flex: 50%;
+	padding: 1em;
+    }
 }
 
-.column {
+/* layout inside fieldsets even on small screens */
+.row-small {
+    display: flex;
+}
+.column-small {
     flex: 50%;
     padding: 1em;
 }