diff --git a/apps/phx_wc_storybook_web/assets/css/app.css b/apps/phx_wc_storybook_web/assets/css/app.css index 4f0db667..f701d02f 100644 --- a/apps/phx_wc_storybook_web/assets/css/app.css +++ b/apps/phx_wc_storybook_web/assets/css/app.css @@ -27,6 +27,21 @@ ); } +.phx-wc-hero-text { + text-shadow: #fc0 1px 0 10px; + transition: all 1s; + animation: 4s linear 1s infinite running bg-rainbow-turn; +} +.phx-wc-hero-p-text { + text-shadow: 1px -2px 2px #222a30; +} +@keyframes bg-rainbow-turn { + 0% { background-image: linear-gradient(to top left, #fac2b0, #b4e3da); } + 25% { background-image: linear-gradient(to top right, #fac2b0, #b4e3da); } + 50% { background-image: linear-gradient(to bottom right, #fac2b0, #b4e3da); } + 75% { background-image: linear-gradient(to bottom left, #fac2b0, #b4e3da); } +} + app-bar { --btn-link: rgb(238, 249, 238); } diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex index 70dd7416..c40dd272 100644 --- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex +++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/components/layouts/root.html.heex @@ -11,9 +11,11 @@ - <%= @inner_content %> diff --git a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex index 438406bb..12825b18 100644 --- a/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex +++ b/apps/phx_wc_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex @@ -1,9 +1,9 @@ <.wc_page_header class={[ - "bg-gradient-to-br from-cyan-500 to-blue-500", + "bg-gradient-to-br from-[#ff6f61] to-[#639]", "text-slate-200 h-[680px] py-6" ]} - nav_class={["bg-slate-50 text-sky-700 shadow"]} + nav_class={["bg-gradient-to-br from-[#ff6f61] to-[#639] text-slate-200 shadow"]} > <:menu to={~p"/"} class="border-b-2 border-slate-50">Home <:menu to={~p"/hook"} class="opacity-60">Hook @@ -18,17 +18,21 @@

Phoenix WebComponent

Bring web components to Phoneix

+ <.link href="/#hook" class="my-4 px-4 py-2 text-4xl bg-rose-400 rounded shadow-md hover:shadow-2xl"> + See More +
+
-

Live Component Mount Hook - PhxWCHook

-

- This Hook binding custom element's custom events to phoenix live events. +

Component Mount Hook - PhxWCHook

+

+ Binding custom element's custom events to phoenix live events.

-

- This Hook also binding phoenix live events to custom element's custom action. +

+ Binding phoenix live events to custom element's custom action.

@@ -58,15 +63,21 @@ "border-b-2 border-slate-300" ]}>
-
-

Material Design Icons

-

+

+

+ <.wc_mdi name="material-design" class="w-12 h-12" /> + Material Design Icons +

+

Includs 7000+ Material Design Commmunity Icons.

-
-

Bootstrap Icons

-

+

+

+ <.wc_bsi name="bootstrap" class="w-12 h-12" /> + Bootstrap Icons +

+

Includs 1900+ Bootstrap Icons.

@@ -79,10 +90,58 @@ ]}>
-

Other Components

-

- Documents in storybook -

+

Components

+
+ <.link href="/storybook">Component Storybook +
|
+ <.link href="https://hexdocs.pm/phoenix_webcomponent/">HEX Document +
+
+ <.link class="flex flex-row items-center text-2xl text-blue-300 gap-4"> + <.wc_mdi name={"page-layout-header"} class="w-4 h-4" /> + PageHeader + + <.link class="flex flex-row items-center text-2xl text-blue-300 gap-4"> + <.wc_mdi name={"page-layout-footer"} class="w-4 h-4" /> + PageFooter + + <.link class="flex flex-row items-center text-2xl text-blue-300 gap-4"> + <.wc_mdi name={"page-layout-header"} class="w-4 h-4" /> + Appbar + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="actionbar" href="/storybook/components/actionbar"> + <.wc_bsi name={"tools"} class="w-4 h-4" /> + Actionbar + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="breadcrumb" href="/storybook/components/breadcrumb"> + <.wc_bsi name={"segmented-nav"} class="w-4 h-4" /> + Breadcrumb + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="card" href="/storybook/components/card"> + <.wc_bsi name={"card-text"} class="w-4 h-4" /> + Card + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="left_menu" href="/storybook/components/left_menu"> + <.wc_bsi name={"layout-sidebar"} class="w-4 h-4" /> + Left Menu + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="markdown" href="/storybook/components/markdown"> + <.wc_bsi name={"markdown"} class="w-4 h-4" /> + Markdown + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="modal" href="/storybook/components/modal"> + <.wc_bsi name={"chat-square"} class="w-4 h-4" /> + Modal + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="pagination" href="/storybook/components/pagination"> + <.wc_mdi name={"book-open-page-variant-outline"} class="w-4 h-4" /> + Pagination + + <.link class="flex flex-row items-center text-2xl text-blue-500 gap-4" id="table" href="/storybook/components/table"> + <.wc_mdi name={"table"} class="w-4 h-4" /> + Table + +