Move filters/selectors to the side of the title
This commit is contained in:
Claudio Ortolina
@@ -65,31 +65,34 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
|||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
<div class="flex items-center justify-between">
|
||||||
{gettext("On This day")}
|
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
</h1>
|
{gettext("On This day")}
|
||||||
<.form
|
</h1>
|
||||||
:let={f}
|
<.form
|
||||||
for={to_form(%{"current_date" => @current_date})}
|
:let={f}
|
||||||
phx-change="set_current_date"
|
for={to_form(%{"current_date" => @current_date})}
|
||||||
class="mt-4 w-fit"
|
phx-change="set_current_date"
|
||||||
>
|
>
|
||||||
<.date_picker size="xs" field={f[:current_date]}>
|
<.date_picker size="xs" field={f[:current_date]}>
|
||||||
<:outer_suffix>
|
<:outer_suffix>
|
||||||
<.button
|
<.button
|
||||||
size="xs"
|
size="xs"
|
||||||
type="button"
|
type="button"
|
||||||
phx-click={
|
phx-click={
|
||||||
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
|
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
Today
|
Today
|
||||||
</.button>
|
</.button>
|
||||||
</:outer_suffix>
|
</:outer_suffix>
|
||||||
</.date_picker>
|
</.date_picker>
|
||||||
</.form>
|
</.form>
|
||||||
|
</div>
|
||||||
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
<div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
|
||||||
<.records_on_this_day
|
<.records_on_this_day
|
||||||
current_date={@current_date}
|
current_date={@current_date}
|
||||||
@@ -98,8 +101,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
|
||||||
<div class="flow-root">
|
<div class="flow-root">
|
||||||
|
|||||||
@@ -20,52 +20,54 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
|
|||||||
def render(assigns) do
|
def render(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
<.tabs>
|
||||||
{@title}
|
<div class="flex justify-between">
|
||||||
</h1>
|
<h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
|
||||||
<.tabs class="mt-4">
|
{@title}
|
||||||
<.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
|
</h1>
|
||||||
<:tab
|
<.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
|
||||||
class="flex-1"
|
<:tab
|
||||||
name={"#{@key}_last_7_days"}
|
class="flex-1"
|
||||||
phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
|
name={"#{@key}_last_7_days"}
|
||||||
phx-target={@myself}
|
phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
|
||||||
>
|
phx-target={@myself}
|
||||||
{gettext("7d")}
|
>
|
||||||
</:tab>
|
{gettext("7d")}
|
||||||
<:tab
|
</:tab>
|
||||||
class="flex-1"
|
<:tab
|
||||||
name={"#{@key}_last_30_days"}
|
class="flex-1"
|
||||||
phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
|
name={"#{@key}_last_30_days"}
|
||||||
phx-target={@myself}
|
phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
|
||||||
>
|
phx-target={@myself}
|
||||||
{gettext("30d")}
|
>
|
||||||
</:tab>
|
{gettext("30d")}
|
||||||
<:tab
|
</:tab>
|
||||||
class="flex-1"
|
<:tab
|
||||||
name={"#{@key}_last_90_days"}
|
class="flex-1"
|
||||||
phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
|
name={"#{@key}_last_90_days"}
|
||||||
phx-target={@myself}
|
phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
|
||||||
>
|
phx-target={@myself}
|
||||||
{gettext("90d")}
|
>
|
||||||
</:tab>
|
{gettext("90d")}
|
||||||
<:tab
|
</:tab>
|
||||||
class="flex-1"
|
<:tab
|
||||||
name={"#{@key}_last_365_days"}
|
class="flex-1"
|
||||||
phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
|
name={"#{@key}_last_365_days"}
|
||||||
phx-target={@myself}
|
phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
|
||||||
>
|
phx-target={@myself}
|
||||||
{gettext("1y")}
|
>
|
||||||
</:tab>
|
{gettext("1y")}
|
||||||
<:tab
|
</:tab>
|
||||||
class="flex-1"
|
<:tab
|
||||||
name={"#{@key}_all_time"}
|
class="flex-1"
|
||||||
phx-click={JS.push("set_period", value: %{period: "all_time"})}
|
name={"#{@key}_all_time"}
|
||||||
phx-target={@myself}
|
phx-click={JS.push("set_period", value: %{period: "all_time"})}
|
||||||
>
|
phx-target={@myself}
|
||||||
{gettext("All time")}
|
>
|
||||||
</:tab>
|
{gettext("∞")}
|
||||||
</.tabs_list>
|
</:tab>
|
||||||
|
</.tabs_list>
|
||||||
|
</div>
|
||||||
<.async_result :let={items} assign={assigns[@key]}>
|
<.async_result :let={items} assign={assigns[@key]}>
|
||||||
<:loading>
|
<:loading>
|
||||||
<div class="flex h-182 items-center justify-center">
|
<div class="flex h-182 items-center justify-center">
|
||||||
|
|||||||
@@ -852,11 +852,6 @@ msgstr ""
|
|||||||
msgid "Top Artists"
|
msgid "Top Artists"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/live/stats_live/top_by_period.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
|
||||||
msgid "All time"
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
#: lib/music_library_web/components/scrobble_components.ex
|
#: lib/music_library_web/components/scrobble_components.ex
|
||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Copy album MusicBrainz ID to clipboard"
|
msgid "Copy album MusicBrainz ID to clipboard"
|
||||||
@@ -2341,3 +2336,8 @@ msgstr ""
|
|||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Top 20 Release Years"
|
msgid "Top 20 Release Years"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
#: lib/music_library_web/live/stats_live/top_by_period.ex
|
||||||
|
#, elixir-autogen, elixir-format
|
||||||
|
msgid "∞"
|
||||||
|
msgstr ""
|
||||||
|
|||||||
@@ -852,11 +852,6 @@ msgstr ""
|
|||||||
msgid "Top Artists"
|
msgid "Top Artists"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: lib/music_library_web/live/stats_live/top_by_period.ex
|
|
||||||
#, elixir-autogen, elixir-format
|
|
||||||
msgid "All time"
|
|
||||||
msgstr ""
|
|
||||||
|
|
||||||
#: lib/music_library_web/components/scrobble_components.ex
|
#: lib/music_library_web/components/scrobble_components.ex
|
||||||
#, elixir-autogen, elixir-format, fuzzy
|
#, elixir-autogen, elixir-format, fuzzy
|
||||||
msgid "Copy album MusicBrainz ID to clipboard"
|
msgid "Copy album MusicBrainz ID to clipboard"
|
||||||
@@ -2341,3 +2336,8 @@ msgstr ""
|
|||||||
#, elixir-autogen, elixir-format
|
#, elixir-autogen, elixir-format
|
||||||
msgid "Top 20 Release Years"
|
msgid "Top 20 Release Years"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
#: lib/music_library_web/live/stats_live/top_by_period.ex
|
||||||
|
#, elixir-autogen, elixir-format
|
||||||
|
msgid "∞"
|
||||||
|
msgstr ""
|
||||||
|
|||||||
Reference in New Issue
Block a user