jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style changes

Browse source
This commit is contained in:
Justin Edmund 2025-06-13 13:03:24 -04:00
parent 3096c0ff51
commit f1ab953b89
1 changed files with 37 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/lib/components/admin/MediaUploadModal.svelte
View file

@ -174,26 +174,6 @@
<div class="file-info"> <div class="file-info">
<div class="file-name">{file.name}</div> <div class="file-name">{file.name}</div>
<div class="file-size">{formatFileSize(file.size)}</div> <div class="file-size">{formatFileSize(file.size)}</div>
{#if isUploading}
<div class="progress-bar">
<div
class="progress-fill"
style="width: {uploadProgress[file.name] || 0}%"
></div>
</div>
<div class="upload-status">
{#if uploadProgress[file.name] === 100}
<span class="status-complete">✓ Complete</span>
{:else if uploadProgress[file.name] > 0}
<span class="status-uploading"
>{Math.round(uploadProgress[file.name] || 0)}%</span
>
{:else}
<span class="status-waiting">Waiting...</span>
{/if}
</div>
{/if}
</div> </div>
{#if !isUploading} {#if !isUploading}
@ -202,6 +182,7 @@
class="remove-button" class="remove-button"
onclick={() => removeFile(index)} onclick={() => removeFile(index)}
title="Remove file" title="Remove file"
aria-label="Remove file"
> >
<svg <svg
width="16" width="16"
@ -216,6 +197,26 @@
</svg> </svg>
</button> </button>
{/if} {/if}
{#if isUploading}
<div class="progress-bar-container">
<div class="progress-bar">
<div
class="progress-fill"
style="width: {uploadProgress[file.name] || 0}%"
></div>
</div>
<div class="upload-status">
{#if uploadProgress[file.name] > 0}
<span class="status-uploading"
>{Math.round(uploadProgress[file.name] || 0)}%</span
>
{:else}
<span class="status-waiting">Waiting...</span>
{/if}
</div>
</div>
{/if}
</div> </div>
{/each} {/each}
</div> </div>
@ -584,17 +585,26 @@
} }
} }
.progress-bar-container {
display: flex;
min-width: 120px;
align-items: center;
gap: $unit;
}
.progress-bar { .progress-bar {
width: 100%; flex-grow: 1;
height: 6px; height: $unit-2x;
background: $grey-90; background: $grey-100;
border-radius: 3px; padding: $unit-half;
border-radius: $corner-radius-full;
border: 1px solid $grey-85;
overflow: hidden; overflow: hidden;
margin-bottom: $unit-half;
.progress-fill { .progress-fill {
border-radius: $corner-radius-full;
height: 100%; height: 100%;
background: #3b82f6; background: $red-60;
transition: width 0.3s ease; transition: width 0.3s ease;
position: relative; position: relative;
@ -634,7 +644,7 @@
} }
.status-uploading { .status-uploading {
color: #3b82f6; color: $red-60;
} }
.status-waiting { .status-waiting {