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> </script>
<div class="pres_mgmt__session_search_menu ae_container_module_menu"> <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 <Comp__events_menu_nav
hide={!$ae_loc.authenticated_access} hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id} 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__locations={$ae_loc.administrator_access}
events__reports={$ae_loc.trusted_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} 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 --> <!-- Event Files toggle — the one real working button from the old menu, kept in place -->
<!-- <button <!-- <button
type="button" type="button"

View File

@@ -103,7 +103,7 @@
</title> </title>
</svelte:head> </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 <Location_page_menu
lq__event_location_obj={lq__event_location_obj} lq__event_location_obj={lq__event_location_obj}
lq__event_obj={lq__event_obj} lq__event_obj={lq__event_obj}
@@ -152,4 +152,4 @@
{/if} {/if}
{/if} {/if}
{/if} {/if}
</section> </div>

View File

@@ -64,7 +64,7 @@
<Comp__events_menu_nav <Comp__events_menu_nav
hide={!$ae_loc.authenticated_access} hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id} 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__locations={$ae_loc.trusted_access}
events__session_search={$events_slct.event_id} events__session_search={$events_slct.event_id}
/> />

View File

@@ -101,20 +101,7 @@
</title> </title>
</svelte:head> </svelte:head>
<section <div class="ae_events_pres_mgmt_event_locations w-full">
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
"
>
<Locations_page_menu {lq__event_obj} /> <Locations_page_menu {lq__event_obj} />
{#if !$lq__event_location_obj_li} {#if !$lq__event_location_obj_li}
@@ -164,7 +151,7 @@
{lq__event_location_obj_li} {lq__event_location_obj_li}
link_to_id={$events_slct?.event_id ?? ''} link_to_id={$events_slct?.event_id ?? ''}
/> />
</section> </div>
<style lang="postcss"> <style lang="postcss">
</style> </style>

View File

@@ -27,7 +27,7 @@
<Comp__events_menu_nav <Comp__events_menu_nav
hide={!$ae_loc.authenticated_access} hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id} 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__reports={$ae_loc.trusted_access}
events__session_search={$events_slct.event_id} events__session_search={$events_slct.event_id}
/> />

View File

@@ -124,7 +124,7 @@
</title> </title>
</svelte:head> </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} /> <Presenter_page_menu {lq__event_obj} {lq__event_presenter_obj} />
{#if !$lq__event_presenter_obj} {#if !$lq__event_presenter_obj}
@@ -495,7 +495,7 @@
</p> </p>
</div> </div>
{/if} {/if}
</section> </div>
<!-- Main modal --> <!-- Main modal -->
<Modal <Modal

View File

@@ -61,7 +61,7 @@
</script> </script>
<div class="pres_mgmt__presenter_view_menu ae_container_module_menu"> <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 <Comp__events_menu_nav
hide={false} hide={false}
@@ -72,7 +72,8 @@
events__session_search={$events_slct.event_id} 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"> <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 --> <!-- Options modal trigger -->
{#if $ae_loc.trusted_access} {#if $ae_loc.trusted_access}
<button <button
@@ -137,6 +138,7 @@
</span> </span>
{/if} {/if}
</div> </div>
</div>
<!-- Options Modal --> <!-- Options Modal -->
<Modal <Modal

View File

@@ -27,7 +27,7 @@
<Comp__events_menu_nav <Comp__events_menu_nav
hide={!$ae_loc.authenticated_access} hide={!$ae_loc.authenticated_access}
event_id={$lq__event_obj?.event_id} 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__locations={$ae_loc.trusted_access}
events__session_search={$events_slct.event_id} events__session_search={$events_slct.event_id}
/> />

View File

@@ -99,7 +99,7 @@
</title> </title>
</svelte:head> </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 $) --> <!-- Pass observable STORES to child components (they use $) -->
<Session_page_menu {data} {lq__event_session_obj} {lq__auth__event_presenter_obj} /> <Session_page_menu {data} {lq__event_session_obj} {lq__auth__event_presenter_obj} />
@@ -136,7 +136,7 @@
<span>Synchronizing with session data...</span> <span>Synchronizing with session data...</span>
</div> </div>
{/if} {/if}
</section> </div>
<!-- Modals --> <!-- Modals -->
<Modal <Modal

View File

@@ -77,7 +77,7 @@
</script> </script>
<div class="pres_mgmt__session_menu ae_container_module_menu"> <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 --> <!-- launcher_id is the event_location_id; launcher_session_id pre-loads this session in the launcher -->
<Comp__events_menu_nav <Comp__events_menu_nav
@@ -97,7 +97,8 @@
events__locations={$ae_loc.administrator_access} events__locations={$ae_loc.administrator_access}
/> />
<span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"> <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 --> <!-- Options modal trigger -->
{#if $ae_loc.trusted_access} {#if $ae_loc.trusted_access}
<button <button
@@ -136,6 +137,7 @@
{/if} {/if}
</span> </span>
</div> </div>
</div>
<!-- Options Modal --> <!-- Options Modal -->
<Modal <Modal

View File

@@ -46,7 +46,7 @@
<!-- This is for common navigation links. --> <!-- This is for common navigation links. -->
<div <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} class:hidden={hide}
> >
<span <span
@@ -54,7 +54,7 @@
> >
<a <a
href="/core" href="/core"
class="btn btn-sm mx-1 ae_btn_info" class="btn btn-sm mx-1 ae_btn_warning"
class:hidden={!ae_core} class:hidden={!ae_core}
> >
<span class="fas fa-cogs m-1"></span> <span class="fas fa-cogs m-1"></span>