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

changed from modal to client-side router

Browse Source
This commit is contained in:
John O'Keefe
2024-09-04 12:05:41 -04:00
parent 4fa38b5252
commit f5001cff04
21 changed files with 327 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/star-rating/Stars.svelte Normal file
View File

@@ -0,0 +1,63 @@
<!-- Originally from @ernane/svelte-star-rating. Wanted to give credit but could not use from the library without causing program crash. -->
<script>
import Star from './components/Star.svelte';
export let config = {
readOnly: false,
countStars: 5,
range: { min: 0, max: 5, step: 0.001 },
score: 0.0,
showScore: true,
name: "stars",
scoreFormat: function(){ return `(${this.score.toFixed(0)}/${this.countStars})` },
starConfig: {
size: 30,
fillColor: '#F9ED4F',
strokeColor: "#BB8511",
unfilledColor: '#FFF',
strokeUnfilledColor: '#000'
}
}
</script>
<section class="stars-container">
<div class="range-stars">
<div class="stars">
{#each Array(config.countStars) as star, id}
{#if Math.floor(config.score) === id}
<Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={config.score - Math.floor(config.score)}/>
{:else if Math.floor(config.score) > id}
<Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={1}/>
{:else}
<Star id={config.name + id} readOnly={config.readOnly} starConfig={config.starConfig} fillPercentage={0}/>
{/if}
{/each}
</div>
<input name={config.name}
class="slider"
type="range"
min={config.readOnly ? config.score : config.range.min}
max={config.readOnly ? config.score : config.range.max}
step="{config.range.step}" bind:value={config.score}
on:change
on:click
>
</div>
{#if config.showScore}
<span class="show-score" style="font-size: {config.starConfig.size/2}px;">
{#if config.scoreFormat}
{config.scoreFormat()}
{:else}
({((config.score/config.countStars)*100).toFixed(2)}%)
{/if}
</span>
{/if}
</section>
<style>
.stars-container{ position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.range-stars{ position: relative; }
.stars{ display: flex; align-items: center; justify-content: center; gap: .5rem; }
.slider{ opacity: 0; cursor: pointer; position: absolute; top: 0; left: 0; right: 0; height: 100%; }
.show-score{ user-select: none; color: #888 }
</style>

21
frontend/src/star-rating/components/Star.svelte Normal file
View File

@@ -0,0 +1,21 @@
<script>
export let id, readOnly, fillPercentage, starConfig;
</script>
<svg xmlns="http://www.w3.org/2000/svg" width="{starConfig.size}" viewBox="0 -10 187.673 179.503" height="{starConfig.size}" >
{#if fillPercentage < 1 && fillPercentage > 0}
<defs>
<linearGradient id="linear-gradient-{id}" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:{starConfig.fillColor};stop-opacity:1" />
<stop offset="{fillPercentage * 100}%" style="stop-color:{starConfig.fillColor};stop-opacity:1"/>
<stop offset="{fillPercentage * 100}%" style="stop-color:{starConfig.unfilledColor};stop-opacity:1" />
</linearGradient>
</defs>
{/if}
<path
opacity="{readOnly ? .7 : 1}"
stroke={fillPercentage > 0 ? starConfig.strokeColor : starConfig.strokeUnfilledColor}
fill={fillPercentage === 1 ? starConfig.fillColor : fillPercentage === 0 ? starConfig.unfilledColor : `url(#linear-gradient-${id})`}
d="M187.183 57.47a9.955 9.955 0 00-8.587-6.86l-54.167-4.918-21.42-50.134a9.978 9.978 0 00-9.172-6.052 9.972 9.972 0 00-9.172 6.061l-21.42 50.125L9.07 50.611a9.973 9.973 0 00-8.578 6.858 9.964 9.964 0 002.917 10.596l40.944 35.908-12.073 53.184a9.97 9.97 0 003.878 10.298A9.953 9.953 0 0042 169.357a9.937 9.937 0 005.114-1.424l46.724-27.925 46.707 27.925a9.936 9.936 0 0010.964-.478 9.979 9.979 0 003.88-10.298l-12.074-53.184 40.944-35.9a9.98 9.98 0 002.925-10.604zm0 0"
/>
</svg>