Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style improvements for file uploads and related.

Browse Source
This commit is contained in:
Scott Idem
2025-07-23 13:22:34 -04:00
parent 5410717dcd
commit ced62cfd99
8 changed files with 134 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/routes/events/ae_comp__event_files_upload.svelte
View File

@@ -235,23 +235,35 @@ async function handle_input_upload_files(input_upload_files, task_id) {
</div>
{/await}
<div
class="
border-2 hover:border-2 border-dashed border-green-500
p-1
preset-filled-success-50-950 hover:border-green-800
cursor-pointer
"
>
<label
for="ae_comp__event_files_upload__input"
class="svelte_input_file_label text-center"
class="
svelte_input_file_label
text-center
cursor-pointer
"
class:hidden={$events_sess.files.disable_submit__event_file_obj}
>
<slot name="label">
<div>
<div class="text-lg">
<span class="fas fa-upload"></span>
<!-- Select files to upload -->
<!-- <span class="fas fa-file-archive"></span> -->
<strong class="bg-blue-300 p-1">Upload files</strong>
<strong class="">Upload files</strong>
<!-- (drag and drop) -->
</div>
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
<div class="text-sm text-gray-600 dark:text-gray-400 italic">
<strong>Presentation related files only</strong><br>
(PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)
</span>
</div>
</slot>
</label>
@@ -263,9 +275,19 @@ async function handle_input_upload_files(input_upload_files, task_id) {
{required}
{accept}
name={input_name}
class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
class:hidden={$events_sess.files.disable_submit__event_file_obj}
class="
svelte_input_file_element file-dropzone-input
block w-full text-lg text-center
rounded-lg
cursor-pointer
p-1
preset-tonal-primary preset-outlined-primary-200-800 hover:preset-filled-success-200-800
transition-all
{input_class_li.join(' ')}
"
/>
</div>
<Element_input_files_tbl
bind:input_file_list={input_file_list}
@@ -277,7 +299,15 @@ async function handle_input_upload_files(input_upload_files, task_id) {
<button
type="submit"
class="btn btn-lg btn-primary preset-tonal-primary border border-primary-500 hover:preset-tonal-success border border-success-500 w-54"
class="
btn btn-lg
text-lg
preset-tonal-primary hover:preset-tonal-success
flex items-center justify-center
w-54
transition-all
"
class:opacity-20={$events_sess.files.disable_submit__event_file_obj || $events_sess.files.status__file_list != 'ready'}
disabled={$events_sess.files.disable_submit__event_file_obj || $events_sess.files.status__file_list != 'ready'}
>
{#await ae_promises.upload__hosted_file_obj}
@@ -290,18 +320,18 @@ async function handle_input_upload_files(input_upload_files, task_id) {
</span>
{:then}
<span class="fas fa-upload m-1"></span>
<span class="text-sm">
Upload?
<span class="">
Upload
</span>
<!-- <span class="fas fa-save m-1"></span> -->
<span class="grow font-bold">
<span class="text-sm px-1 font-semibold bg-neutral-500/50 rounded">
{#if $events_sess.files.processed_file_list.length > 0}
<!-- {#each $events_sess.files.processed_file_list as file_obj, index}
<span class="text-xs">
{file_obj.filename}
</span>
{/each} -->
{$events_sess.files.processed_file_list.length == 1 ? `${$events_sess.files.processed_file_list.length} file` : `${$events_sess.files.processed_file_list.length} files`}
{@html $events_sess.files.processed_file_list.length == 1 ? `${$events_sess.files.processed_file_list.length}&times; file` : `${$events_sess.files.processed_file_list.length}&times; files`}
{:else}
<span class="text-xs">
No files selected