Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

declarative assigns updates and navbar fix #14

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

declarative assigns updates and navbar fix #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/petal_boilerplate_web/live/page_live.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ defmodule PetalBoilerplateWeb.PageLive do
def render(assigns) do
~H"""
<div class="h-screen overflow-auto dark:bg-gray-900">
<nav class="sticky top-0 flex items-center justify-between w-full h-16 bg-white dark:bg-gray-900">
<nav class="sticky top-0 z-30 flex items-center justify-between w-full h-16 bg-white dark:bg-gray-900">
<div class="flex ml-3 sm:ml-10">
<a class="inline-flex hover:opacity-90" href="/">
<svg
Expand Down
86 changes: 52 additions & 34 deletions lib/petal_boilerplate_web/templates/page/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="h-screen overflow-auto dark:bg-gray-900">
<nav class="sticky top-0 flex items-center justify-between w-full h-16 bg-white dark:bg-gray-900">
<nav class="sticky top-0 z-30 flex items-center justify-between w-full h-16 bg-white dark:bg-gray-900">
<div class="flex ml-3 sm:ml-10">
<a class="inline-flex hover:opacity-90" href="/">
<svg
Expand Down Expand Up @@ -265,28 +265,38 @@
<.form_label label="Disabled" />
</div>
<div class="flex flex-wrap items-end gap-2 mt-2">
<.button disabled size="xs" to="/" label="Disabled xs" />
<.button disabled size="sm" to="/" label="Disabled sm" />
<.button disabled size="md" to="/" label="Disabled md" />
<.button disabled size="lg" to="/" label="Disabled lg" />
<.button disabled size="xl" to="/" label="Disabled xl" />
<.button disabled size="xs" to="#" label="Disabled xs" />
<.button disabled size="sm" to="#" label="Disabled sm" />
<.button disabled size="md" to="#" label="Disabled md" />
<.button disabled size="lg" to="#" label="Disabled lg" />
<.button disabled size="xl" to="#" label="Disabled xl" />
</div>
<div class="mt-5">
<.form_label label="Loading" />
</div>
<div class="flex flex-wrap items-end gap-2 mt-2">
<.button loading size="xs" label="Loading xs" />
<.button loading size="sm" label="Loading sm" />
<.button loading size="md" label="Loading md" />
<.button loading size="lg" label="Loading lg" />
<.button loading size="xl" label="Loading xl" />
<.button loading size="xs">
Loading xs
</.button>
<.button loading size="sm">
Loading sm
</.button>
<.button loading size="md">
Loading md
</.button>
<.button loading size="lg">
Loading lg
</.button>
<.button loading size="xl">
Loading xl
</.button>
</div>
</div>

<div class="mt-10">
<.h5 label="Button with icon" />
<div class="flex flex-wrap items-end gap-2">
<.button icon link_type="a" to="/">
<.button with_icon link_type="a" to="/">
<Heroicons.home solid class="w-5 h-5" /> With icon
</.button>
</div>
Expand Down Expand Up @@ -420,13 +430,13 @@
</div>
<.h5 label="With icon" class="mt-10" />
<div class="flex flex-wrap items-end gap-2">
<.badge color="gray" variant="light" icon label="SM" size="sm">
<.badge variant="outline" with_icon label="SM" size="sm">
<Heroicons.clock solid class="w-3 h-3 pb-[0.05rem]" /> 2 hours ago
</.badge>
<.badge color="secondary" variant="dark" label="md" size="md">
<.badge color="secondary" with_icon variant="dark" label="md" size="md">
<Heroicons.envelope solid class="w-4 h-4 mr-1 pb-[0.05rem]" /> New messages
</.badge>
<.badge color="success" variant="outline" label="lg" size="lg">
<.badge color="success" with_icon variant="outline" label="lg" size="lg">
<Heroicons.wifi solid class="w-5 h-5 mr-1 pb-[0.025rem]" /> Online now
</.badge>
</div>
Expand All @@ -436,13 +446,19 @@
<.h2 underline label="Alerts" />
<.h5 label="Default" class="mt-10" />
<div class="flex items-start">
<.alert color="info" label="This is an info state" />
<.alert color="info">
This is an info state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert color="success" label="This is a success state" />
<.alert color="success">
This is a success state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert color="warning" label="This is a warning state" />
<.alert color="warning">
This is a warning state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert color="danger">
Expand All @@ -456,13 +472,19 @@
</div>
<.h5 label="With state icon" class="mt-10" />
<div class="flex items-start">
<.alert with_icon color="info" label="This is an info state" />
<.alert with_icon color="info">
This is an info state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert with_icon color="success" label="This is a success state" />
<.alert with_icon color="success">
This is a success state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert with_icon color="warning" label="This is a warning state" />
<.alert with_icon color="warning">
This is a warning state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert with_icon color="danger">
Expand All @@ -476,28 +498,24 @@
</div>
<.h5 label="Dismissable" class="mt-10" />
<div class="flex items-start">
<.alert
with_icon
close_button_properties={["phx-click": "do_something"]}
color="info"
label="This is an info state"
/>
<.alert with_icon close_button_properties={["phx-click": "do_something"]} color="info">
This is an info state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert
with_icon
close_button_properties={["phx-click": "do_something"]}
color="success"
label="This is a success state"
/>
<.alert with_icon close_button_properties={["phx-click": "do_something"]} color="success">
This is a success state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert
with_icon
close_button_properties={["phx-click": "do_something"]}
color="warning"
label="This is a warning state"
/>
>
This is a warning state
</.alert>
</div>
<div class="flex items-start mt-4">
<.alert with_icon close_button_properties={["phx-click": "do_something"]} color="danger">
Expand Down