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

Remove redundant markup

Browse Source
This commit is contained in:
Claudio Ortolina
2026-02-07 13:48:05 +00:00
parent 29dc57abdb
commit 98a42a3762
2 changed files with 165 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/collection_live/index.html.heex
+85 -87
View File
@@ -1,102 +1,100 @@
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} />
<.button_group>
<.button
variant="solid"
size="sm"
patch={~p"/collection/import"}
>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Add")}
</.button>
<.button
variant="solid"
size="sm"
patch={~p"/collection/scan"}
>
<.barcode_icon class="icon fill-current" />
{gettext("Scan")}
</.button>
</.button_group>
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-8">
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} />
<.button_group>
<.button
patch={order_path(@record_list_params, :purchase)}
variant="solid"
size="sm"
class={[
@record_list_params.order == :purchase && "bg-zinc-100! dark:bg-zinc-700!"
]}
patch={~p"/collection/import"}
>
<.icon
name="hero-banknotes-solid"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
<span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Add")}
</.button>
<.button
patch={order_path(@record_list_params, :alphabetical)}
variant="solid"
size="sm"
class={[
@record_list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"
]}
patch={~p"/collection/scan"}
>
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
</.button>
<.button
patch={order_path(@record_list_params, :release)}
size="sm"
class={[
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
</.button>
</.button_group>
<.button_group>
<.button
phx-click="set_display"
phx-value-mode="grid"
size="sm"
class={[
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon
name="hero-squares-2x2"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
<span class="sr-only sm:not-sr-only">
{gettext("Grid")}
</span>
</.button>
<.button
phx-click="set_display"
phx-value-mode="list"
size="sm"
class={[
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">
{gettext("List")}
</span>
<.barcode_icon class="icon fill-current" />
{gettext("Scan")}
</.button>
</.button_group>
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-8">
<.button_group>
<.button
patch={order_path(@record_list_params, :purchase)}
size="sm"
class={[
@record_list_params.order == :purchase && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon
name="hero-banknotes-solid"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
<span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
</.button>
<.button
patch={order_path(@record_list_params, :alphabetical)}
size="sm"
class={[
@record_list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
</.button>
<.button
patch={order_path(@record_list_params, :release)}
size="sm"
class={[
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
</.button>
</.button_group>
<.button_group>
<.button
phx-click="set_display"
phx-value-mode="grid"
size="sm"
class={[
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon
name="hero-squares-2x2"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
<span class="sr-only sm:not-sr-only">
{gettext("Grid")}
</span>
</.button>
<.button
phx-click="set_display"
phx-value-mode="list"
size="sm"
class={[
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">
{gettext("List")}
</span>
</.button>
</.button_group>
</div>
<.record_grid
lib/music_library_web/live/wishlist_live/index.html.heex
+80 -82
View File
@@ -1,87 +1,85 @@
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
<div>
<header class="gap-6 mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} />
<.button
variant="solid"
size="sm"
patch={~p"/wishlist/import"}
>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Add")}
</.button>
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-8">
<.button_group>
<.button
patch={order_path(@record_list_params, :insertion)}
size="sm"
class={[
@record_list_params.order == :insertion && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("Insertion")}</span>
</.button>
<.button
patch={order_path(@record_list_params, :alphabetical)}
size="sm"
class={[
@record_list_params.order == :alphabetical && "bg-zinc-100 dark:bg-zinc-700!"
]}
>
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
</.button>
<.button
patch={order_path(@record_list_params, :release)}
size="sm"
class={[
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
</.button>
</.button_group>
<.button_group>
<.button
phx-click="set_display"
phx-value-mode="grid"
size="sm"
class={[
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon
name="hero-squares-2x2"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
<span class="sr-only sm:not-sr-only">
{gettext("Grid")}
</span>
</.button>
<.button
phx-click="set_display"
phx-value-mode="list"
size="sm"
class={[
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">
{gettext("List")}
</span>
</.button>
</.button_group>
<header class="mb-2">
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
<.search_form query={@record_list_params.query} />
<.button
variant="solid"
size="sm"
patch={~p"/wishlist/import"}
>
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
{gettext("Add")}
</.button>
</div>
</header>
<div class="flex items-end justify-between gap-6 mt-8">
<.button_group>
<.button
patch={order_path(@record_list_params, :insertion)}
size="sm"
class={[
@record_list_params.order == :insertion && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("Insertion")}</span>
</.button>
<.button
patch={order_path(@record_list_params, :alphabetical)}
size="sm"
class={[
@record_list_params.order == :alphabetical && "bg-zinc-100 dark:bg-zinc-700!"
]}
>
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
</.button>
<.button
patch={order_path(@record_list_params, :release)}
size="sm"
class={[
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
</.button>
</.button_group>
<.button_group>
<.button
phx-click="set_display"
phx-value-mode="grid"
size="sm"
class={[
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon
name="hero-squares-2x2"
class="icon"
aria-hidden="true"
data-slot="icon"
/>
<span class="sr-only sm:not-sr-only">
{gettext("Grid")}
</span>
</.button>
<.button
phx-click="set_display"
phx-value-mode="list"
size="sm"
class={[
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
]}
>
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
<span class="sr-only sm:not-sr-only">
{gettext("List")}
</span>
</.button>
</.button_group>
</div>
<.record_grid