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

Move filters/selectors to the side of the title

Browse Source
This commit is contained in:
Claudio Ortolina
2026-03-21 18:21:39 +00:00
parent 19428b85f2
commit b85ce0831c
4 changed files with 85 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/stats_live/index.ex
+27 -26
View File
@@ -65,31 +65,34 @@ defmodule MusicLibraryWeb.StatsLive.Index do
</div>
</div>
<div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
<div class="grid grid-cols-1 gap-5 lg:grid-cols-3 mt-5">
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
<div>
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("On This day")}
</h1>
<.form
:let={f}
for={to_form(%{"current_date" => @current_date})}
phx-change="set_current_date"
class="mt-4 w-fit"
>
<.date_picker size="xs" field={f[:current_date]}>
<:outer_suffix>
<.button
size="xs"
type="button"
phx-click={
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
}
>
Today
</.button>
</:outer_suffix>
</.date_picker>
</.form>
<div class="flex items-center justify-between">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{gettext("On This day")}
</h1>
<.form
:let={f}
for={to_form(%{"current_date" => @current_date})}
phx-change="set_current_date"
>
<.date_picker size="xs" field={f[:current_date]}>
<:outer_suffix>
<.button
size="xs"
type="button"
phx-click={
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
}
>
Today
</.button>
</:outer_suffix>
</.date_picker>
</.form>
</div>
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
<.records_on_this_day
current_date={@current_date}
@@ -98,8 +101,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
/>
</div>
</div>
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
</div>
<div class="flow-root">
lib/music_library_web/live/stats_live/top_by_period.ex
+48 -46
View File
@@ -20,52 +20,54 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
def render(assigns) do
~H"""
<div>
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{@title}
</h1>
<.tabs class="mt-4">
<.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
<:tab
class="flex-1"
name={"#{@key}_last_7_days"}
phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
phx-target={@myself}
>
{gettext("7d")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_last_30_days"}
phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
phx-target={@myself}
>
{gettext("30d")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_last_90_days"}
phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
phx-target={@myself}
>
{gettext("90d")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_last_365_days"}
phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
phx-target={@myself}
>
{gettext("1y")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_all_time"}
phx-click={JS.push("set_period", value: %{period: "all_time"})}
phx-target={@myself}
>
{gettext("All time")}
</:tab>
</.tabs_list>
<.tabs>
<div class="flex justify-between">
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
{@title}
</h1>
<.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
<:tab
class="flex-1"
name={"#{@key}_last_7_days"}
phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
phx-target={@myself}
>
{gettext("7d")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_last_30_days"}
phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
phx-target={@myself}
>
{gettext("30d")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_last_90_days"}
phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
phx-target={@myself}
>
{gettext("90d")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_last_365_days"}
phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
phx-target={@myself}
>
{gettext("1y")}
</:tab>
<:tab
class="flex-1"
name={"#{@key}_all_time"}
phx-click={JS.push("set_period", value: %{period: "all_time"})}
phx-target={@myself}
>
{gettext("∞")}
</:tab>
</.tabs_list>
</div>
<.async_result :let={items} assign={assigns[@key]}>
<:loading>
<div class="flex h-182 items-center justify-center">