cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle records list to work better on mobile

Browse Source
This commit is contained in:
Claudio Ortolina
2024-09-27 10:25:09 +01:00
parent ae45ab44df
commit 92de18e493
2 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/components/core_components.ex
+3 -3
View File
@@ -473,8 +473,8 @@ defmodule MusicLibraryWeb.CoreComponents do
end end
~H""" ~H"""
<div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0"> <div class="px-4 sm:px-0">
<table class="w-[40rem] mt-11 sm:w-full"> <table class="md:w-full mt-11">
<thead class="text-sm text-left leading-6 text-zinc-500"> <thead class="text-sm text-left leading-6 text-zinc-500">
<tr> <tr>
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th> <th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>
@@ -506,7 +506,7 @@ defmodule MusicLibraryWeb.CoreComponents do
<span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" /> <span class="absolute -inset-y-px -right-4 left-0 group-hover:bg-zinc-50 sm:rounded-r-xl" />
<span <span
:for={action <- @action} :for={action <- @action}
class="relative ml-4 font-semibold leading-6 text-zinc-900 hover:text-zinc-700" class="relative ml-4 max-sm:ml-2 max-sm:text-sm font-semibold leading-6 text-zinc-900 hover:text-zinc-700"
> >
<%= render_slot(action, @row_item.(row)) %> <%= render_slot(action, @row_item.(row)) %>
</span> </span>
lib/music_library_web/live/record_live/index.html.heex
+5 -5
View File
@@ -24,13 +24,13 @@
row_click={fn {_id, record} -> JS.navigate(~p"/records/#{record}") end} row_click={fn {_id, record} -> JS.navigate(~p"/records/#{record}") end}
> >
<:col :let={{_id, record}} label="Image"> <:col :let={{_id, record}} label="Image">
<img class="max-w-16" src={~p"/images/#{record.id}"} alt={record.title} /> <img class="max-w-16 rounded-lg shadow" src={~p"/images/#{record.id}"} alt={record.title} />
</:col> </:col>
<:col :let={{_id, record}} label="Artists"> <:col :let={{_id, record}} label="Record">
<%= Enum.map(record.artists, fn a -> a.name end) %> <p class="text-sm max-sm:text-xs"><%= Enum.map(record.artists, fn a -> a.name end) %></p>
<p class="text-base font-semibold text-wrap max-sm:text-xs"><%= record.title %></p>
<p class="text-sm max-sm:text-xs"><%= record.year %></p>
</:col> </:col>
<:col :let={{_id, record}} label="Title"><%= record.title %></:col>
<:col :let={{_id, record}} label="Year"><%= record.year %></:col>
<:action :let={{_id, record}}> <:action :let={{_id, record}}>
<.link href={musicbrainz_url(record)} target=".blank">MB</.link> <.link href={musicbrainz_url(record)} target=".blank">MB</.link>
</:action> </:action>