Making things look good.

2025-09-17 18:04:10 -04:00
parent 60fbfc434e
commit 6b6418b753
5 changed files with 109 additions and 30 deletions
--- a/src/routes/events/+layout.svelte
+++ b/src/routes/events/+layout.svelte
@@ -144,7 +144,7 @@ if (browser) {
    class:iframe={$ae_loc?.iframe}
    class="
        ae_events
-        h-full max-h-full max-w-6xl overflow-auto
+        h-full max-h-full max-w-6xl
        flex flex-col gap-1
        m-auto
        bg-gray-50 dark:bg-gray-900
--- a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
 let log_lvl: number = $state(1);
+interface Props {
+    /** @type {import('./$types').LayoutData} */
+    data: any;
+    children?: import('svelte').Snippet;
+}
+
+let { data, children }: Props = $props();

 // *** Import Svelte specific
 // import { onMount, tick } from 'svelte';
@@ -11,16 +18,15 @@ import { liveQuery } from "dexie";
 import { Drawer, Footer, Modal } from 'flowbite-svelte';
 import { listen, idle, onIdle } from 'svelte-idle'

+import {
+        // Brain,
+        // House, Library,
+        // RefreshCw,
+        Satellite
+    } from '@lucide/svelte';
+// import { AppBar } from '@skeletonlabs/skeleton-svelte';
+
 // *** Import Aether specific variables and functions
-interface Props {
-    /** @type {import('./$types').LayoutData} */
-    data: any;
-    children?: import('svelte').Snippet;
-}
-
-let { data, children }: Props = $props();
-
-
 import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { api } from '$lib/api';
@@ -701,39 +707,64 @@ $effect(() => {
 <div
    class="
        static
-
        m-auto
        border-x border-gray-200 dark:border-gray-600
        mt-12 mb-14 sm:mb-12
-        h-full w-full max-w-7xl
+        h-full w-full max-w-8xl
        "
        >


-
 <header
    id="Main-Header"
    class="
        absolute top-0 start-0 z-20 w-full p-1
-        flex flex-row items-center justify-evenly bg-slate-200
+        flex flex-row items-center justify-around sm:justify-between
+        bg-slate-200
        text-sm hover:text-base
        m-auto
+        px-12
        opacity-50 hover:opacity-100
        transition-all duration-1000
        "
    >
-    <h3 class="hidden sm:inline-block h4 text-center italic text-surface-600-400">
-        Æ Presentation Launcher
+    <h3 class="h4 text-center italic text-surface-600-400">
+
+        <button
+            class=""
+            onclick={() => {
+                $events_loc.launcher.hide__launcher_menu = !$events_loc.launcher.hide__launcher_menu;
+            }}
+            title="Toggle Launcher menu"
+            >
+            <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
+            <Satellite
+                class="text-base mx-1 inline-block text-gray-500"
+                />
+            <abbr title="Aether - Events Module Launcher">
+                Æ
+                Launcher
+            </abbr>
+        </button>
    </h3>

    {#if $lq__event_obj}
-        <h2 class="h3 text-center text-surface-600-400">{$lq__event_obj.cfg_json?.short_name}</h2>
+        <h2 class="hidden md:inline-block h3 text-center text-surface-600-400">{$lq__event_obj.cfg_json?.short_name}</h2>
        <h3
            class="h4 text-center italic text-surface-600-400"
            title="Location ID: {$lq__event_location_obj?.event_location_id} Name: {$lq__event_location_obj?.name}"
            >
+            <button
+                class="text-base"
+                onclick={() => {
+                    $ae_loc.edit_mode = !$ae_loc.edit_mode;
+                }}
+                title="Toggle Edit Mode to show location options and more"
+                >
+                <span class="fas fa-map-marker-alt"></span>
+                <span class="sr-only">Location:</span>
+            </button>
            {$lq__event_location_obj?.name}
-            <!-- {$events_slct.event_location_id} -->
        </h3>
    {:else}
        <div class="flex flex-row gap-1 items-center justify-center">
@@ -767,12 +798,13 @@ $effect(() => {
        max-w-xs
        pt-0.5 pr-0.5
        flex flex-col gap-1 items-center justify-start
-        overflow-y-auto
+
        border-r border-gray-200 dark:border-gray-700
        hover:bg-surface-100-900
        "
    class:hidden={$events_loc.launcher.hide__launcher_menu}
    >
+    <!-- overflow-y-auto -->

    <!-- {#await $events_slct.id_li__event_location}
        Loading location list... a
--- a/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
@@ -298,6 +298,7 @@ async function handle_open_file() {
        <span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
    </a> -->
    <button
+        type="button"
        onclick={() => {
            $events_sess.launcher.modal__open = event_file_obj.event_file_id_random;
            if (!modal_title) {
@@ -399,6 +400,7 @@ async function handle_open_file() {
 <!-- Last [WORKING!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
 {:else}
    <button
+        type="button"
        onclick={() => {
            let new_filename = event_file_obj.filename;

@@ -483,6 +485,7 @@ async function handle_open_file() {
    >

    <button
+        type="button"
        onclick={() => {
            // let new_filename = event_file_obj.filename;

@@ -542,6 +545,7 @@ async function handle_open_file() {
        >
        <!-- {(event_file_obj?.open_in_os ? 'Hidden' : 'Not Hidden')} -->
        <button
+            type="button"
            onclick={() => {
                // Go from null to win, win to mac, mac to null, null to win, etc.
                if (!event_file_obj?.open_in_os) {
--- a/src/routes/events/[event_id]/(launcher)/launcher_menu.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_menu.svelte
@@ -100,13 +100,14 @@ let ae_promises: key_val = $state({
        event_launcher_menu
        shrink h-full w-full max-w-full
        flex flex-col flex-wrap gap-1 items-center justify-start
-        overflow-x-clip
+
        "
        >
+        <!-- overflow-x-clip -->


 {#if $lq__event_event_file_obj_li}
-<div class="w-full">
+<div class="w-full flex flex-col gap-0.5">
    <!-- <div class="text-xs text-neutral-800/80">
        <strong>
        Event Files:
@@ -179,7 +180,7 @@ let ae_promises: key_val = $state({


 {#if $lq__location_event_file_obj_li}
-<div class="w-full">
+<div class="w-full flex flex-col gap-0.5">
    {#each $lq__location_event_file_obj_li as event_file_obj, index}
        <button
            disabled={!$ae_loc.trusted_access}
@@ -203,8 +204,26 @@ let ae_promises: key_val = $state({
                "
            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}`}
            >
-            <span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
-            {event_file_obj?.filename}
+            {#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>
        </button>
    {/each}
 </div>
--- a/src/routes/events/[event_id]/(launcher)/menu_session_list.svelte
+++ b/src/routes/events/[event_id]/(launcher)/menu_session_list.svelte
@@ -49,7 +49,7 @@ let hover_timer: any = $state(null);
 <div
    class="
        w-full max-w-80
-        flex flex-col md:flex-row flex-wrap gap-1 items-center justify-start md:justify-center
+        flex flex-col flex-wrap gap-1 items-center justify-start md:justify-center
        "
        >
 {#if $lq__event_session_obj_li && $lq__event_session_obj_li.length > 0}
@@ -70,10 +70,23 @@ let hover_timer: any = $state(null);
 </div>

 <ul
-    class="space-y-1 max-w-full p-0 m-0"
+    class="
+        space-y-1
+        w-full max-w-full
+        p-0 m-0
+        flex flex-col gap-0.5 items-start justify-start
+        "
    >
    {#each $lq__event_session_obj_li as event_session_obj}
-        <li class="p-0 m-0">
+        <li
+            class="
+                p-0 m-0
+                w-full max-w-full
+                z-0 hover:z-20
+                hover:scale-120
+                transition-all
+                "
+                >
        <button
            type="button"
            onmouseenter={() => {
@@ -164,9 +177,11 @@ let hover_timer: any = $state(null);
            }}
            class="
                btn btn-sm hover:preset-filled-primary-500
-                overflow-hidden
+
                text-sm
-                w-full
+                w-full max-w-full
+                hover:min-w-fit
+                hover:max-w-2xl
                text-left
                m-0
                p-0
@@ -184,6 +199,8 @@ let hover_timer: any = $state(null);
            class:dim={event_session_obj?.hide}
            title={`Session: ${event_session_obj?.name}\nID: ${event_session_obj?.id} | ${ae_util.iso_datetime_formatter(event_session_obj?.start_datetime, $events_loc.launcher.time_format)}`}
            >
+            <!-- hover:scale-115 -->
+            <!-- hover:z-index-10     -->

            <span
                class="border-r border-surface-400-600 pr-1 min-w-28"
@@ -206,7 +223,14 @@ let hover_timer: any = $state(null);
                </span>
            </span>

-            <span class="text-xs max-w-44">
+            <span
+                class="
+                    grow text-xs
+                    min-w-32 hover:min-w-fit
+                    overflow-hidden hover:overflow-visible
+                    trasnition-all
+                    "
+                    >
                {event_session_obj?.name}
            </span>