diff --git a/src/components/instance-select.astro b/src/components/instance-select.astro index e0c505b..26b70ae 100644 --- a/src/components/instance-select.astro +++ b/src/components/instance-select.astro @@ -10,7 +10,10 @@ const { instance, errors } = Astro.props; --- - + Fediverse instance https:// @@ -41,13 +44,15 @@ const { instance, errors } = Astro.props; Previously used: - + @@ -91,7 +96,7 @@ const { instance, errors } = Astro.props; display: inline-block; } - :global(span) { + :global(span.link) { color: var(--s2f-accent-color-contrast); cursor: pointer; text-decoration: 1px solid underline currentColor; @@ -107,8 +112,12 @@ const { instance, errors } = Astro.props; const instanceElement = document.querySelector( "#instance", ) as HTMLInputElement; + const savedInstancesElement = document.querySelector( + "#saved-instances", + ) as HTMLDivElement; $savedInstances.subscribe((instances) => { if (instances.size === 0) { + savedInstancesElement.style.display = "none"; return; } @@ -117,7 +126,8 @@ const { instance, errors } = Astro.props; instanceElement.value = getUrlDomain(savedInstances[0] as string); } - document.querySelector("#saved-instances>div")!.replaceChildren( + savedInstancesElement.style.display = "block"; + document.querySelector("#saved-instances>.list")!.replaceChildren( ...savedInstances .flatMap((instance: string) => { if (!instance) { @@ -126,6 +136,7 @@ const { instance, errors } = Astro.props; const host = getUrlDomain(instance); const element = document.createElement("span"); + element.classList.add("link"); element.textContent = host; element.addEventListener("click", () => { instanceElement.value = host; diff --git a/src/pages/index.astro b/src/pages/index.astro index daabca5..7716cdb 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -96,6 +96,7 @@ if (Astro.request.method === "POST") { diff --git a/src/styles/main.scss b/src/styles/main.scss index aa61994..0bf106d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -94,9 +94,8 @@ strong { font-weight: bolder; } -form label { +label { display: block; - margin-bottom: 1rem; } input, @@ -178,3 +177,7 @@ p.error { color: var(--s2f-error-color); margin: 0 0 1rem; } + +.mt1r { + margin-top: 1rem !important; +}