ro/postland
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Visually indicate that avatar is editable

Browse source
This commit is contained in:
Ro 2024-10-26 17:33:04 -05:00
parent b83d818ce5
commit 2549a8db2a
Signed by: ro
GPG key ID: 5B5AD5A568CDABF9
1 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
lib/postland_web/live/profile_live.ex
View file

@ -7,14 +7,25 @@ defmodule PostlandWeb.ProfileLive do
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div class="flex items-start space-x-4"> <div class="flex items-start space-x-4">
<div> <div class="flex-shrink-0 relative">
<img <img
class="h-16 w-16 rounded-full drop-shadow-lg" class="h-16 w-16 rounded-full drop-shadow-lg"
src={@account.icon || url(~p"/images/avatar.png")} src={@account.icon || url(~p"/images/avatar.png")}
alt="" alt=""
/> />
<div
:if={@editing}
class="absolute top-0 left-0 h-16 w-16 rounded-full backdrop-brightness-50 flex justify-center items-center"
>
<.icon name="hero-pencil" class="text-violet-100" />
</div>
<.form for={@form} phx-submit="avatar" phx-change="avatar"> <.form for={@form} phx-submit="avatar" phx-change="avatar">
<.live_file_input :if={@editing} upload={@uploads.avatar} /> <.live_file_input
:if={@editing}
id="avatar-upload"
class="opacity-0 absolute top-0 left-0 bottom-0 right-0"
upload={@uploads.avatar}
/>
</.form> </.form>
</div> </div>
<div class="flex flex-col bg-white rounded-lg shadow container"> <div class="flex flex-col bg-white rounded-lg shadow container">