Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Making things look nicer

Browse Source
This commit is contained in:
Scott Idem
2026-04-16 19:48:09 -04:00
parent 7543bf6ae5
commit 5fcf2e86f1
1 changed files with 88 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/ae_comp__pres_mgmt_session_search.svelte
View File

@@ -29,33 +29,31 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
autocomplete="off" autocomplete="off"
class="form flex w-full grow flex-row flex-wrap items-center justify-center gap-1 px-2 py-2"> class="form flex w-full grow flex-row flex-wrap items-center justify-center gap-1 px-2 py-2">
<!-- {#if $ae_loc.edit_mode} --> <span>
<!-- Location filter toggle + select (authenticated users only) --> <!-- Location filter toggle + select (authenticated users only) -->
<button <button
type="button" type="button"
class="btn btn-sm mx-1" class="btn btn-sm mx-1"
class:hidden={!$ae_loc.authenticated_access} class:hidden={!$ae_loc.authenticated_access}
class:opacity-10={pres_mgmt_loc.current.show_content__session_search_room_name} class:opacity-10={pres_mgmt_loc.current.show_content__session_search_room_name}
class:preset-filled-primary-300-700={pres_mgmt_loc.current.show_content__session_search_room_name} class:preset-filled-primary-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
class:preset-filled-primary-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name} class:preset-filled-primary-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
onclick={() => { onclick={() => {
pres_mgmt_loc.current.location_name_qry_str = ''; pres_mgmt_loc.current.location_name_qry_str = '';
pres_mgmt_loc.current.show_content__session_search_room_name = pres_mgmt_loc.current.show_content__session_search_room_name =
!pres_mgmt_loc.current.show_content__session_search_room_name; !pres_mgmt_loc.current.show_content__session_search_room_name;
handle_search_trigger(); handle_search_trigger();
}} }}
title="Filter by room / location"> title="Filter by room / location">
<MapPin size="1em" /> <MapPin size="1em" />
</button> </button>
<!-- Time window toggle icon button (authenticated only).
Highlighted when active so onsite staff can see at a glance whether the
filter is on. The controls below only appear when enabled. -->
<!-- TEMP: hide clock button for now, even in edit mode, since time filtering is a bit niche and the controls are a bit complex for non-technical users. Can re-enable when we have a better UI for the time filter controls. -->
<!-- Time window toggle icon button (authenticated only).
Highlighted when active so onsite staff can see at a glance whether the
filter is on. The controls below only appear when enabled. -->
<!-- TEMP: hide clock button for now, even in edit mode, since time filtering is a bit niche and the controls are a bit complex for non-technical users. Can re-enable when we have a better UI for the time filter controls. -->
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
@@ -74,7 +72,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
<Clock size="1em" /> <Clock size="1em" />
</button> </button>
<!-- {/if} --> </span>
<!-- Main search input --> <!-- Main search input -->
<!-- svelte-ignore a11y_autofocus --> <!-- svelte-ignore a11y_autofocus -->
@@ -123,8 +121,23 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
<!-- Remote First (edit_mode only) --> <!-- Remote First (edit_mode only) -->
{#if $ae_loc.edit_mode} {#if $ae_loc.edit_mode}
<label <label
class="bg-surface-200-800 rounded-token flex cursor-pointer items-center gap-1 px-2 py-1 text-xs font-semibold opacity-70 transition-all hover:opacity-100"> class="
<span> Remote First </span> flex flex-wrap items-center justify-center gap-1
text-xs font-semibold
bg-surface-50-950/50
opacity-70 hover:opacity-100
px-2 py-1
rounded-md
cursor-pointer
transition-all
"
>
<span
class="opacity-50"
class:opacity-100={pres_mgmt_loc.current.qry__remote_first}
>
Remote First
</span>
<input <input
type="checkbox" type="checkbox"
bind:checked={pres_mgmt_loc.current.qry__remote_first} bind:checked={pres_mgmt_loc.current.qry__remote_first}
@@ -136,20 +149,39 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
{#if pres_mgmt_loc.current.enable_time_window || {#if pres_mgmt_loc.current.enable_time_window ||
pres_mgmt_loc.current.show_content__session_search_room_name} pres_mgmt_loc.current.show_content__session_search_room_name}
<div class="w-full flex flex-wrap items-center justify-center gap-2 px-2 pb-2 text-xs"> <div class="
w-full
flex flex-wrap items-center justify-center gap-2
px-2
text-xs
"
>
<span class="flex flex-wrap items-center justify-center gap-2 text-xs"> <span class="
flex flex-wrap items-center justify-center gap-1
text-xs
bg-surface-50-950/50
opacity-70 hover:opacity-100
px-2 py-1
rounded-md
transition-all
"
>
<span class="opacity-50">
<MapPin size="0.875em" class="opacity-70" /> Location/Room:
</span>
<select <select
name="location_name_list" name="location_name_list"
id="session_location_name_list" id="session_location_name_list"
bind:value={pres_mgmt_loc.current.location_name_qry_str} bind:value={pres_mgmt_loc.current.location_name_qry_str}
class="input mx-1 w-min max-w-40 min-w-fit font-mono text-xs font-bold transition-all" class="input w-min max-w-40 min-w-fit font-mono text-xs font-semibold transition-all"
class:hidden={!$ae_loc.authenticated_access || class:hidden={!$ae_loc.authenticated_access ||
!pres_mgmt_loc.current.show_content__session_search_room_name} !pres_mgmt_loc.current.show_content__session_search_room_name}
onchange={() => handle_search_trigger()} onchange={() => handle_search_trigger()}
title="Filter by location / room name"> title="Filter by location / room name">
{#if event_location_obj_li} {#if event_location_obj_li}
<option value="">Location / Room</option> <option value="">-- none --</option>
{#each event_location_obj_li as loc (loc.event_location_id)} {#each event_location_obj_li as loc (loc.event_location_id)}
<option value={loc?.name}>{loc.name}</option> <option value={loc?.name}>{loc.name}</option>
{/each} {/each}
@@ -161,8 +193,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
type="button" type="button"
class="btn btn-sm mx-1" class="btn btn-sm mx-1"
class:hidden={!pres_mgmt_loc.current.show_content__session_search_room_name} class:hidden={!pres_mgmt_loc.current.show_content__session_search_room_name}
class:preset-filled-primary-300-700={pres_mgmt_loc.current.show_content__session_search_room_name} class:preset-filled-warning-300-700={pres_mgmt_loc.current.show_content__session_search_room_name}
class:preset-filled-primary-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
onclick={() => { onclick={() => {
pres_mgmt_loc.current.location_name_qry_str = ''; pres_mgmt_loc.current.location_name_qry_str = '';
pres_mgmt_loc.current.show_content__session_search_room_name = pres_mgmt_loc.current.show_content__session_search_room_name =
@@ -178,15 +209,27 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
Two simple selects (before / after current time) keep this readable for Two simple selects (before / after current time) keep this readable for
all experience levels without the noise of preset chip arrays. --> all experience levels without the noise of preset chip arrays. -->
{#if pres_mgmt_loc.current.enable_time_window} {#if pres_mgmt_loc.current.enable_time_window}
<div <span
class="flex flex-wrap items-center justify-center gap-2 text-xs"> class="
<Clock size="0.875em" class="opacity-50" /> flex flex-wrap items-center justify-center gap-1
<span class="font-semibold opacity-70">Showing sessions:</span> text-xs
<span class="opacity-50">−</span> bg-surface-50-950/50
opacity-70 hover:opacity-100
px-2 py-1
rounded-md
transition-all
"
>
<span class="opacity-50">
<Clock size="0.875em" class="opacity-70" /> Showing sessions:
</span>
<span class="opacity-50">&minus;</span>
<select <select
bind:value={pres_mgmt_loc.current.time_window_before_minutes} bind:value={pres_mgmt_loc.current.time_window_before_minutes}
onchange={handle_search_trigger} onchange={handle_search_trigger}
class="select select-sm max-w-fit px-1 text-xs"> class="select select-sm max-w-fit px-1 py-0 text-xs font-semibold">
<!-- <option value="">0m</option> -->
<option value={0}>0m</option> <option value={0}>0m</option>
<option value={25}>25m</option> <option value={25}>25m</option>
<option value={90}>90m</option> <option value={90}>90m</option>
@@ -198,12 +241,11 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
{#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if} {#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if}
{#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if} {#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if}
</select> </select>
<span class="opacity-40">to</span> <span class="opacity-50">to &plus;</span>
<span class="opacity-50">+</span>
<select <select
bind:value={pres_mgmt_loc.current.time_window_after_minutes} bind:value={pres_mgmt_loc.current.time_window_after_minutes}
onchange={handle_search_trigger} onchange={handle_search_trigger}
class="select select-sm max-w-fit px-1 text-xs"> class="select select-sm max-w-fit px-1 py-0 text-xs font-semibold">
<option value={90}>90m</option> <option value={90}>90m</option>
<option value={120}>2h</option> <option value={120}>2h</option>
<option value={240}>4h</option> <option value={240}>4h</option>
@@ -213,7 +255,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
{#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if} {#if $ae_loc.trusted_access}<option value={4320}>3d</option>{/if}
{#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if} {#if $ae_loc.trusted_access}<option value={10080}>7d</option>{/if}
</select> </select>
<span class="opacity-40">from now</span> <!-- <span class="opacity-50">from now</span> -->
<button <button
type="button" type="button"
@@ -227,11 +269,11 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
: 'Show only sessions near current time'} : 'Show only sessions near current time'}
class="btn btn-sm mx-1" class="btn btn-sm mx-1"
class:hidden={!pres_mgmt_loc.current.enable_time_window} class:hidden={!pres_mgmt_loc.current.enable_time_window}
class:preset-filled-primary-300-700={pres_mgmt_loc.current.enable_time_window} class:preset-filled-warning-300-700={pres_mgmt_loc.current.enable_time_window}
class:preset-filled-primary-100-900={!pres_mgmt_loc.current.enable_time_window}> >
<Clock size="1em" /> <Clock size="1em" />
</button> </button>
</div> </span>
{/if} {/if}
</div> </div>