fix: Fix page header and page footer responsive design.

gsmlg-dev · Apr 22, 2023 · 5bb5ed6 · 5bb5ed6
1 parent 28b247e
commit 5bb5ed6
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 20 deletions.
diff --git a/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex b/apps/duskmoon_storybook_web/lib/phx_wc_storybook_web/controllers/page_html/page.html.heex
@@ -19,19 +19,19 @@
   </:user_profile>
 
   <h1 class={[
-    "text-center text-8xl font-bold text-slate-300 select-none",
+    "text-center text-4xl md:text-8xl font-bold text-slate-300 select-none",
     "bg-clip-text bg-gradient-to-tl from-[#fac2b0] to-[#b4e3da]",
     "darkmoon-hero-text"
   ]}>
     Duskmoon UI
   </h1>
   <p class={[
-    "text-center text-4xl mx-auto my-8 select-none",
+    "text-center text-2xl md:text-4xl mx-auto my-8 select-none",
     "darkmoon-hero-p-text"
   ]}>
     Duskmoon UI for Phoenix Framework
   </p>
-  <.link href="/#hook" class="my-4 px-6 py-2 text-2xl bg-rose-400 rounded-lg shadow-md hover:shadow-2xl">
+  <.link href="/#hook" class="my-2 md:my-4 px-6 py-2 text-xl md:text-2xl bg-rose-400 rounded-lg shadow-md hover:shadow-2xl">
     Learn More
   </.link>
 </.dm_page_header>
@@ -42,7 +42,7 @@
   "border-b-2 border-slate-300"
 ]}>
   <a name="hook" />
-  <div class="container mx-auto flex flex-row justify-around">
+  <div class="container mx-auto px-4 flex flex-row justify-around">
     <div class="flex flex-col justify-center">
       <h3 class="font-bold text-4xl my-4">Component Mount Hook - <i class="text-rose-500">WebComponentHook</i></h3>
       <p class="my-2 text-lg text-violet-500	">
@@ -53,7 +53,7 @@
       </p>
     </div>
     <div class="flex justify-center items-center">
-      <.dm_mdi name="webhook" class="w-72 h-72" />
+      <.dm_mdi name="webhook" class="w-full aspect-square" />
     </div>
   </div>
 </div>
@@ -63,8 +63,8 @@
   "flex flex-col",
   "border-b-2 border-slate-300"
 ]}>
-  <div class="container mx-auto flex flex-row justify-around">
-    <div class="w-full py-32 flex flex-col justify-center items-center border-r-2 border-slate-300 text-blue-500">
+  <div class="flex flex-col lg:flex-row justify-around">
+    <div class="w-full px-4 py-16 md:py-32 flex flex-col justify-center items-center border-b-2 lg:border-b-0 lg:border-r-2 border-slate-300 text-blue-500">
       <h3 class="font-bold text-4xl my-4 flex flex-row gap-4 items-center">
         <.dm_mdi name="material-design" class="w-12 h-12" />
         Material Design Icons
@@ -73,7 +73,7 @@
         Includs 7000+ Material Design Commmunity Icons.
       </p>
     </div>
-    <div class="w-full py-32 flex flex-col justify-center items-center text-violet-900">
+    <div class="w-full px-4 py-16 md:py-32 flex flex-col justify-center items-center text-violet-900">
       <h3 class="font-bold text-4xl my-4 flex flex-row gap-4 items-center">
         <.dm_bsi name="bootstrap" class="w-12 h-12" />
         Bootstrap Icons

diff --git a/apps/phoenix_duskmoon/assets/tailwind.config.js b/apps/phoenix_duskmoon/assets/tailwind.config.js
@@ -17,6 +17,7 @@ module.exports = {
     plugin(({addVariant}) => addVariant('phx-no-feedback', ['&.phx-no-feedback', '.phx-no-feedback &'])),
     plugin(({addVariant}) => addVariant('phx-click-loading', ['&.phx-click-loading', '.phx-click-loading &'])),
     plugin(({addVariant}) => addVariant('phx-submit-loading', ['&.phx-submit-loading', '.phx-submit-loading &'])),
-    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &']))
+    plugin(({addVariant}) => addVariant('phx-change-loading', ['&.phx-change-loading', '.phx-change-loading &'])),
+    plugin(({addVariant}) => addVariant('hocus', ['&:hover', '&:focus'])),
   ]
 }
diff --git a/apps/phoenix_duskmoon/lib/phoenix_duskmoon/page_footer.ex b/apps/phoenix_duskmoon/lib/phoenix_duskmoon/page_footer.ex
@@ -70,12 +70,11 @@ defmodule PhoenixDuskmoon.PageFooter do
       @class
     ]}>
       <div class={[
-        "container mx-auto",
+        "container mx-auto px-4",
         "flex flex-col",
       ]}>
         <div class={[
-          "flex flex-row",
-          "justify-between items-start",
+          "grid grid-cols-2 md:grid-cols-3 gap-4",
           "w-full"
         ]}>
           <div

diff --git a/apps/phoenix_duskmoon/lib/phoenix_duskmoon/page_header.ex b/apps/phoenix_duskmoon/lib/phoenix_duskmoon/page_header.ex
@@ -65,7 +65,9 @@ defmodule PhoenixDuskmoon.PageHeader do
     doc: """
     Appbar right side user_profile.
     """
-  )
+  ) do
+    attr(:class, :string)
+  end
 
   def dm_page_header(assigns) do
     ~H"""
@@ -79,7 +81,12 @@ defmodule PhoenixDuskmoon.PageHeader do
         @nav_class
       ]}
     >
-      <div class={["container mx-auto", "flex flex-row justify-between items-center"]}>
+      <div
+        class={[
+          "container mx-auto",
+          "hidden lg:flex flex-row justify-between items-center"
+        ]}
+      >
         <div class="flex flex-row gap-4">
           <a
             :for={menu <- @menu}
@@ -94,8 +101,54 @@ defmodule PhoenixDuskmoon.PageHeader do
             <%= render_slot(menu) %>
           </a>
         </div>
-        <div class="flex">
-          <%= render_slot(@user_profile) %>
+        <div
+            :for={user_profile <- @user_profile}
+            class={["flex", Map.get(user_profile, :class, "")]}
+          >
+            <%= render_slot(user_profile) %>
+          </div>
+      </div>
+      <div
+        class={[
+          "container px-8 h-full relative",
+          "flex lg:hidden flex-col justify-center items-center"
+        ]}
+      >
+        <label for="mobile-menu">
+          <PhoenixDuskmoon.Icons.dm_mdi name="menu" class="w-8 h-8" />
+        </label>
+        <input class="hidden peer" id="mobile-menu" type="checkbox" />
+        <div
+          class={[
+            "hidden peer-checked:flex flex-col items-center",
+            "absolute top-12 left-0 right-0",
+            @nav_class
+          ]}
+        >
+          <a
+            :for={menu <- @menu}
+            class={[
+              "py-2 px-12 w-full",
+              "text-lg font-semibold leading-6 text-center",
+              "hover:opacity-50",
+              Map.get(menu, :class, "")
+            ]}
+            href={Map.get(menu, :to, false)}
+          >
+            <%= render_slot(menu) %>
+          </a>
+          <hr />
+          <div
+            :for={user_profile <- @user_profile}
+            class={[
+              "py-2 px-12 w-full",
+              "text-lg font-semibold leading-6",
+              "hover:opacity-50 flex justify-center",
+              Map.get(user_profile, :class, "")
+            ]}
+          >
+            <%= render_slot(user_profile) %>
+          </div>
         </div>
       </div>
     </nav>
@@ -108,8 +161,13 @@ defmodule PhoenixDuskmoon.PageHeader do
       ]}
     >
       <nav class={["w-full h-12", "flex items-center flex-none"]}>
-        <div class={["container mx-auto", "flex flex-row justify-between items-center"]}>
-          <div class="flex flex-row gap-4">
+        <div
+          class={[
+            "container mx-auto",
+            "hidden lg:flex flex-row justify-between items-center"
+          ]}
+        >
+          <div class={["flex flex-row gap-4"]}>
             <a
               :for={menu <- @menu}
               class={[
@@ -123,8 +181,53 @@ defmodule PhoenixDuskmoon.PageHeader do
               <%= render_slot(menu) %>
             </a>
           </div>
-          <div class="flex">
-            <%= render_slot(@user_profile) %>
+          <div
+            :for={user_profile <- @user_profile}
+            class={["flex", Map.get(user_profile, :class, "")]}
+          >
+            <%= render_slot(user_profile) %>
+          </div>
+        </div>
+        <div
+          class={[
+            "container px-8 relative",
+            "flex lg:hidden flex-row justify-between items-center"
+          ]}
+        >
+          <label for="dm-mobile-menu-control">
+            <PhoenixDuskmoon.Icons.dm_mdi name="menu" class="w-8 h-8" />
+          </label>
+          <input class="hidden peer" id="dm-mobile-menu-control" type="checkbox" />
+          <div
+            class={[
+              "hidden peer-checked:flex flex-col items-start",
+              "absolute top-12 left-0 right-0",
+              @class
+            ]}
+          >
+            <a
+              :for={menu <- @menu}
+              class={[
+                "py-2 px-12 w-full",
+                "text-lg font-semibold leading-6",
+                "hover:opacity-50",
+                Map.get(menu, :class, "")
+              ]}
+              href={Map.get(menu, :to, false)}
+            >
+              <%= render_slot(menu) %>
+            </a>
+            <div
+              :for={user_profile <- @user_profile}
+              class={[
+                "py-2 px-12 w-full",
+                "text-lg font-semibold leading-6",
+                "hover:opacity-50",
+                Map.get(user_profile, :class, "")
+              ]}
+            >
+              <%= render_slot(user_profile) %>
+            </div>
           </div>
         </div>
       </nav>