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"
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) -->
<button
type="button"
class="btn btn-sm mx-1"
class:hidden={!$ae_loc.authenticated_access}
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-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
onclick={() => {
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;
handle_search_trigger();
}}
title="Filter by room / location">
<MapPin size="1em" />
</button>
<!-- Location filter toggle + select (authenticated users only) -->
<button
type="button"
class="btn btn-sm mx-1"
class:hidden={!$ae_loc.authenticated_access}
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-100-900={!pres_mgmt_loc.current.show_content__session_search_room_name}
onclick={() => {
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;
handle_search_trigger();
}}
title="Filter by room / location">
<MapPin size="1em" />
</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. -->
<!-- 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. -->
<!-- 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
type="button"
onclick={() => {
@@ -74,7 +72,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
<Clock size="1em" />
</button>
<!-- {/if} -->
</span>
<!-- Main search input -->
<!-- svelte-ignore a11y_autofocus -->
@@ -123,8 +121,23 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
<!-- Remote First (edit_mode only) -->
{#if $ae_loc.edit_mode}
<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">
<span> Remote First </span>
class="
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
type="checkbox"
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 ||
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
name="location_name_list"
id="session_location_name_list"
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 ||
!pres_mgmt_loc.current.show_content__session_search_room_name}
onchange={() => handle_search_trigger()}
title="Filter by location / room name">
{#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)}
<option value={loc?.name}>{loc.name}</option>
{/each}
@@ -161,8 +193,7 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
type="button"
class="btn btn-sm mx-1"
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-primary-100-900={!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}
onclick={() => {
pres_mgmt_loc.current.location_name_qry_str = '';
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
all experience levels without the noise of preset chip arrays. -->
{#if pres_mgmt_loc.current.enable_time_window}
<div
class="flex flex-wrap items-center justify-center gap-2 text-xs">
<Clock size="0.875em" class="opacity-50" />
<span class="font-semibold opacity-70">Showing sessions:</span>
<span class="opacity-50">−</span>
<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">
<Clock size="0.875em" class="opacity-70" /> Showing sessions:
</span>
<span class="opacity-50">&minus;</span>
<select
bind:value={pres_mgmt_loc.current.time_window_before_minutes}
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={25}>25m</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={10080}>7d</option>{/if}
</select>
<span class="opacity-40">to</span>
<span class="opacity-50">+</span>
<span class="opacity-50">to &plus;</span>
<select
bind:value={pres_mgmt_loc.current.time_window_after_minutes}
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={120}>2h</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={10080}>7d</option>{/if}
</select>
<span class="opacity-40">from now</span>
<!-- <span class="opacity-50">from now</span> -->
<button
type="button"
@@ -227,11 +269,11 @@ function prevent_default<T extends Event>(fn: (event: T) => void) {
: 'Show only sessions near current time'}
class="btn btn-sm mx-1"
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-primary-100-900={!pres_mgmt_loc.current.enable_time_window}>
class:preset-filled-warning-300-700={pres_mgmt_loc.current.enable_time_window}
>
<Clock size="1em" />
</button>
</div>
</span>
{/if}
</div>