[K8sBroadcaster] Simplify HTML layout. Improve panel HTML.

l7mp · Jan 6, 2025 · 4e73e00 · 4e73e00
1 parent bae2819
commit 4e73e00
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 15 deletions.
diff --git a/k8s_broadcaster/lib/k8s_broadcaster_web/components/layouts/app.html.heex b/k8s_broadcaster/lib/k8s_broadcaster_web/components/layouts/app.html.heex
@@ -29,11 +29,9 @@
     </div>
   </div>
 </header>
-<main class="flex-1 min-h-0">
-  <div class="h-full">
-    <.flash_group flash={@flash} />
-    {@inner_content}
-  </div>
+<main class="flex-1">
+  <.flash_group flash={@flash} />
+  {@inner_content}
 </main>
 <footer class="w-full m-auto flex flex-row px-7 py-9 justify-center items-center">
   <a href="https://swmansion.com" target="_blank">

diff --git a/k8s_broadcaster/lib/k8s_broadcaster_web/components/layouts/root.html.heex b/k8s_broadcaster/lib/k8s_broadcaster_web/components/layouts/root.html.heex
@@ -18,7 +18,7 @@
       rel="stylesheet"
     />
   </head>
-  <body class="bg-white antialiased flex flex-col">
+  <body class="bg-white antialiased flex flex-col min-h-svh">
     {@inner_content}
   </body>
 </html>
diff --git a/k8s_broadcaster/lib/k8s_broadcaster_web/controllers/page_html/home.html.heex b/k8s_broadcaster/lib/k8s_broadcaster_web/controllers/page_html/home.html.heex
@@ -159,35 +159,51 @@
         <tbody>
           <tr class="border border-[#675AF1] border-solid">
             <td class="w-[215px] py-2 pl-4">duration</td>
-            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="duration">0</td>
+            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="duration">
+              0
+            </td>
             <td class="w-[215px] py-2 pl-4">rtt (ms)</td>
             <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="rtt">0</td>
             <td class="w-[215px] py-2 pl-4">audioBitrate (kbps)</td>
             <td class="w-[100px] py-2 text-right pr-4" id="audio-bitrate">0</td>
           </tr>
           <tr class="border border-[#675AF1] border-solid">
             <td class="w-[215px] py-2 pl-4">videoBitrate (kbps)</td>
-            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="video-bitrate">0</td>
+            <td
+              class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]"
+              id="video-bitrate"
+            >
+              0
+            </td>
             <td class="w-[215px] py-2 pl-4">packetsReceived/s</td>
-            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="packets-received">
+            <td
+              class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]"
+              id="packets-received"
+            >
               0
             </td>
             <td class="w-[215px] py-2 pl-4">frameWidth</td>
             <td class="w-[100px] py-2 text-right pr-4" id="frame-width">0</td>
           </tr>
           <tr class="border border-[#675AF1] border-solid">
             <td class="w-[215px] py-2 pl-4">frameHeight</td>
-            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="frame-height">0</td>
+            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="frame-height">
+              0
+            </td>
             <td class="w-[215px] py-2 pl-4">framesPerSecond</td>
             <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="fps">0</td>
             <td class="w-[215px] py-2 pl-4">keyframesDecoded</td>
             <td class="w-[100px] py-2 text-right pr-4" id="keyframes-decoded">0</td>
           </tr>
           <tr class="border border-[#675AF1] border-solid">
             <td class="w-[215px] py-2 pl-4">pliCount</td>
-            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="pli-count">0</td>
+            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="pli-count">
+              0
+            </td>
             <td class="w-[215px] py-2 pl-4">packetLoss (%)</td>
-            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="packet-loss">0</td>
+            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="packet-loss">
+              0
+            </td>
             <td class="w-[215px] py-2 pl-4">nackCount</td>
             <td class="w-[100px] py-2 text-right pr-4" id="nack-count">0</td>
           </tr>
@@ -200,7 +216,9 @@
               0
             </td>
             <td class="w-[215px] py-2 pl-4">freezeCount</td>
-            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="freeze-count">0</td>
+            <td class="w-[100px] py-2 text-right pr-4 border-r border-[#675AF1]" id="freeze-count">
+              0
+            </td>
             <td class="w-[215px] py-2 pl-4">freezeDuration (s)</td>
             <td class="w-[100px] py-2 text-right pr-4" id="freeze-duration">0</td>
           </tr>

diff --git a/k8s_broadcaster/lib/k8s_broadcaster_web/controllers/page_html/panel.html.heex b/k8s_broadcaster/lib/k8s_broadcaster_web/controllers/page_html/panel.html.heex
@@ -1,5 +1,5 @@
-<div id="panel" phx-hook="Panel" class="h-full flex justify-between gap-6">
-  <div class="flex flex-col gap-2 w-full overflow-y-scroll">
+<div id="panel" phx-hook="Panel" class="flex py-9 px-7">
+  <div class="m-auto w-full max-w-[1500px] flex flex-col gap-2">
     <details class="details">
       <summary class="font-bold">Devices</summary>
       <div class="summary-content flex flex-col gap-6">