dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-25 13:01:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: orange progress bar for unsubmitted uploads

Browse source
This commit is contained in:
EETagent 2022-12-23 22:21:43 +01:00
parent ad284b3435
commit 3fbd00dfd8
2 changed files with 26 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/dashboard/DashboardUploadCard.svelte
View file

@ -155,7 +155,7 @@
> >
<div class="items-center text-center"> <div class="items-center text-center">
<h2 class="text-sspsBlueDark mb-2 text-2xl font-bold">{Math.round(progress * 100)} %</h2> <h2 class="text-sspsBlueDark mb-2 text-2xl font-bold">{Math.round(progress * 100)} %</h2>
<ProgressBar {progress} /> <ProgressBar submitted={status === 'submitted'} {progress} />
</div> </div>
</div> </div>
{:else} {:else}

46
frontend/src/lib/components/dashboard/ProgressBar.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
export let progress: number; export let progress: number;
export let submitted: boolean = false;
</script> </script>
<div class="progress-bar"> <div class="progress-bar">
@ -13,27 +14,30 @@
> >
<line x1="5" y1="3" x2="45" y2="3" stroke="#e6e6e6" stroke-width="6" stroke-linecap="round" /> <line x1="5" y1="3" x2="45" y2="3" stroke="#e6e6e6" stroke-width="6" stroke-linecap="round" />
{#if progress === 1} <line
<line x1="5"
x1="5" y1="3"
y1="3" x2={progress * 45}
x2={progress * 45} y2="3"
y2="3" class:submitted={progress === 1 && submitted}
stroke="#35e000ff" class:not-submitted={progress === 1 && !submitted}
stroke-width="3" class:uploading={progress !== 1}
stroke-linecap="round" stroke-width="3"
/> stroke-linecap="round"
{:else} />
<line
x1="5"
y1="3"
x2={progress * 45}
y2="3"
stroke="#75bff8ff"
stroke-width="3"
stroke-linecap="round"
/>
{/if}
> >
</svg> </svg>
</div> </div>
<style>
.submitted {
@apply stroke-[#35e000ff];
}
.not-submitted {
@apply stroke-[#ef8b46];
}
.uploading {
@apply stroke-[#75bff8ff];
}
</style>