cleaned up grid links and text
This commit is contained in:
parent
a0b00de615
commit
eeb4a62f26
@ -5,42 +5,19 @@
|
||||
CheckIfSimklLoggedIn,
|
||||
GetAniListLoggedInUser,
|
||||
GetAniListUserWatchingList,
|
||||
GetSimklLoggedInUser, SimklGetUserWatchlist,
|
||||
GetSimklLoggedInUser,
|
||||
SimklGetUserWatchlist,
|
||||
} from "../wailsjs/go/main/App";
|
||||
import {type AniListUser, MediaListSort} from "./anilist/types/AniListTypes";
|
||||
import type {AniListCurrentUserWatchList} from "./anilist/types/AniListCurrentUserWatchListType"
|
||||
import Header from "./Header.svelte";
|
||||
import StarRatting from '@ernane/svelte-star-rating'
|
||||
import {Button, Modal} from "flowbite-svelte";
|
||||
|
||||
import {Button, Rating} from "flowbite-svelte";
|
||||
import {default as Modal} from "./modal/Modal.svelte"
|
||||
import ChangeDataDialogue from "./ChangeDataDialogue.svelte";
|
||||
import {onMount} from "svelte";
|
||||
import type {SimklUser, SimklWatchList} from "./simkl/types/simklTypes";
|
||||
import {writable} from "svelte/store";
|
||||
|
||||
const config = {
|
||||
readOnly: false,
|
||||
countStars: 5,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 5,
|
||||
step: 0.5
|
||||
},
|
||||
score: 0.0,
|
||||
showScore: true,
|
||||
scoreFormat: function () {
|
||||
return `(${this.score.toFixed(1)}/${this.countStars})`
|
||||
},
|
||||
name: "",
|
||||
starConfig: {
|
||||
size: 20,
|
||||
fillColor: '#F9ED4F',
|
||||
strokeColor: "#e2c714",
|
||||
unfilledColor: '#FFF',
|
||||
strokeUnfilledColor: '#000'
|
||||
}
|
||||
}
|
||||
|
||||
let aniListLoggedIn = false
|
||||
let aniListPrimary = true
|
||||
let simklUser: SimklUser
|
||||
@ -99,24 +76,24 @@
|
||||
})
|
||||
}
|
||||
|
||||
function anilistGetUserWatchlist(): void {
|
||||
GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
|
||||
aniListWatchlist = result
|
||||
aniListLoggedIn = true
|
||||
})
|
||||
}
|
||||
|
||||
let count = 1;
|
||||
|
||||
const decrement = () => {
|
||||
if (count > 0) {
|
||||
count--
|
||||
}
|
||||
}
|
||||
|
||||
const increment = () => {
|
||||
count++
|
||||
}
|
||||
// function anilistGetUserWatchlist(): void {
|
||||
// GetAniListUserWatchingList(page, perPage, MediaListSort.UpdatedTimeDesc).then((result) => {
|
||||
// aniListWatchlist = result
|
||||
// aniListLoggedIn = true
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// let count = 1;
|
||||
//
|
||||
// const decrement = () => {
|
||||
// if (count > 0) {
|
||||
// count--
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// const increment = () => {
|
||||
// count++
|
||||
// }
|
||||
|
||||
|
||||
</script>
|
||||
@ -137,75 +114,43 @@
|
||||
{/if}
|
||||
|
||||
{#if aniListLoggedIn}
|
||||
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
|
||||
<h1>Your Watching List</h1>
|
||||
<div class="mx-auto max-w-2xl p-4 sm:p-6 lg:max-w-7xl lg:px-8">
|
||||
<h1 class="text-left text-xl font-bold mb-4">Your Watching List</h1>
|
||||
|
||||
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
|
||||
{#each aniListWatchlist.data.Page.mediaList as media}
|
||||
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg xl:aspect-h-8 xl:aspect-w-7">
|
||||
<button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)} class="group">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex flex-col items-center group">
|
||||
<button on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
|
||||
<img class="rounded-lg" src={media.media.coverImage.large} alt={
|
||||
media.media.title.english === "" ?
|
||||
media.media.title.romaji :
|
||||
media.media.title.english
|
||||
}/>
|
||||
{config.score = media.score / 2.0}
|
||||
<StarRatting {config}/>
|
||||
<h3 class="mt-4 text-sm text-white-700">{
|
||||
</button>
|
||||
<Rating id="anime-rating" total={5} size={35} rating={media.score/2.0} />
|
||||
<button class="mt-4 text-md font-semibold text-white-700"
|
||||
on:click={() => GetAniListSingleItemAndOpenModal(media.media.id, true)}>
|
||||
{
|
||||
media.media.title.english === "" ?
|
||||
media.media.title.romaji :
|
||||
media.media.title.english
|
||||
}</h3>
|
||||
<p class="mt-1 text-lg font-medium text-white-900">{media.progress}
|
||||
/ {media.media.nextAiringEpisode.episode !== 0 ?
|
||||
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
|
||||
{#if media.media.episodes > 0}
|
||||
<p class="mt-1 text-lg font-medium text-white-900">Total
|
||||
Episodes: {media.media.episodes}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
media.media.title.romaji :
|
||||
media.media.title.english
|
||||
}
|
||||
</button>
|
||||
<p class="mt-1 text-lg font-medium text-white-900">{media.progress}
|
||||
/ {media.media.nextAiringEpisode.episode !== 0 ?
|
||||
media.media.nextAiringEpisode.episode - 1 : media.media.episodes}</p>
|
||||
{#if media.media.episodes > 0}
|
||||
<p class="mt-1 text-lg font-medium text-white-900">Total
|
||||
Episodes: {media.media.episodes}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center justify-center">
|
||||
<button on:click={decrement}
|
||||
class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-gray-400 hover:bg-gray-500">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<input bind:value={count} class="text-2xl font-bold mx-4"/>
|
||||
<button on:click={increment}
|
||||
class="flex justify-center items-center w-10 h-10 rounded-full text-white focus:outline-none bg-indigo-500 hover:bg-indigo-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v12M6 12h12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<!-- <div class="relative max-w-sm">-->
|
||||
<!-- <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">-->
|
||||
<!-- <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">-->
|
||||
<!-- <path d="M20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4ZM0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm5-8h10a1 1 0 0 1 0 2H5a1 1 0 0 1 0-2Z"/>-->
|
||||
<!-- </svg>-->
|
||||
<!-- </div>-->
|
||||
<!-- <input-->
|
||||
<!-- datepicker-->
|
||||
<!-- datepicker-buttons-->
|
||||
<!-- datepicker-autoselect-today-->
|
||||
<!-- datepicker-autohide-->
|
||||
<!-- datepicker-title="Started At"-->
|
||||
<!-- id="startedAt"-->
|
||||
<!-- type="text"-->
|
||||
<!-- class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500-->
|
||||
<!-- focus:border-blue-500 block w-full ps-10 p-2.5 dark:bg-gray-700 dark:border-gray-600-->
|
||||
<!-- dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"-->
|
||||
<!-- placeholder="Select date">-->
|
||||
<!-- </div>-->
|
||||
<Modal title={$title} bind:open={$anilistModal} {size} autoclose={false}>
|
||||
<ChangeDataDialogue/>
|
||||
</Modal>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user