Feat: Improve html

cesium · Sep 24, 2024 · 0bab33d · 0bab33d
1 parent 90093c9
commit 0bab33d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 15 deletions.
diff --git a/lib/atomic_web/live/profile_live/form_component.ex b/lib/atomic_web/live/profile_live/form_component.ex
@@ -10,25 +10,33 @@ defmodule AtomicWeb.ProfileLive.FormComponent do
     ~H"""
     <div class="px-4 pt-4">
       <.form :let={f} for={@changeset} id="profile-form" phx-target={@myself} phx-change="validate" phx-submit="save">
-        <!-- Section for profile picture upload -->
-        <div class="mb-6 flex justify-center">
-          <div class="flex flex-col items-center pr-4">
+        <!-- Grid layout for profile picture, name, phone number, email, and social media fields -->
+        <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+          <!-- Section for profile picture upload -->
+          <div class="flex flex-col items-center">
             <%= label(f, :name, "Profile Picture", class: "mt-3 mb-1 text-sm font-medium text-gray-700") %>
-            <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} />
+            <!-- Profile picture upload (with square shape) -->
+            <div class="rounded-lg">
+              <.live_component module={ImageUploader} id="uploader-profile-picture" uploads={@uploads} target={@myself} />
+            </div>
           </div>
-          <!-- Grid layout for social media and contact fields -->
-          <div class="flex flex-col gap-y-8">
-            <div class="grid w-full gap-x-4 sm:grid-cols-1 md:grid-cols-4 lg:grid-cols-4">
+
+          <div class="flex flex-col gap-6">
+            <!-- Name, phone number, email fields -->
+            <div class="grid grid-cols-1 gap-4">
+              <.field field={f[:name]} type="text" placeholder="Name" class="w-full" />
+              <.field field={f[:phone_number]} type="text" placeholder="Phone Number" class="w-full" />
+              <.field field={f[:email]} type="email" placeholder="Email" class="w-full" />
+            </div>
+            <!-- Social media fields positioned below name, phone, and email -->
+            <div class="grid w-full gap-x-4 gap-y-4 sm:grid-cols-1 md:grid-cols-4">
               <.inputs_for :let={socials_form} field={f[:socials]}>
                 <.field field={socials_form[:instagram]} type="text" placeholder="Instagram" class="w-full" />
                 <.field field={socials_form[:facebook]} type="text" placeholder="Facebook" class="w-full" />
                 <.field field={socials_form[:x]} type="text" placeholder="X" class="w-full" />
                 <.field field={socials_form[:tiktok]} type="text" placeholder="TikTok" class="w-full" />
               </.inputs_for>
             </div>
-            <.field field={f[:name]} type="text" placeholder="Name" class="w-full" />
-            <.field field={f[:phone_number]} type="text" placeholder="Phone Number" class="w-full" />
-            <.field field={f[:email]} type="email" placeholder="Email" class="w-full" />
           </div>
         </div>
         <!-- Submit button -->

diff --git a/lib/atomic_web/live/profile_live/show.html.heex b/lib/atomic_web/live/profile_live/show.html.heex
@@ -8,7 +8,7 @@
       <!-- Profile Picture -->
       <div class="relative -mt-16 flex-shrink-0">
         <div class="relative">
-          <.avatar name={@user.name} color={:light_gray} class="h-36 w-36 text-4xl rounded-full border-4 border-white" type={:user} src={Uploaders.ProfilePicture.url({@user.profile_picture, @user}, :original)} />
+          <.avatar name={@user.name} color={:light_gray} class="h-36 w-36 text-4xl rounded-full border-4 border-white" type={:user} src={Uploaders.ProfilePicture.url({@user.profile_picture, @user}, :originaQl)} />
         </div>
       </div>
       <div class="flex-1 pl-6">
@@ -36,25 +36,25 @@
             <%= if @user.socials.tiktok do %>
               <div class="flex flex-row items-center gap-x-1">
                 <img src="/images/tiktok.svg" class="h-5 w-5" alt="TikTok" />
-                <.link class="text-blue-500" href={"https://tiktok.com/" <> @user.socials.tiktok}>Tik Tok</.link>
+                <.link class="text-blue-500" target="_blank" href={"https://tiktok.com/" <> @user.socials.tiktok}>Tik Tok</.link>
               </div>
             <% end %>
             <%= if @user.socials.instagram do %>
               <div class="flex flex-row items-center gap-x-1">
                 <img src="/images/instagram.svg" class="h-5 w-5" alt="Instagram" />
-                <.link class="text-blue-500" href={"https://instagram.com/" <> @user.socials.instagram}>Instagram</.link>
+                <.link class="text-blue-500" target="_blank" href={"https://instagram.com/" <> @user.socials.instagram}>Instagram</.link>
               </div>
             <% end %>
             <%= if @user.socials.facebook do %>
               <div class="flex flex-row items-center gap-x-1">
                 <img src="/images/facebook.svg" class="h-5 w-5" alt="Facebook" />
-                <.link class="text-blue-500" href={"https://facebook.com/" <> @user.socials.facebook}>Facebook</.link>
+                <.link class="text-blue-500" target="_blank" href={"https://facebook.com/" <> @user.socials.facebook}>Facebook</.link>
               </div>
             <% end %>
             <%= if @user.socials.x do %>
               <div class="flex flex-row items-center gap-x-1">
                 <img src="/images/x.svg" class="h-5 w-5" alt="X" />
-                <.link class="text-blue-500" href={"https://x.com/" <> @user.socials.x}>X</.link>
+                <.link class="text-blue-500" target="_blank" href={"https://x.com/" <> @user.socials.x}>X</.link>
               </div>
             <% end %>
           </div>