john-okeefe/anitrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added visual indicators for episode and repeat inputs

Browse Source
This commit is contained in:
John O'Keefe 2024-08-19 20:58:10 -04:00
parent c962a6ac9b
commit 58fb1e41c2
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/ChangeDataDialogue.svelte
View File

@ -434,12 +434,15 @@
type="number"
name="episodes"
min="0"
max="{currentAniListAnime.data.MediaList.media.episodes}"
id="episodes"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-24 p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
class="bg-gray-50 border {values.progress < 0 || values.progress > currentAniListAnime.data.MediaList.media.episodes ?
'border-red-300 dark:border-red-500 border-[2px] text-rose-500 dark:text-rose-300 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500' :
'border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
} text-sm rounded-lg block w-24 p-2.5 dark:bg-gray-600 dark:placeholder-gray-400"
bind:value={values.progress}
required>
<div>of {currentAniListAnime.data.MediaList.media.episodes}</div>
</div>
@ -476,8 +479,8 @@
type="date"
name="startedAt"
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"
focus:border-blue-500 dark:focus:ring-blue-500 dark: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"
value={startedAtDate}
placeholder="Date Started"
on:change={transformStartedAtDate}
@ -516,9 +519,10 @@
name="repeat"
min="0"
id="repeat"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600
focus:border-primary-600 block w-24 p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400
dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
class="bg-gray-50 border {values.repeat < 0 ?
'border-red-300 dark:border-red-500 border-[2px] text-rose-500 dark:text-rose-300 focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500' :
'border-gray-300 dark:border-gray-500 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500'
} text-sm rounded-lg block w-24 p-2.5 dark:bg-gray-600 dark:placeholder-gray-400 dark:text-white"
bind:value={values.repeat}
required>
</div>