Skip to content

Commit

Permalink
fix: hotfix facilities filter
Browse files Browse the repository at this point in the history
1. the let:ariaLabelledBy directive was placed wrongly, it is meant to expose a variable to the template of the slot consumer, and should be defined therein https://svelte.dev/docs/special-elements#slot-slot-key-value (not as a parent component attribute). It's possible the recent a Svelte upgrade made this wrong syntax break.
2. the TopNav z-index made the top nav appear over the modal on desktop. It might have been needed before, but since we dynamically pushed down the map frame below the top nav on desktop (no more overlap), it shouldn't be needed anymore.
  • Loading branch information
th0rgall committed Aug 1, 2023
1 parent 16b9009 commit fb46a68
Show file tree
Hide file tree
Showing 3 changed files with 4 additions and 3 deletions.
4 changes: 2 additions & 2 deletions src/lib/components/Garden/FacilitiesFilter.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
let vw;
// Stick the modal to the bottom on mobile
$: {
if (vw < maxWidth) {
stickToBottom = true;
Expand All @@ -68,9 +69,8 @@
{stickToBottom}
nopadding={stickToBottom}
ariaLabelledBy="title"
let:ariaLabelledBy
>
<div slot="title" class="gardenFilterTitleSection" id={ariaLabelledBy}>
<div slot="title" class="gardenFilterTitleSection" let:ariaLabelledBy id={ariaLabelledBy}>
<h2 id="gardenFilterTitle">{$_('garden.filter.title')}</h2>
</div>
<div slot="body" class="gardenFilterBodySection">
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Nav/Top/TopNav.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@
<!-- TODO: Maybe replace later with: https://github.com/sveltejs/svelte/issues/3105#issuecomment-1440443254 -->
<!-- !important is necessary because the svelte component-scoped CSS otherwise has higher CSS specificity -->
{#if $user?.superfan}
<!-- Hide the extra bar -->
<!-- Hide the extra bar -->
<style>
.nav-extra {
Expand Down Expand Up @@ -108,7 +109,6 @@
width: 100%;
display: flex;
flex-direction: column;
z-index: 110;
background-color: var(--color-white);
box-shadow: 0 0 3.3rem rgba(0, 0, 0, 0.1);
}
Expand Down
1 change: 1 addition & 0 deletions src/lib/components/UI/Modal.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
{ariaLabelledBy} inserts an "arialabelledby" attribute (which is not a valid ARIA attribute)
but it also propagates the given value of ariaLabelledBy back to the let:ariaLabelledBy property on the parent,
so it can be used within slots by component users without repeating the concrete value of ariaLabelledBy.
https://svelte.dev/docs/special-elements#slot-slot-key-value
-->
<slot name="title" {ariaLabelledBy} class="modal-title" />
{#if closeButton}
Expand Down

0 comments on commit fb46a68

Please sign in to comment.