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 { .ae_module_header {
/* LCI request 3a5997 */ /* LCI request 3a5997 */
/* bg-gray-300 */ /* 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 { [data-theme='AE_c_LCI'] .ae_module_header {
@@ -385,7 +385,7 @@ html.trusted_access #appShell {
@apply container; @apply container;
} }
.ae_container_module_menu { .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; 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 { .ae_container_module_options {

View File

@@ -435,10 +435,9 @@ max-w-max -->
{:else if $lq__event_obj?.enable || $ae_loc.trusted_access} {:else if $lq__event_obj?.enable || $ae_loc.trusted_access}
<!-- <header> --> <header class="ae_module_header">
<h2 class="ae_module_header h3">
<span <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> <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 --> <!-- Button to toggle between the regular event view and managing event files -->
@@ -476,6 +475,8 @@ max-w-max -->
</button> </button>
</span> </span>
<h2 class="text-2xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl">
<span class="sm:inline-block md:hidden"> <span class="sm:inline-block md:hidden">
{$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name} {$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name}
</span> </span>
@@ -487,8 +488,8 @@ max-w-max -->
</span> </span>
</h2> </h2>
<!-- <h3 class="h4 text-center">Presentations - Session Lookup</h3> -->
<!-- </header> --> </header>

View File

@@ -40,7 +40,7 @@ import Comp__pres_mgmt_menu_nav from '../ae_comp__events_menu_nav.svelte';
/> />
<span <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 to toggle between the regular event session search view and managing event files -->
<button <button

View File

@@ -167,7 +167,13 @@ $effect(() => {
{:else if $lq__event_location_obj?.enable || $ae_loc.trusted_access} {: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"> <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 <span
class="flex flex-row gap-1 items-center" class="flex flex-row gap-1 items-center"
> >
@@ -210,6 +216,7 @@ $effect(() => {
{@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'} {#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 <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 to toggle between the regular location view and managing location files -->
<button <button

View File

@@ -106,7 +106,13 @@ onMount(() => {
{:else} {: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"> <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 <span
class="flex flex-row gap-1 items-center" class="flex flex-row gap-1 items-center"
> >
@@ -121,6 +127,7 @@ onMount(() => {
{@html $lq__event_obj?.name ?? ae_snip.html__not_set} {@html $lq__event_obj?.name ?? ae_snip.html__not_set}
{/if} {/if}
</h2> </h2>
</header>
<Element_data_store <Element_data_store
ds_code="events__pres_mgmt__locations_msg" 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 <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 to toggle between showing and not showing the extended options menu -->
<button <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 --> <!-- BEGIN: The expanded menu area for information and options -->
<div <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'} 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} {:else if $lq__event_presenter_obj?.enable || $ae_loc.trusted_access}
<h2 class="ae_module_header h4"> <header class="ae_module_header">
<span <span
class="flex flex-row flex-wrap gap-1 items-center justify-center" 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> </button>
</span> </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} {@html $lq__event_presenter_obj?.full_name ?? ae_snip.html__not_set}
<!-- <span class="text-sm text-gray-600 dark:text-gray-400"> <!-- <span class="text-sm text-gray-600 dark:text-gray-400">
Presenter ID: {$lq__event_presenter_obj?.event_presenter_id} Presenter ID: {$lq__event_presenter_obj?.event_presenter_id}
</span> --> </span> -->
</h2>
<span <span
@@ -258,7 +263,8 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
</span> </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} {#if !$events_loc.pres_mgmt.show_content__presenter_view || $events_loc.pres_mgmt.show_content__presenter_view == 'default' && $lq__event_presenter_obj}
<Presenter_view <Presenter_view

View File

@@ -43,7 +43,7 @@ let ae_triggers: key_val = $state({});
/> />
<span <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 to toggle between the regular presenter view and managing presenter files -->
<button <button

View File

@@ -566,10 +566,16 @@ async function handle_qry__event_session(
{:else} {:else}
<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 <h2
class=" class="
h2 text-center rounded-md p-1 px-2 h2 text-center
preset-filled-surface-400-600 text-neutral-800/90
flex flex-row gap-0.25 items-center justify-between w-full flex flex-row gap-0.25 items-center justify-between w-full
" "
> >
@@ -587,6 +593,10 @@ async function handle_qry__event_session(
{/if} {/if}
</h2> </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"> <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} {:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
<h2 class="ae_module_header h4"> <header class="ae_module_header">
<span <span
class="flex flex-row flex-wrap gap-1 items-center justify-center" 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> </button>
</span> </span>
<span class="flex flex-row flex-wrap gap-1 items-center justify-end text-right"> <span class="grow flex flex-row flex-wrap gap-1 items-center justify-around">
<span class="max-w-xs sm:max-w-lg md:max-w-2xl"> <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} {@html $lq__event_session_obj?.name ?? ae_snip.html__not_set}
</span> <!-- </span> -->
</h2>
{#if !$events_loc.pres_mgmt?.hide__session_code && $lq__event_session_obj.code || $ae_loc.edit_mode} {#if !$events_loc.pres_mgmt?.hide__session_code && $lq__event_session_obj.code || $ae_loc.edit_mode}
<span <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}" title="Session code {$lq__event_session_obj.code}"
> >
<span class="text-xs text-surface-800-200"> <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> </span>
{/if} {/if}
</span> </span>
</h2>
</header>
<Element_data_store <Element_data_store
ds_code="events__pres_mgmt__session_msg" ds_code="events__pres_mgmt__session_msg"

View File

@@ -56,7 +56,7 @@ let ae_triggers: key_val = $state({});
/> />
<span <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 to toggle between the regular session view and managing session files -->
<button <button

View File

@@ -56,7 +56,7 @@ export let events__session_search: boolean = false; // event_id
</span> </span>
<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 <a
href="/events/{events__session_search}" href="/events/{events__session_search}"