fix(ui): move refresh button into watchlist header next to sort
Release / release (push) Successful in 3m35s
Release / release (push) Successful in 3m35s
Relocate RefreshWatchListButton from the Home route into the WatchList header row beside Sort, so refresh lives with the list it refreshes. Tweak header styling to fit the new layout (text-nowrap on the button, max-h/margins on the sort select).
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
<div class="flex justify-end">
|
<div class="flex justify-end">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="py-2 px-4 mt-4 mr-4 bg-gray-700 rounded-lg"
|
class="py-2 px-4 mt-4 mr-4 text-nowrap bg-gray-700 rounded-lg"
|
||||||
on:click={async () => {
|
on:click={async () => {
|
||||||
loading.set(true);
|
loading.set(true);
|
||||||
await CheckIfAniListLoggedInAndLoadWatchList();
|
await CheckIfAniListLoggedInAndLoadWatchList();
|
||||||
|
|||||||
@@ -66,7 +66,7 @@
|
|||||||
|
|
||||||
<select
|
<select
|
||||||
id="sort"
|
id="sort"
|
||||||
class="border rounded-lg block p-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
|
class="border rounded-lg block max-h-10 mt-4 mx-2 p-1.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
|
||||||
bind:value={$aniListSort}
|
bind:value={$aniListSort}
|
||||||
on:change={() => changeWatchListSort()}
|
on:change={() => changeWatchListSort()}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
import loader from "../helperFunctions/loader";
|
import loader from "../helperFunctions/loader";
|
||||||
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
|
||||||
import Sort from "../helperComponents/Sort.svelte";
|
import Sort from "../helperComponents/Sort.svelte";
|
||||||
|
import RefreshWatchListButton from "./RefreshWatchListButton.svelte";
|
||||||
|
|
||||||
let isAniListLoggedIn: boolean;
|
let isAniListLoggedIn: boolean;
|
||||||
let aniListWatchListLoaded: AniListCurrentUserWatchList;
|
let aniListWatchListLoaded: AniListCurrentUserWatchList;
|
||||||
@@ -26,7 +27,10 @@
|
|||||||
>
|
>
|
||||||
<div class="flex justify-between items-center mb-4">
|
<div class="flex justify-between items-center mb-4">
|
||||||
<h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
|
<h1 class="text-left text-xl font-bold">Your AniList WatchList</h1>
|
||||||
<Sort />
|
<div class="flex">
|
||||||
|
<Sort />
|
||||||
|
<RefreshWatchListButton />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -46,7 +46,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{:else if isAniListLoggedIn && isAniListPrimary}
|
{:else if isAniListLoggedIn && isAniListPrimary}
|
||||||
<RefreshWatchListButton />
|
|
||||||
<div class="container py-10">
|
<div class="container py-10">
|
||||||
<Pagination />
|
<Pagination />
|
||||||
<WatchList />
|
<WatchList />
|
||||||
|
|||||||
Reference in New Issue
Block a user