forked from hiway/freedive
Fix UI layout
This commit is contained in:
parent
01d9c54023
commit
9b898a6506
2 changed files with 80 additions and 96 deletions
|
|
@ -149,104 +149,88 @@ defmodule FreediveWeb.ServiceLive.Components do
|
|||
<div class="mt-2 ml-2">Back</div>
|
||||
</.link>
|
||||
|
||||
<.panel_media>
|
||||
<:icon>
|
||||
<.icon_raw for={@selected_item.icon} color="auto" size="3rem" aria-hidden="true" />
|
||||
<%!-- <Lucideicons.accessibility height="2rem" width="2rem" /> --%>
|
||||
</:icon>
|
||||
|
||||
<.title is-4>
|
||||
<%= @selected_item.name %>
|
||||
</.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>
|
||||
<%!-- <.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" />
|
||||
<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>
|
||||
</div>
|
||||
</.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">
|
||||
<%= if @selected_item.running do %>
|
||||
<div class="column is-narrow">
|
||||
<.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 %>
|
||||
<button
|
||||
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>
|
||||
<button
|
||||
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>
|
||||
<% else %>
|
||||
<button
|
||||
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>
|
||||
<% end %>
|
||||
</div>
|
||||
</.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-warning"
|
||||
phx-click="action:restart"
|
||||
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: []}
|
||||
>
|
||||
Restart
|
||||
<%= command %>
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
<button
|
||||
class="button is-danger"
|
||||
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"
|
||||
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 %>
|
||||
<%= for command <- @selected_item.commands do %>
|
||||
<button
|
||||
class="button is-info"
|
||||
phx-disable-with="..."
|
||||
phx-click={"command:#{command}"}
|
||||
phx-value-name={@selected_item.name}
|
||||
{if @selected_item.busy, do: [disabled: true], else: []}
|
||||
>
|
||||
<%= command %>
|
||||
</button>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</.panel_media>
|
||||
</.panel_block_div>
|
||||
<% end %>
|
||||
"""
|
||||
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 %>
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue