Add models and migrations

This commit is contained in:
Mirai Kumiko 2025-06-06 16:07:04 +02:00
parent 182523d36d
commit 9e542bc790
Signed by: miraikumiko
GPG key ID: 3F178B1B5E0CB278
33 changed files with 597 additions and 125 deletions

View file

@ -10,8 +10,11 @@
</div>
<div class="relative border border-gray-300 shadow-md mt-5 rounded-t-xl overflow-hidden">
<div class="relative w-full aspect-[3/1]">
<img src={~p"/images/banner.jpg"} class="w-full h-full object-cover" />
<img src={~p"/images/avatar.jpg"} class="absolute left-4 bottom-0 translate-y-1/2 rounded-full border-4 border-white w-[8.33vw] h-[8.33vw] min-w-[80px] min-h-[80px] max-w-[160px] max-h-[160px]"/>
<img src={"/files/#{@user.banner}"} class="w-full h-full object-cover" />
<div class="absolute inset-0 flex items-end justify-between px-4 pb-2 pointer-events-none">
<img src={"/files/#{@user.avatar}"} class="translate-y-1/2 rounded-full border-4 border-white w-[8.33vw] h-[8.33vw] min-w-[80px] min-h-[80px] max-w-[160px] max-h-[160px] pointer-events-auto"/>
<button class="px-8 py-2 rounded-full text-sm font-semibold border transition bg-black text-white border-black hover:bg-gray-900 pointer-events-auto">Follow</button>
</div>
</div>
<div class="mt-[4.5vw] px-4 flex flex-col">
<span class="text-xl font-bold">{@user.realname}</span>
@ -26,14 +29,12 @@
</dt>
<dd><%= @user.location %></dd>
<% end %>
<%= if @user.birthday do %>
<dt class="flex items-center gap-2">
<.icon name="hero-cake" class="mt-0.5 h-5 w-5 flex-none" />
</dt>
<dd><%= format_birthdate(@user.birthday) %></dd>
<% end %>
<dt class="flex items-center gap-2">
<.icon name="hero-calendar" class="mt-0.5 h-5 w-5 flex-none" />
</dt>
@ -59,12 +60,54 @@
<a href={~p"/@#{@user.username}/followers"}>31 Followers</a>
</div>
</div>
<div class="flex justify-between px-20 py-2 mt-5 border border-gray-300">
<div class="flex justify-between px-20 py-2 mt-5 border-y border-gray-300">
<a href={~p"/@#{@user.username}/featured"}>Featured</a>
<a href={~p"/@#{@user.username}"}>Posts</a>
<a href={~p"/@#{@user.username}/with_replies"}>Posts and replies</a>
<a href={~p"/@#{@user.username}/media"}>Media</a>
</div>
<div>
<%= for note <- @notes do %>
<div class="p-4 border-b border-gray-300">
<div class="flex items-start space-x-4">
<img src={"/files/#{@user.avatar}"} class="rounded-full w-[58px] h-[58px]"/>
<div class="flex-1">
<div class="flex justify-between items-start">
<div class="flex items-center space-x-2">
<span class="font-semibold text-gray-900 text-sm">
<%= @user.realname %>
</span>
<span class="text-gray-500 text-sm">
@<%= @user.username %>@<%= @domain %>
</span>
</div>
<div class="flex items-center space-x-2 text-sm text-gray-500">
<%= case note.visibility do %>
<% :public -> %>
<.icon name="hero-globe-americas" class="h-5 w-5" />
<% :unlisted -> %>
<.icon name="hero-moon" class="h-5 w-5" />
<% :followers -> %>
<.icon name="hero-lock-closed" class="h-5 w-5" />
<% :private -> %>
<.icon name="hero-at-symbol" class="h-5 w-5" />
<% end %>
<span><%= format_note_datetime_diff(note.inserted_at) %></span>
</div>
</div>
<div class="text-gray-800">
<p><%= note.content %></p>
</div>
<div class="flex gap-10 mt-4">
<button><.icon name="hero-chat-bubble-left" class="h-5 w-5" /></button>
<button><.icon name="hero-arrow-path-rounded-square" class="h-5 w-5" /></button>
<button><.icon name="hero-plus" class="h-5 w-5" /></button>
</div>
</div>
</div>
</div>
<% end %>
</div>
</div>
<div class="flex flex-col items-center mt-5 gap-5">
<div class="text-sm rounded-xl border border-gray-300 p-4 w-[90%] h-[300px]">