Fix UI layout

lib/freedive_web/live/service_live.ex

@@ -149,95 +149,78 @@ defmodule FreediveWeb.ServiceLive.Components do
       <div class="mt-2 ml-2">Back</div>
     </.link>
 
-    <.panel_media>
-      <:icon>
+    <.panel_block>
+      <%!-- <.icon_raw for={@selected_item.icon} color="auto" size="3rem" class="" aria-hidden="true" /> --%>
       <.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
-        <%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
-      </:icon>
-
+      <div class="column">
         <.title is-4>
           <%= @selected_item.name %>
+          <%= if @selected_item.running do %>
+            <.icon for="circle-play" color="lightgreen" aria-hidden="true" />
+          <% else %>
+            <.icon for="circle-stop" color="gray" aria-hidden="true" />
+          <% end %>
+          <%= if @selected_item.enabled do %>
+            <.icon for="circle-check" color="lightgreen" aria-hidden="true" />
+          <% else %>
+            <.icon for="circle-x" color="gray" aria-hidden="true" />
+          <% end %>
         </.title>
         <.subtitle>
           <%= @selected_item.description %>
         </.subtitle>
-
-      <:actions>
-        <div class="columns">
-          <div class="column is-narrow">
-            <%= if @selected_item.running do %>
-              <.icon for="circle-play" color="green" aria-hidden="true" />
-            <% else %>
-              <.icon for="circle-stop" color="red" aria-hidden="true" />
-            <% end %>
-            <%= if @selected_item.enabled do %>
-              <.icon for="circle-check" color="green" aria-hidden="true" />
-            <% else %>
-              <.icon for="circle-x" color="red" aria-hidden="true" />
-            <% end %>
       </div>
-        </div>
-      </:actions>
-    </.panel_media>
+    </.panel_block>
 
     <%= if Map.has_key?(@selected_item, :log) and @selected_item.log != [] do %>
-      <.panel_media>
-        <:icon>
-          <.icon for="terminal" color="gray" aria-hidden="true" />
-        </:icon>
-        <:actions></:actions>
+      <.panel_block>
         <pre><code><%= Enum.join(@selected_item.log, "\n") %></code></pre>
-      </.panel_media>
+      </.panel_block>
     <% end %>
 
-    <.panel_media>
-      <:icon>
-        <%!-- <.icon for="terminal" color="auto" size="3rem" aria-hidden="true" /> --%>
-      </:icon>
-
-      <:actions>
-        <div class="columns is-mobile">
+    <.panel_block_div>
+      <%= if @selected_item.running do %>
+        <.icon_raw for="power" color="lightgreen" size="2rem" class="ml-2 mr-5" aria-hidden="true" />
+      <% else %>
+        <.icon_raw for="power" color="gray" size="2rem" class="ml-2 mr-5" aria-hidden="true" />
+      <% end %>
+      <div class="columns is-fullwidth mr-4">
         <%= if @selected_item.running do %>
-            <div class="column is-narrow">
             <button
-                class="button is-warning"
+              class="button is-warning column is-2 m-2 is-fullwidth"
               phx-click="action:restart"
               phx-value-name={@selected_item.name}
               {if @selected_item.busy, do: [disabled: true], else: []}
             >
               Restart
             </button>
-            </div>
-            <div class="column">
             <button
-                class="button is-danger"
+              class="button is-danger column is-2 m-2 is-fullwidth"
               phx-click="action:stop"
               phx-value-name={@selected_item.name}
               {if @selected_item.busy, do: [disabled: true], else: []}
             >
               Stop
             </button>
-            </div>
         <% else %>
-            <div class="column">
             <button
-                class="button is-success"
+              class="button is-success column is-2 m-2 is-fullwidth"
               phx-click="action:start"
               phx-value-name={@selected_item.name}
               {if @selected_item.busy, do: [disabled: true], else: []}
             >
               Start
             </button>
-            </div>
         <% end %>
       </div>
-      </:actions>
-
-      <%= if @selected_item.commands do %>
+    </.panel_block_div>
+    <%= if @selected_item.commands != [] and @selected_item.commands != nil do %>
+      <.panel_block_div>
+        <.icon_raw for="inspection-panel" color="auto" size="2rem" class="ml-1 mr-5" aria-hidden="true" />
+        <div class="columns is-fullwidth mr-4">
           <%= for command <- @selected_item.commands do %>
               <button
-            class="button is-info"
-            phx-disable-with="..."
+                class="button is-info column is-2 m-2 is-fullwidth"
                 phx-click={"command:#{command}"}
                 phx-value-name={@selected_item.name}
                 {if @selected_item.busy, do: [disabled: true], else: []}
@@ -245,8 +228,9 @@ defmodule FreediveWeb.ServiceLive.Components do
                 <%= command %>
               </button>
           <% end %>
+        </div>
+      </.panel_block_div>
     <% end %>
-    </.panel_media>
     """
   end
 
@@ -254,18 +238,18 @@ defmodule FreediveWeb.ServiceLive.Components do
     ~H"""
     <%= for {_name, item} <- @items do %>
       <div>
-        <.link
-          class={"panel-block pt-1 #{if @selected_item != nil and @selected_item.name == item.name, do: "has-background-info-light"}"}
+        <.panel_block
+          class={"panel-block pt-3 #{if @selected_item != nil and @selected_item.name == item.name, do: "has-background-info-light"}"}
           phx-click="tap"
           phx-value-name={item.name}
         >
-          <span class="panel-icon">
-            <.icon for={item.icon} color="auto" aria-hidden="true" />
-          </span>
-          <div class="mt-2 ml-2">
+          <.icon_raw for={item.icon} color="auto" size="1.8rem" aria-hidden="true" />
+          <%!-- <div class="mt-2 ml-2"> --%>
+          <.subtitle class="ml-3">
             <%= item.name %>
-          </div>
-        </.link>
+          </.subtitle>
+          <%!-- </div> --%>
+        </.panel_block>
       </div>
     <% end %>
     """

lib/liliform/panel.ex

@@ -99,11 +99,11 @@ defmodule Liliform.Panel do
 
     ~H"""
     <div class={["panel-block", @class]} {@rest}>
-      <.media class="is-fullwidth">
+      <.media>
         <.media_left>
           <%= render_slot(@icon) %>
         </.media_left>
-        <.media_content class="is-fullwidth">
+        <.media_content>
           <%= render_slot(@inner_block) %>
         </.media_content>
         <.media_right>