refactor(pres_mgmt): consistent layout, menu structure, and centering

- Add (pres_mgmt)/+layout.svelte with shared section wrapper (max-w-7xl mx-auto)
  so all child pages center correctly on wide viewports
- Strip per-page outer <section> tags from session, presenter, location pages;
  replace with inner <div max-w-7xl mx-auto> for detail constraint
- Restructure all page menus from flex-row to flex-col so nav bar occupies its
  own row and options/actions sit in a separate justified row below — prevents
  unwanted wrapping when nav is w-full
- Standardize Æ Core button visibility to edit_mode && manager_access across all
  menus; update button style to ae_btn_warning for visual distinction
- Add w-full + justify-between to ae_comp__events_menu_nav outer div

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-13 13:11:23 -04:00
parent 752dca290a
commit 0c18eea31c
12 changed files with 121 additions and 123 deletions

View File

@@ -0,0 +1,7 @@
<script lang="ts">
let { children } = $props();
</script>
<section class="ae_events_pres_mgmt w-full max-w-7xl mx-auto flex flex-col gap-1 py-1 px-2 pb-16">
{@render children?.()}
</section>

View File

@@ -56,19 +56,19 @@
</script>
<div class="pres_mgmt__session_search_menu ae_container_module_menu">
<div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
<div class="flex flex-col gap-1 w-full">
<Comp__events_menu_nav
hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id}
ae_core={$ae_loc.administrator_access}
ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
events__locations={$ae_loc.administrator_access}
events__reports={$ae_loc.trusted_access}
events__settings={$ae_loc.edit_mode && $ae_loc.administrator_access}
events__settings={$ae_loc.edit_mode && $ae_loc.manager_access}
events__session_search={false}
/>
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around">
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-between w-full">
<!-- Event Files toggle — the one real working button from the old menu, kept in place -->
<!-- <button
type="button"

View File

@@ -103,7 +103,7 @@
</title>
</svelte:head>
<section class="ae_events_pres_mgmt_event_location container mx-auto py-1 px-2 pb-16 space-y-6">
<div class="ae_events_pres_mgmt_event_location w-full max-w-7xl mx-auto space-y-6">
<Location_page_menu
lq__event_location_obj={lq__event_location_obj}
lq__event_obj={lq__event_obj}
@@ -152,4 +152,4 @@
{/if}
{/if}
{/if}
</section>
</div>

View File

@@ -64,7 +64,7 @@
<Comp__events_menu_nav
hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id}
ae_core={$ae_loc.administrator_access}
ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
events__locations={$ae_loc.trusted_access}
events__session_search={$events_slct.event_id}
/>

View File

@@ -101,20 +101,7 @@
</title>
</svelte:head>
<section
class="
ae_events_pres_mgmt_event_location
md:container
flex flex-col gap-1
items-center
justify-start
mx-auto
py-1 px-2 pb-16
h-full
min-w-full
max-w-max
"
>
<div class="ae_events_pres_mgmt_event_locations w-full">
<Locations_page_menu {lq__event_obj} />
{#if !$lq__event_location_obj_li}
@@ -164,7 +151,7 @@
{lq__event_location_obj_li}
link_to_id={$events_slct?.event_id ?? ''}
/>
</section>
</div>
<style lang="postcss">
</style>

View File

@@ -27,7 +27,7 @@
<Comp__events_menu_nav
hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id}
ae_core={$ae_loc.administrator_access}
ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
events__reports={$ae_loc.trusted_access}
events__session_search={$events_slct.event_id}
/>

View File

@@ -124,7 +124,7 @@
</title>
</svelte:head>
<section class="ae_events_pres_mgmt_event_presenter w-full flex flex-col gap-1 py-1 px-2 pb-16">
<div class="ae_events_pres_mgmt_event_presenter w-full max-w-7xl mx-auto">
<Presenter_page_menu {lq__event_obj} {lq__event_presenter_obj} />
{#if !$lq__event_presenter_obj}
@@ -495,7 +495,7 @@
</p>
</div>
{/if}
</section>
</div>
<!-- Main modal -->
<Modal

View File

@@ -61,7 +61,7 @@
</script>
<div class="pres_mgmt__presenter_view_menu ae_container_module_menu">
<div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
<div class="flex flex-col gap-1 w-full">
<Comp__events_menu_nav
hide={false}
@@ -72,70 +72,72 @@
events__session_search={$events_slct.event_id}
/>
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around">
<!-- Options modal trigger -->
{#if $ae_loc.trusted_access}
<button
type="button"
onclick={() => (show_modal = true)}
class="btn btn-sm ae_btn_info"
title="Presenter options"
>
<Settings size="1em" class="mr-1" />
Options
</button>
{/if}
<!-- Help toggle -->
<button
type="button"
onclick={() => (show_help = !show_help)}
class="btn btn-sm"
class:ae_btn_info_filled={show_help}
class:ae_btn_info={!show_help}
title="Help and information about the presenter"
>
<Info size="1em" class="mr-1" />
{show_help ? 'Hide Help' : 'Help'}
</button>
</span>
<!-- Presenter agreement action (shown when require__presenter_agree is on) -->
{#if $events_loc.pres_mgmt?.require__presenter_agree}
<span class="ae_menu__action_options flex flex-row items-center justify-around">
{#if $lq__event_presenter_obj?.agree}
<div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center">
<!-- Options modal trigger -->
{#if $ae_loc.trusted_access}
<button
type="button"
disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
onclick={() => {
$events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
$events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
$events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
}}
class="btn btn-sm mx-1 font-bold ae_btn_success_filled"
title="Agreed to terms and conditions"
onclick={() => (show_modal = true)}
class="btn btn-sm ae_btn_info"
title="Presenter options"
>
<span class="fas fa-check text-green-500 px-1"></span>
Agreed
</button>
{:else}
<button
type="button"
disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
onclick={() => {
$events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
$events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
$events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
}}
class="btn btn-sm mx-1 font-bold ae_btn_warning_filled"
title="View terms and conditions"
>
<span class="fas fa-times bg-red-500 text-white px-1 mx-1"></span>
Not yet agreed
<Settings size="1em" class="mr-1" />
Options
</button>
{/if}
<!-- Help toggle -->
<button
type="button"
onclick={() => (show_help = !show_help)}
class="btn btn-sm"
class:ae_btn_info_filled={show_help}
class:ae_btn_info={!show_help}
title="Help and information about the presenter"
>
<Info size="1em" class="mr-1" />
{show_help ? 'Hide Help' : 'Help'}
</button>
</span>
{/if}
<!-- Presenter agreement action (shown when require__presenter_agree is on) -->
{#if $events_loc.pres_mgmt?.require__presenter_agree}
<span class="ae_menu__action_options flex flex-row items-center justify-around">
{#if $lq__event_presenter_obj?.agree}
<button
type="button"
disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
onclick={() => {
$events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
$events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
$events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
}}
class="btn btn-sm mx-1 font-bold ae_btn_success_filled"
title="Agreed to terms and conditions"
>
<span class="fas fa-check text-green-500 px-1"></span>
Agreed
</button>
{:else}
<button
type="button"
disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
onclick={() => {
$events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
$events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
$events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
}}
class="btn btn-sm mx-1 font-bold ae_btn_warning_filled"
title="View terms and conditions"
>
<span class="fas fa-times bg-red-500 text-white px-1 mx-1"></span>
Not yet agreed
</button>
{/if}
</span>
{/if}
</div>
</div>
<!-- Options Modal -->

View File

@@ -27,7 +27,7 @@
<Comp__events_menu_nav
hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id}
ae_core={$ae_loc.administrator_access}
ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
events__locations={$ae_loc.trusted_access}
events__session_search={$events_slct.event_id}
/>

View File

@@ -99,7 +99,7 @@
</title>
</svelte:head>
<section class="ae_events_pres_mgmt_event_session w-full py-1 px-2 pb-16 space-y-6">
<div class="ae_events_pres_mgmt_event_session w-full max-w-7xl mx-auto space-y-6">
<!-- Pass observable STORES to child components (they use $) -->
<Session_page_menu {data} {lq__event_session_obj} {lq__auth__event_presenter_obj} />
@@ -136,7 +136,7 @@
<span>Synchronizing with session data...</span>
</div>
{/if}
</section>
</div>
<!-- Modals -->
<Modal

View File

@@ -77,7 +77,7 @@
</script>
<div class="pres_mgmt__session_menu ae_container_module_menu">
<div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
<div class="flex flex-col gap-1 w-full">
<!-- launcher_id is the event_location_id; launcher_session_id pre-loads this session in the launcher -->
<Comp__events_menu_nav
@@ -97,44 +97,46 @@
events__locations={$ae_loc.administrator_access}
/>
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around">
<!-- Options modal trigger -->
{#if $ae_loc.trusted_access}
<div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center">
<!-- Options modal trigger -->
{#if $ae_loc.trusted_access}
<button
type="button"
onclick={() => (show_modal = true)}
class="btn btn-sm ae_btn_info"
title="Session options"
>
<Settings size="1em" class="mr-1" />
Options
</button>
{/if}
<!-- Help toggle -->
<button
type="button"
onclick={() => (show_modal = true)}
class="btn btn-sm ae_btn_info"
title="Session options"
onclick={() => (show_help = !show_help)}
class="btn btn-sm"
class:ae_btn_info_filled={show_help}
class:ae_btn_info={!show_help}
title="Help and information about the session"
>
<Settings size="1em" class="mr-1" />
Options
<Info size="1em" class="mr-1" />
{show_help ? 'Hide Help' : 'Help'}
</button>
{/if}
</span>
<!-- Help toggle -->
<button
type="button"
onclick={() => (show_help = !show_help)}
class="btn btn-sm"
class:ae_btn_info_filled={show_help}
class:ae_btn_info={!show_help}
title="Help and information about the session"
>
<Info size="1em" class="mr-1" />
{show_help ? 'Hide Help' : 'Help'}
</button>
</span>
<span class="ae_menu__action_options" class:hidden={!$events_loc.auth__person?.id}>
{#if $lq__event_session_obj?.event_id}
<Sign_in_out
{data}
event_session_id={$lq__event_session_obj?.event_id}
{lq__event_session_obj}
{lq__auth__event_presenter_obj}
/>
{/if}
</span>
<span class="ae_menu__action_options" class:hidden={!$events_loc.auth__person?.id}>
{#if $lq__event_session_obj?.event_id}
<Sign_in_out
{data}
event_session_id={$lq__event_session_obj?.event_id}
{lq__event_session_obj}
{lq__auth__event_presenter_obj}
/>
{/if}
</span>
</div>
</div>
<!-- Options Modal -->

View File

@@ -46,7 +46,7 @@
<!-- This is for common navigation links. -->
<div
class="ae_comp__events_menu_nav flex flex-row flex-wrap gap-1.5 items-center justify-around"
class="ae_comp__events_menu_nav w-full flex flex-row flex-wrap gap-1.5 items-center justify-between"
class:hidden={hide}
>
<span
@@ -54,7 +54,7 @@
>
<a
href="/core"
class="btn btn-sm mx-1 ae_btn_info"
class="btn btn-sm mx-1 ae_btn_warning"
class:hidden={!ae_core}
>
<span class="fas fa-cogs m-1"></span>