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:
7
src/routes/events/[event_id]/(pres_mgmt)/+layout.svelte
Normal file
7
src/routes/events/[event_id]/(pres_mgmt)/+layout.svelte
Normal 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>
|
||||
@@ -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"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user