From 6f6552e2810df365e9a8c4daf9c1e22250acd610 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 15 Oct 2024 15:24:02 -0400 Subject: [PATCH 1/8] various mobile nav fixes --- packages/site-kit/src/lib/nav/Menu.svelte | 12 +- .../src/lib/nav/NavContextMenu.svelte | 129 +++++++----------- 2 files changed, 56 insertions(+), 85 deletions(-) diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 5fa5aecbf5..073aa72d20 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -218,6 +218,7 @@ {#if current_menu_view} {/if} @@ -328,13 +329,9 @@ & :global(a) { position: relative; - display: flex; - align-items: center; padding: 0.3rem 0; - margin: 0.3rem 0; - color: var(--sk-text-2); + color: var(--sk-text-3); font: var(--sk-font-ui-medium); - border-radius: var(--sk-border-radius); width: 100%; height: 100%; } @@ -347,6 +344,11 @@ padding: 1rem var(--sk-page-padding-side); max-height: 70vh; overflow-y: scroll; + + button { + /* width: 2.6rem; */ + height: 2.6rem; + } } .context { diff --git a/packages/site-kit/src/lib/nav/NavContextMenu.svelte b/packages/site-kit/src/lib/nav/NavContextMenu.svelte index 8d5d009dc6..4bf58064df 100644 --- a/packages/site-kit/src/lib/nav/NavContextMenu.svelte +++ b/packages/site-kit/src/lib/nav/NavContextMenu.svelte @@ -3,7 +3,7 @@ import type { NavigationLink } from '../types'; import { onMount } from 'svelte'; - let { contents = [] }: { contents?: NavigationLink['sections'] } = $props(); + let { title, contents = [] }: { title: string; contents: NavigationLink['sections'] } = $props(); let nav = $state() as HTMLElement; @@ -31,71 +31,61 @@ From 113f516c235a6b9cff53b793793bf7a971486793 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 15 Oct 2024 15:25:24 -0400 Subject: [PATCH 2/8] fix transition --- packages/site-kit/src/lib/nav/Menu.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index 073aa72d20..ea6a77c453 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -116,7 +116,7 @@ {#if open}
-
+
Date: Tue, 15 Oct 2024 15:32:53 -0400 Subject: [PATCH 3/8] fixes --- packages/site-kit/src/lib/nav/Menu.svelte | 31 +++++++++-------------- 1 file changed, 12 insertions(+), 19 deletions(-) diff --git a/packages/site-kit/src/lib/nav/Menu.svelte b/packages/site-kit/src/lib/nav/Menu.svelte index ea6a77c453..54a7b1c53d 100644 --- a/packages/site-kit/src/lib/nav/Menu.svelte +++ b/packages/site-kit/src/lib/nav/Menu.svelte @@ -224,16 +224,16 @@ {/if}
- + + + Back to main menu +
@@ -360,25 +360,18 @@ .back-button { position: absolute; - bottom: -1px; + bottom: 0; right: 0; - z-index: 9; - display: flex; align-items: center; justify-content: start; gap: 1rem; - font: var(--sk-font-ui-medium); color: var(--sk-text-3); - background-color: var(--sk-back-3); - - box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.19); - width: 50%; - height: 48px; - padding: 0 1.5rem; + height: 4.8rem; + padding: 0 var(--sk-page-padding-side); } .universal .contents, From d4d295fe4d8a88002b88b8887f4800f1d73ff39d Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Tue, 15 Oct 2024 16:02:46 -0400 Subject: [PATCH 4/8] simplify a whole bunch of stuff, have more consistent drop shadow --- .../site-kit/src/lib/actions/click-outside.ts | 16 - .../site-kit/src/lib/actions/focus-outside.ts | 16 - packages/site-kit/src/lib/actions/index.ts | 2 - .../src/lib/components/ModalOverlay.svelte | 27 ++ .../site-kit/src/lib/components/Shell.svelte | 27 +- packages/site-kit/src/lib/nav/Menu.svelte | 319 ++++++++---------- packages/site-kit/src/lib/nav/Nav.svelte | 43 ++- 7 files changed, 203 insertions(+), 247 deletions(-) delete mode 100644 packages/site-kit/src/lib/actions/click-outside.ts delete mode 100644 packages/site-kit/src/lib/actions/focus-outside.ts create mode 100644 packages/site-kit/src/lib/components/ModalOverlay.svelte diff --git a/packages/site-kit/src/lib/actions/click-outside.ts b/packages/site-kit/src/lib/actions/click-outside.ts deleted file mode 100644 index 05c87e6d51..0000000000 --- a/packages/site-kit/src/lib/actions/click-outside.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Dispatch event on click outside of node - */ -export function click_outside(node: HTMLElement, callback: () => void) { - const handler = (e: MouseEvent) => { - if (!node.contains(e.target as HTMLElement)) callback(); - }; - - document.addEventListener('click', handler, true); - - return { - destroy() { - document.removeEventListener('click', handler, true); - } - }; -} diff --git a/packages/site-kit/src/lib/actions/focus-outside.ts b/packages/site-kit/src/lib/actions/focus-outside.ts deleted file mode 100644 index ed30988a92..0000000000 --- a/packages/site-kit/src/lib/actions/focus-outside.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * Dispatch event on click outside of node - */ -export function focus_outside(node: HTMLElement, callback: () => void) { - function handler(e: FocusEvent) { - if (!node?.contains(/** @type {HTMLElement} */ e.target as HTMLElement)) callback(); - } - - document.addEventListener('focus', handler, true); - - return { - destroy() { - document.removeEventListener('focus', handler, true); - } - }; -} diff --git a/packages/site-kit/src/lib/actions/index.ts b/packages/site-kit/src/lib/actions/index.ts index 0f3ce16ff0..ff6707a77e 100644 --- a/packages/site-kit/src/lib/actions/index.ts +++ b/packages/site-kit/src/lib/actions/index.ts @@ -1,4 +1,2 @@ -export { click_outside } from './click-outside'; -export { focus_outside } from './focus-outside'; export { focusable_children, trap } from './focus'; export { legacy_details } from './legacy-details'; diff --git a/packages/site-kit/src/lib/components/ModalOverlay.svelte b/packages/site-kit/src/lib/components/ModalOverlay.svelte new file mode 100644 index 0000000000..38820c6651 --- /dev/null +++ b/packages/site-kit/src/lib/components/ModalOverlay.svelte @@ -0,0 +1,27 @@ + + + + + diff --git a/packages/site-kit/src/lib/components/Shell.svelte b/packages/site-kit/src/lib/components/Shell.svelte index 68f58feb33..e4a04af3b5 100644 --- a/packages/site-kit/src/lib/components/Shell.svelte +++ b/packages/site-kit/src/lib/components/Shell.svelte @@ -10,6 +10,7 @@ The main shell of the application. It provides a slot for the top navigation, th import '../styles/index.css'; import Icons from './Icons.svelte'; import type { Snippet } from 'svelte'; + import ModalOverlay from './ModalOverlay.svelte'; let { nav_visible = true, @@ -36,7 +37,9 @@ The main shell of the application. It provides a slot for the top navigation, th {@render top_nav?.()} {/if} - +{#if $overlay_open} + +{/if}
{@render children?.()} @@ -47,28 +50,6 @@ The main shell of the application. It provides a slot for the top navigation, th