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
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user