More work on styles... flex wraps everywhere.

This commit is contained in:
Scott Idem
2025-09-19 10:32:08 -04:00
parent 5527bce327
commit fc4e59dd8c
13 changed files with 144 additions and 110 deletions

View File

@@ -368,7 +368,7 @@ html.trusted_access #appShell {
.ae_module_header {
/* LCI request 3a5997 */
/* bg-gray-300 */
@apply preset-tonal-surface rounded-md flex flex-row gap-0.25 items-center justify-between w-full p-1 px-2;
@apply preset-tonal-surface rounded-md flex flex-col md:flex-row flex-wrap gap-0.25 items-center justify-between w-full max-w-7xl p-1 px-2;
}
[data-theme='AE_c_LCI'] .ae_module_header {
@@ -385,7 +385,7 @@ html.trusted_access #appShell {
@apply container;
}
.ae_container_module_menu {
@apply w-full flex flex-col items-center justify-center gap-1 p-1
@apply w-full max-w-7xl flex flex-col items-center justify-center gap-1 p-1
border rounded-md border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-700 hover:duration-300;
}
.ae_container_module_options {

View File

@@ -435,10 +435,9 @@ max-w-max -->
{:else if $lq__event_obj?.enable || $ae_loc.trusted_access}
<!-- <header> -->
<h2 class="ae_module_header h3">
<header class="ae_module_header">
<span
class="flex flex-row gap-1 items-center"
class="flex flex-row flex-wrap gap-1 items-center justify-center"
>
<span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
<!-- Button to toggle between the regular event view and managing event files -->
@@ -476,19 +475,21 @@ max-w-max -->
</button>
</span>
<span class="sm:inline-block md:hidden">
{$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name}
</span>
<span class="hidden md:inline-block lg:hidden">
{$lq__event_obj.cfg_json?.med_name ?? $lq__event_obj?.name}
</span>
<span class="hidden lg:inline-block">
{$lq__event_obj.cfg_json?.long_name ?? $lq__event_obj?.name}
</span>
<h2 class="text-2xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl">
</h2>
<!-- <h3 class="h4 text-center">Presentations - Session Lookup</h3> -->
<!-- </header> -->
<span class="sm:inline-block md:hidden">
{$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name}
</span>
<span class="hidden md:inline-block lg:hidden">
{$lq__event_obj.cfg_json?.med_name ?? $lq__event_obj?.name}
</span>
<span class="hidden lg:inline-block">
{$lq__event_obj.cfg_json?.long_name ?? $lq__event_obj?.name}
</span>
</h2>
</header>

View File

@@ -40,7 +40,7 @@ import Comp__pres_mgmt_menu_nav from '../ae_comp__events_menu_nav.svelte';
/>
<span
class="ae_menu__object_options flex flex-row items-center justify-around"
class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
>
<!-- Button to toggle between the regular event session search view and managing event files -->
<button

View File

@@ -167,49 +167,56 @@ $effect(() => {
{:else if $lq__event_location_obj?.enable || $ae_loc.trusted_access}
<h2 class="h2 text-center rounded-md p-1 px-2 bg-gray-300 flex flex-row gap-0.25 items-center justify-between w-full">
<span
class="flex flex-row gap-1 items-center"
<header class="ae_module_header">
<h2
class="
text-2xl font-bold text-center
flex flex-row gap-0.25 items-center justify-between w-full
"
>
<span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
<!-- Button to toggle between the regular location view and managing location files -->
<button
type="button"
onclick={() => {
if ($events_loc.pres_mgmt.show_content__location_view == 'manage_files') {
$events_loc.pres_mgmt.show_content__location_view = null;
} else {
$events_loc.pres_mgmt.show_content__location_view = 'manage_files';
}
}}
class="btn btn-md hover:preset-filled-secondary-500"
class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__location_view != 'manage_files'}
class:hidden={!$ae_loc.administrator_access}
title="View location information or manage files for the location"
<span
class="flex flex-row gap-1 items-center"
>
{#if $events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
<span class="fas fa-info m-1"></span>
<!-- View Details -->
Location Info?
{:else}
<span class="fas fa-file-archive m-1"></span>
Location Files?
<span
class="badge preset-tonal-success"
class:hidden={!$lq__event_obj?.file_count}
>
<!-- absolute -top-1.5 -right-1.5 z-10 -->
<span class="fas fa-file-alt m-1"></span>
{$lq__event_obj?.file_count}×
</span>
{/if}
</button>
</span>
<span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
<!-- Button to toggle between the regular location view and managing location files -->
<button
type="button"
onclick={() => {
if ($events_loc.pres_mgmt.show_content__location_view == 'manage_files') {
$events_loc.pres_mgmt.show_content__location_view = null;
} else {
$events_loc.pres_mgmt.show_content__location_view = 'manage_files';
}
}}
class="btn btn-md hover:preset-filled-secondary-500"
class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__location_view != 'manage_files'}
class:hidden={!$ae_loc.administrator_access}
title="View location information or manage files for the location"
>
{#if $events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
<span class="fas fa-info m-1"></span>
<!-- View Details -->
Location Info?
{:else}
<span class="fas fa-file-archive m-1"></span>
Location Files?
<span
class="badge preset-tonal-success"
class:hidden={!$lq__event_obj?.file_count}
>
<!-- absolute -top-1.5 -right-1.5 z-10 -->
<span class="fas fa-file-alt m-1"></span>
{$lq__event_obj?.file_count}×
</span>
{/if}
</button>
</span>
{@html $lq__event_location_obj?.name ?? ae_snip.html__not_set}
{@html $lq__event_location_obj?.name ?? ae_snip.html__not_set}
</h2>
</h2>
</header>
{#if !$events_loc.pres_mgmt.show_content__location_view || $events_loc.pres_mgmt.show_content__location_view == 'default'}

View File

@@ -42,7 +42,7 @@ let ae_triggers: key_val = $state({});
/>
<span
class="ae_menu__object_options flex flex-row items-center justify-around"
class="ae_menu__object_options flex flex-row flex-wrap items-center justify-around"
>
<!-- Button to toggle between the regular location view and managing location files -->
<button

View File

@@ -106,21 +106,28 @@ onMount(() => {
{:else}
<h2 class="h2 text-center rounded-md p-1 px-2 bg-gray-300 flex flex-row gap-0.25 items-center justify-between w-full">
<span
class="flex flex-row gap-1 items-center"
<header class="ae_module_header">
<h2
class="
text-2xl font-bold text-center
flex flex-row gap-0.25 items-center justify-between w-full
"
>
<span class="fas fa-map-marked m-1 text-neutral-800/80"></span>
Locations/Rooms
<!-- Button to toggle between the regular location view and managing locations??? -->
</span>
<!-- Locations for: -->
{#if $lq__event_obj?.cfg_json?.short_name}
{@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
{:else}
{@html $lq__event_obj?.name ?? ae_snip.html__not_set}
{/if}
</h2>
<span
class="flex flex-row gap-1 items-center"
>
<span class="fas fa-map-marked m-1 text-neutral-800/80"></span>
Locations/Rooms
<!-- Button to toggle between the regular location view and managing locations??? -->
</span>
<!-- Locations for: -->
{#if $lq__event_obj?.cfg_json?.short_name}
{@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
{:else}
{@html $lq__event_obj?.name ?? ae_snip.html__not_set}
{/if}
</h2>
</header>
<Element_data_store
ds_code="events__pres_mgmt__locations_msg"

View File

@@ -40,7 +40,7 @@ import Comp__events_menu_nav from './../../ae_comp__events_menu_nav.svelte';
/>
<span
class="ae_menu__object_options flex flex-row items-center justify-around"
class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
>
<!-- Button to toggle between showing and not showing the extended options menu -->
<button
@@ -95,7 +95,7 @@ import Comp__events_menu_nav from './../../ae_comp__events_menu_nav.svelte';
<!-- BEGIN: The expanded menu area for information and options -->
<div
class="flex flex-row items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
class="flex flex-row flex-wrap gap-0.5 items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
class:hidden={$events_loc.pres_mgmt.show_menu__location != 'options'}
>

View File

@@ -120,7 +120,7 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
{:else if $lq__event_presenter_obj?.enable || $ae_loc.trusted_access}
<h2 class="ae_module_header h4">
<header class="ae_module_header">
<span
class="flex flex-row flex-wrap gap-1 items-center justify-center"
>
@@ -160,11 +160,16 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
</button>
</span>
{@html $lq__event_presenter_obj?.full_name ?? ae_snip.html__not_set}
<!-- <span class="text-sm text-gray-600 dark:text-gray-400">
Presenter ID: {$lq__event_presenter_obj?.event_presenter_id}
</span> -->
<!-- <span class="grow flex flex-row flex-wrap gap-1 items-center justify-around"> -->
<h2
class="text-2xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl"
title="{$lq__event_presenter_obj?.full_name} ID: {$lq__event_presenter_obj?.event_presenter_id}"
>
{@html $lq__event_presenter_obj?.full_name ?? ae_snip.html__not_set}
<!-- <span class="text-sm text-gray-600 dark:text-gray-400">
Presenter ID: {$lq__event_presenter_obj?.event_presenter_id}
</span> -->
</h2>
<span
@@ -258,7 +263,8 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
</span>
</h2>
</header>
{#if !$events_loc.pres_mgmt.show_content__presenter_view || $events_loc.pres_mgmt.show_content__presenter_view == 'default' && $lq__event_presenter_obj}
<Presenter_view

View File

@@ -43,7 +43,7 @@ let ae_triggers: key_val = $state({});
/>
<span
class="ae_menu__object_options flex flex-row flex-wrap items-center justify-around"
class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
>
<!-- Button to toggle between the regular presenter view and managing presenter files -->
<button

View File

@@ -566,26 +566,36 @@ async function handle_qry__event_session(
{:else}
<h2
class="
h2 text-center rounded-md p-1 px-2
preset-filled-surface-400-600 text-neutral-800/90
flex flex-row gap-0.25 items-center justify-between w-full
"
<header class="ae_module_header">
<!-- <span
class="flex flex-row flex-wrap gap-1 items-center justify-center"
> -->
<!-- rounded-md p-1 px-2 -->
<!-- preset-filled-surface-400-600 text-neutral-800/90 -->
<h2
class="
h2 text-center
flex flex-row gap-0.25 items-center justify-between w-full
"
>
<span
class="flex flex-row gap-1 items-center"
>
<span class="fas fa-chart-line m-1 text-neutral-800/80"></span>
Reports
</span>
<!-- Reports for: -->
{#if $lq__event_obj?.cfg_json?.short_name}
{@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
{:else}
{@html $lq__event_obj?.name ?? ae_snip.html__not_set}
{/if}
</h2>
<span
class="flex flex-row gap-1 items-center"
>
<span class="fas fa-chart-line m-1 text-neutral-800/80"></span>
Reports
</span>
<!-- Reports for: -->
{#if $lq__event_obj?.cfg_json?.short_name}
{@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
{:else}
{@html $lq__event_obj?.name ?? ae_snip.html__not_set}
{/if}
</h2>
<!-- </span> -->
</header>
<div class="preset-tonal-success border border-success-500 my-2 p-2 rounded-md flex flex-row flex-wrap gap-1 items-center justify-center">

View File

@@ -189,7 +189,7 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
{:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
<h2 class="ae_module_header h4">
<header class="ae_module_header">
<span
class="flex flex-row flex-wrap gap-1 items-center justify-center"
>
@@ -229,14 +229,16 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
</button>
</span>
<span class="flex flex-row flex-wrap gap-1 items-center justify-end text-right">
<span class="max-w-xs sm:max-w-lg md:max-w-2xl">
{@html $lq__event_session_obj?.name ?? ae_snip.html__not_set}
</span>
<span class="grow flex flex-row flex-wrap gap-1 items-center justify-around">
<h2 class="text-xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl">
<!-- <span class="max-w-xs sm:max-w-lg md:max-w-2xl"> -->
{@html $lq__event_session_obj?.name ?? ae_snip.html__not_set}
<!-- </span> -->
</h2>
{#if !$events_loc.pres_mgmt?.hide__session_code && $lq__event_session_obj.code || $ae_loc.edit_mode}
<span
class="badge text-sm preset-tonal-tertiary flex flex-col gap-0.25 max-w-fit"
class="badge text-sm preset-tonal-surface flex flex-col gap-0.25 max-w-fit shrink"
title="Session code {$lq__event_session_obj.code}"
>
<span class="text-xs text-surface-800-200">
@@ -247,7 +249,8 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
</span>
{/if}
</span>
</h2>
</header>
<Element_data_store
ds_code="events__pres_mgmt__session_msg"

View File

@@ -56,7 +56,7 @@ let ae_triggers: key_val = $state({});
/>
<span
class="ae_menu__object_options flex flex-row items-center justify-around"
class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
>
<!-- Button to toggle between the regular session view and managing session files -->
<button

View File

@@ -56,7 +56,7 @@ export let events__session_search: boolean = false; // event_id
</span>
<span
class="ae_menu__navigation_options flex flex-row flex-wrap items-center justify-around"
class="ae_menu__navigation_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
>
<a
href="/events/{events__session_search}"