gyptazy/freedive
1
0
Fork 0
forked from hiway/freedive
Code Pull requests Activity

Fix UI layout

Browse source
This commit is contained in:
Harshad Sharma 2024-05-18 17:36:14 +05:30
parent 01d9c54023
commit 9b898a6506
2 changed files with 80 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
lib/freedive_web/live/service_live.ex
View file

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

4
lib/liliform/panel.ex
View file

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