Add home page stub, icons
This commit is contained in:
parent
d0524502bd
commit
c935fbbc42
3 changed files with 195 additions and 8 deletions
|
|
@ -60,18 +60,30 @@
|
|||
|
||||
<.navbar_item has-dropdown is-hoverable>
|
||||
<.navbar_link>
|
||||
<span class="icon mr-2">
|
||||
<Lucideicons.bot aria-hidden="true" />
|
||||
</span>
|
||||
System
|
||||
</.navbar_link>
|
||||
|
||||
<.navbar_dropdown>
|
||||
<%!-- <.navbar_item>
|
||||
<.link>Software Updates</.link>
|
||||
</.navbar_item>
|
||||
<.link href={~p"/updates"} class="navbar-item">
|
||||
<span class="icon mr-2">
|
||||
<Lucideicons.hard_drive_download aria-hidden="true" />
|
||||
</span>
|
||||
Software updates
|
||||
</.link>
|
||||
<.navbar_divider />
|
||||
<.navbar_item>
|
||||
<.link>Packages</.link>
|
||||
</.navbar_item> --%>
|
||||
<.link href={~p"/packages"} class="navbar-item">
|
||||
<span class="icon mr-2">
|
||||
<Lucideicons.package aria-hidden="true" />
|
||||
</span>
|
||||
Packages
|
||||
</.link>
|
||||
<.link href={~p"/services"} class="navbar-item">
|
||||
<span class="icon mr-2">
|
||||
<Lucideicons.puzzle aria-hidden="true" />
|
||||
</span>
|
||||
Services
|
||||
</.link>
|
||||
</.navbar_dropdown>
|
||||
|
|
@ -79,20 +91,29 @@
|
|||
<% end %>
|
||||
<.navbar_item has-dropdown is-hoverable>
|
||||
<.navbar_link>
|
||||
<span class="icon mr-2">
|
||||
<Lucideicons.circle_user aria-hidden="true" />
|
||||
</span>
|
||||
Account
|
||||
</.navbar_link>
|
||||
|
||||
<.navbar_dropdown>
|
||||
<%= if @current_user do %>
|
||||
<.link href={~p"/users/settings"} class="navbar-item">
|
||||
<span class="icon mr-2">
|
||||
<Lucideicons.user_cog aria-hidden="true" />
|
||||
</span>
|
||||
Settings
|
||||
</.link>
|
||||
<.link href={~p"/users/log_out"} method="delete" class="navbar-item">
|
||||
<span class="icon mr-2">
|
||||
<Lucideicons.log_out aria-hidden="true" />
|
||||
</span>
|
||||
Log out
|
||||
</.link>
|
||||
<% else %>
|
||||
<.link href={~p"/users/log_in"} class="navbar-item">
|
||||
Log in
|
||||
<Lucideicons.log_in aria-hidden="true" /> Log in
|
||||
</.link>
|
||||
<% end %>
|
||||
</.navbar_dropdown>
|
||||
|
|
|
|||
|
|
@ -204,6 +204,28 @@ defmodule Liliform.Components do
|
|||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders control.
|
||||
"""
|
||||
attr :class, :string, default: nil, doc: "the optional class of the control"
|
||||
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the control"
|
||||
|
||||
slot :inner_block, required: true, doc: "the inner block that renders the control content"
|
||||
|
||||
def control(assigns) do
|
||||
assigns =
|
||||
assigns
|
||||
|> extend_class("control")
|
||||
|> set_phx_attributes()
|
||||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<p {@heex_class} {@heex_phx_attributes} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</p>
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders section.
|
||||
"""
|
||||
|
|
@ -864,6 +886,94 @@ defmodule Liliform.Components do
|
|||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a panel.
|
||||
"""
|
||||
attr :class, :string, default: nil, doc: "the optional class of the panel"
|
||||
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel"
|
||||
|
||||
slot :inner_block, required: true, doc: "the inner block that renders the panel content"
|
||||
|
||||
def panel(assigns) do
|
||||
assigns =
|
||||
assigns
|
||||
|> extend_class("panel")
|
||||
|> set_phx_attributes()
|
||||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<article {@heex_class} {@heex_phx_attributes} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</article>
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a panel-heading.
|
||||
"""
|
||||
attr :class, :string, default: nil, doc: "the optional class of the panel-heading"
|
||||
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-heading"
|
||||
|
||||
slot :inner_block, required: true, doc: "the inner block that renders the panel-heading content"
|
||||
|
||||
def panel_heading(assigns) do
|
||||
assigns =
|
||||
assigns
|
||||
|> extend_class("panel-heading")
|
||||
|> set_phx_attributes()
|
||||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<p {@heex_class} {@heex_phx_attributes} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</p>
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a panel-tabs.
|
||||
"""
|
||||
attr :class, :string, default: nil, doc: "the optional class of the panel-tabs"
|
||||
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-tabs"
|
||||
|
||||
slot :inner_block, required: true, doc: "the inner block that renders the panel-tabs content"
|
||||
|
||||
def panel_tabs(assigns) do
|
||||
assigns =
|
||||
assigns
|
||||
|> extend_class("panel-tabs")
|
||||
|> set_phx_attributes()
|
||||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<p {@heex_class} {@heex_phx_attributes} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</p>
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders a panel-block.
|
||||
"""
|
||||
attr :class, :string, default: nil, doc: "the optional class of the panel-block"
|
||||
attr :rest, :global, doc: "the arbitrary HTML attributes to add to the panel-block"
|
||||
|
||||
slot :inner_block, required: true, doc: "the inner block that renders the panel-block content"
|
||||
|
||||
def panel_block(assigns) do
|
||||
assigns =
|
||||
assigns
|
||||
|> extend_class("panel-block")
|
||||
|> set_phx_attributes()
|
||||
|> set_bulma_classes()
|
||||
|
||||
~H"""
|
||||
<div {@heex_class} {@heex_phx_attributes} {@rest}>
|
||||
<%= render_slot(@inner_block) %>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
@doc """
|
||||
Renders search input.
|
||||
"""
|
||||
|
|
|
|||
|
|
@ -4,12 +4,68 @@ defmodule FreediveWeb.HomeLive do
|
|||
def render(assigns) do
|
||||
~H"""
|
||||
<.section>
|
||||
<.title>Home</.title>
|
||||
<.panel is-info>
|
||||
<.panel_heading>Home</.panel_heading>
|
||||
<.panel_tabs is-hidden-mobile>
|
||||
<a class="is-active">All</a>
|
||||
<a>Compute</a>
|
||||
<a>Storage</a>
|
||||
<a>Network</a>
|
||||
<a>System</a>
|
||||
</.panel_tabs>
|
||||
<.panel_tabs is-hidden-tablet>
|
||||
<a class="is-active"><Lucideicons.infinity aria-hidden="true" /></a>
|
||||
<a><Lucideicons.binary aria-hidden="true" /></a>
|
||||
<a><Lucideicons.hard_drive aria-hidden="true" /></a>
|
||||
<a><Lucideicons.earth aria-hidden="true" /></a>
|
||||
<a><Lucideicons.bot aria-hidden="true" /></a>
|
||||
</.panel_tabs>
|
||||
|
||||
<.panel_block>
|
||||
<.control has-icons-left>
|
||||
<input
|
||||
class="input is-info"
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
name="search"
|
||||
value={@query}
|
||||
/>
|
||||
<span class="icon is-left">
|
||||
<Lucideicons.search aria-hidden="true" />
|
||||
</span>
|
||||
</.control>
|
||||
</.panel_block>
|
||||
<.link patch={~p"/users/settings"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<Lucideicons.user_cog aria-hidden="true" />
|
||||
</span>
|
||||
<span class="mt-2 ml-2">Account settings</span>
|
||||
</.link>
|
||||
<.link patch={~p"/services"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<Lucideicons.puzzle aria-hidden="true" />
|
||||
</span>
|
||||
<div class="mt-2 ml-2">System services</div>
|
||||
</.link>
|
||||
<.link patch={~p"/packages"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<Lucideicons.package aria-hidden="true" />
|
||||
</span>
|
||||
<span class="mt-2 ml-2">System packages</span>
|
||||
</.link>
|
||||
<.link patch={~p"/updates"} class="panel-block pt-1">
|
||||
<span class="panel-icon">
|
||||
<Lucideicons.hard_drive_download aria-hidden="true" />
|
||||
</span>
|
||||
<span class="mt-2 ml-2">System software updates</span>
|
||||
</.link>
|
||||
</.panel>
|
||||
</.section>
|
||||
"""
|
||||
end
|
||||
|
||||
def mount(_params, _session, socket) do
|
||||
socket = assign(socket, query: "")
|
||||
{:ok, socket}
|
||||
end
|
||||
end
|
||||
|
|
|
|||
Loading…
Reference in a new issue