Better text sizing and flex.

This commit is contained in:
Scott Idem
2025-10-16 16:39:30 -04:00
parent 8b22c0fc34
commit e912c4a48a
3 changed files with 15 additions and 57 deletions

View File

@@ -885,7 +885,7 @@ $effect(() => {
h-full min-w-full w-full max-w-full
flex flex-col sm:flex-row flex-wrap sm:flex-nowrap gap-0
items-center
justify-center
justify-start sm:justify-center
py-1 px-0.5
bg-gray-100

View File

@@ -14,6 +14,7 @@ interface Props {
show_bak_download?: boolean;
// export let hide_api_download: boolean = true;
btn_size?: string;
btn_text_align?: string;
text_size?: string;
text_size_md?: string;
session_type?: string; // oral, poster, workshop, symposium, roundtable, other
@@ -38,6 +39,7 @@ let {
hide_draft = $bindable(false),
show_bak_download = false,
btn_size = $bindable('btn-sm'),
btn_text_align = $bindable('text-left'),
text_size = $bindable('text-sm'),
text_size_md = $bindable('md:text-base'),
session_type = $bindable('oral'),
@@ -479,25 +481,25 @@ function preventDefault(fn) {
class:outline-2={$events_slct.event_file_id == event_file_id}
class="
btn {btn_size}
gap-1
gap-1 justify-between
min-w-full w-full max-w-96
preset-tonal-primary border border-primary-500
"
title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}...\nHosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_id}`}
>
<span class="shrink text-xs border-r border-gray-400 pr-1">
{#await ae_promises[event_file_id]}
<span class="shrink text-sm p-0">
<!-- <span class="shrink text-sm p-0"> -->
<span class="fas fa-spinner fa-spin mx-0.5"></span>
<span class="">
Downloading
{#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
{$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
{/if}
:
</span>
</span>
<!-- </span> -->
{:then result}
<span class="shrink text-xs">
<span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)} mx-0.5"></span>
{event_file_obj.extension}
{#if result === null}
@@ -506,13 +508,15 @@ function preventDefault(fn) {
Download failed!
</span>
{/if}
</span>
<!-- </span> -->
{/await}
</span>
<span
class="
grow {text_size} {text_size_md} max-w-96 border-l border-gray-400 pl-1
overflow-hidden text-ellipsis text-left
grow {text_size} {text_size_md} w-full max-w-full
overflow-hidden text-ellipsis
{btn_text_align}
"
>
<!-- {event_file_obj.filename_no_ext} -->

View File

@@ -140,6 +140,7 @@ let ae_promises: key_val = $state({
hide_size={true}
show_bak_download={$ae_loc.trusted_access && $ae_loc.edit_mode}
btn_size={'btn-sm'}
btn_text_align={'text-center'}
text_size={'text-xs'}
text_size_md={'text-xs'}
session_type={event_file_obj?.event_session_type_code ?? 'oral'}
@@ -150,54 +151,6 @@ let ae_promises: key_val = $state({
bind:modal__open_event_file_id={$events_sess.launcher.modal__open_event_file_id}
bind:modal__event_file_obj={$events_sess.launcher.modal__event_file_obj}
/>
<button
disabled={!$ae_loc.trusted_access}
onclick={() => {
// ae_promises[event_file_obj.event_file_id_random]
ae_promises[event_file_obj?.event_file_id_random] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: event_file_obj?.hosted_file_id_random,
return_file: true,
filename: event_file_obj?.filename,
auto_download: true,
log_lvl: 0
});
}}
class="
btn btn-sm
text-xs w-full
preset-tonal-primary
hover:preset-tonal-success
transition-all
"
title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
>
{#await ae_promises[event_file_obj.event_file_id_random]}
<span class="fas fa-spinner fa-spin mx-1"></span>
<span class="">
Downloading
{#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
{$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
{/if}
:
</span>
{:then}
<!-- <span class="fas fa-download mx-1"></span> -->
<span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
<!-- <span class="text-sm">
Download:
</span> -->
{/await}
<span class="grow">
{ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
</span>
<!-- <span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
{event_file_obj?.filename} -->
</button>
{/each}
</div>
{/if}
@@ -226,6 +179,7 @@ let ae_promises: key_val = $state({
hide_size={true}
show_bak_download={$ae_loc.trusted_access && $ae_loc.edit_mode}
btn_size={'btn-sm'}
btn_text_align={'text-center'}
text_size={'text-xs'}
text_size_md={'text-xs'}
session_type={event_file_obj?.event_session_type_code ?? 'oral'}