diff --git a/src/css/components/button.css b/src/css/components/button.css index d06b093..e2bd141 100644 --- a/src/css/components/button.css +++ b/src/css/components/button.css @@ -11,9 +11,10 @@ button[type] { font-weight: 400; inline-size: fit-content; line-height: 1; - min-inline-size: var(--block-size); + min-inline-size: var(--min-inline-size, var(--block-size)); padding: 0 5px; /*text-box: trim-both ex alphabetic;*/ + text-align: center; text-decoration: none; text-transform: uppercase; text-shadow: 2px 2px rgb(var(--color-brown) / 0.3); diff --git a/src/css/components/form.css b/src/css/components/form.css index 1d8ff1f..85d8680 100644 --- a/src/css/components/form.css +++ b/src/css/components/form.css @@ -40,11 +40,21 @@ form { inline-size: 100%; } - & div:has(input[name="title"]) { + & div:has(input + button) { display: grid; inline-size: 100%; gap: 10px; + & button { + --min-inline-size: 7ch; + } + + & [type="url"] + button { + &:disabled { + text-decoration: line-through; + } + } + @media (width >= 600px) { grid-template-columns: 1fr auto; & input { diff --git a/src/routes/bookmarks/[did=did]/+page.svelte b/src/routes/bookmarks/[did=did]/+page.svelte index 9684f2d..0f89735 100644 --- a/src/routes/bookmarks/[did=did]/+page.svelte +++ b/src/routes/bookmarks/[did=did]/+page.svelte @@ -56,6 +56,7 @@ let dialogFormRef: HTMLFormElement | null = $state(null); let dialogUrlInput: HTMLInputElement | null = $state(null); let dialogTitleInput: HTMLInputElement | null = $state(null); + let dialogUrlPaste = $state(true); let dialogUrlValid = $state(false); let dialogTags: string[] = $state([]); let dialogTagInput: HTMLInputElement | null = $state(null); @@ -131,12 +132,15 @@ } }; - const dateFormat = $derived( - new Intl.DateTimeFormat(data.locale, { - dateStyle: "medium", - timeStyle: "short", - }), - ); + const onPasteURL = async (_ev: MouseEvent) => { + if (dialogUrlInput === null) return; + try { + const text = await navigator.clipboard.readText(); + dialogUrlInput.value = text; + } catch (err) { + dialogUrlPaste = false; + } + }; const onFetchTitle = async (ev: MouseEvent) => { if (dialogTitleInput === null) return; @@ -221,6 +225,13 @@ if (form.error) alert(form.error); } }); + + const dateFormat = $derived( + new Intl.DateTimeFormat(data.locale, { + dateStyle: "medium", + timeStyle: "short", + }), + ); @@ -340,19 +351,28 @@ {#if form?.error}

{form.error}

{/if} - - - (dialogUrlValid = dialogUrlInput?.checkValidity() ?? false)} - value={dialogEntity?.url} - required - /> +
+ + + (dialogUrlValid = dialogUrlInput?.checkValidity() ?? false)} + value={dialogEntity?.url} + required + /> + +