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