Docker/AdventureLog
Docker/AdventureLog
1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-23 06:49:37 +02:00
Code Issues Releases Activity

Add rating stars

Browse source
This commit is contained in:
Sean Morley 2024-08-15 21:29:36 -04:00
parent 6e39a9784d
commit 2f51f88f00
3 changed files with 159 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

57
frontend/src/lib/components/EditAdventure.svelte
View file

@ -279,11 +279,63 @@
type="number"
min="0"
max="5"
name="rating"
id="rating"
hidden
bind:value={adventureToEdit.rating}
id="rating"
name="rating"
class="input input-bordered w-full max-w-xs mt-1"
/>
<div class="rating -ml-3 mt-1 mb-4">
<input
type="radio"
name="rating-2"
class="rating-hidden"
checked={Number.isNaN(adventureToEdit.rating) || adventureToEdit.rating === null}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
checked={adventureToEdit.rating === 1}
on:click={() => (adventureToEdit.rating = 1)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 2)}
checked={adventureToEdit.rating === 2}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 3)}
checked={adventureToEdit.rating === 3}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 4)}
checked={adventureToEdit.rating === 4}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (adventureToEdit.rating = 5)}
checked={adventureToEdit.rating === 5}
/>
{#if adventureToEdit.rating}
<button
type="button"
class="btn btn-sm btn-error ml-2"
on:click={() => (adventureToEdit.rating = NaN)}
>
Remove
</button>
{/if}
</div>
<input
type="text"
@ -346,6 +398,7 @@
>
<!-- if there is a button in form, it will close the modal -->
<button class="btn mt-4" on:click={close}>Close</button>
</div>
</form>
<div class="flex items-center justify-center flex-wrap gap-4 mt-4"></div>
</div>

48
frontend/src/lib/components/NewAdventure.svelte
View file

@ -326,11 +326,59 @@
type="number"
min="0"
max="5"
hidden
bind:value={newAdventure.rating}
id="rating"
name="rating"
class="input input-bordered w-full max-w-xs mt-1"
/>
<div class="rating -ml-3 mt-1">
<input
type="radio"
name="rating-2"
class="rating-hidden"
checked={Number.isNaN(newAdventure.rating)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (newAdventure.rating = 1)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (newAdventure.rating = 2)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (newAdventure.rating = 3)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (newAdventure.rating = 4)}
/>
<input
type="radio"
name="rating-2"
class="mask mask-star-2 bg-orange-400"
on:click={() => (newAdventure.rating = 5)}
/>
{#if newAdventure.rating}
<button
type="button"
class="btn btn-sm btn-error ml-2"
on:click={() => (newAdventure.rating = NaN)}
>
Remove
</button>
{/if}
</div>
</div>
<div class="mb-2">
<label for="link"

4
frontend/src/routes/adventures/[id]/+page.svelte
View file

@ -92,10 +92,10 @@
<main class="flex-1">
<div class="max-w-5xl mx-auto p-4 md:p-6 lg:p-8">
<div class="grid gap-8">
{#if adventure.image}
{#if adventure.images && adventure.images.length > 0}
<div>
<img
src={adventure.image}
src={adventure.images[0].image}
alt={adventure.name}
width="1200"
height="600"