Hide "Prevously used" if there are no previously used instances

This commit is contained in:
Nikita Karamov 2023-09-02 22:21:29 +02:00
parent 2bc66c7f04
commit e6c4c42590
No known key found for this signature in database
GPG key ID: 41D6F71EE78E77CD
3 changed files with 21 additions and 6 deletions

View file

@ -10,7 +10,10 @@ const { instance, errors } = Astro.props;
--- ---
<datalist id="popular-instances"></datalist> <datalist id="popular-instances"></datalist>
<label data-translate="instance"> <label
class="mt1r"
data-translate="instance"
>
Fediverse instance Fediverse instance
<div class="instance-input"> <div class="instance-input">
<span id="https-label">https://</span> <span id="https-label">https://</span>
@ -41,13 +44,15 @@ const { instance, errors } = Astro.props;
<div <div
id="saved-instances" id="saved-instances"
class="mt1r"
data-translate="previouslyUsed" data-translate="previouslyUsed"
> >
Previously used: Previously used:
<div></div> <span class="list"></span>
</div> </div>
<label <label
class="mt1r"
for="remember" for="remember"
data-translate="rememberInstance" data-translate="rememberInstance"
> >
@ -91,7 +96,7 @@ const { instance, errors } = Astro.props;
display: inline-block; display: inline-block;
} }
:global(span) { :global(span.link) {
color: var(--s2f-accent-color-contrast); color: var(--s2f-accent-color-contrast);
cursor: pointer; cursor: pointer;
text-decoration: 1px solid underline currentColor; text-decoration: 1px solid underline currentColor;
@ -107,8 +112,12 @@ const { instance, errors } = Astro.props;
const instanceElement = document.querySelector( const instanceElement = document.querySelector(
"#instance", "#instance",
) as HTMLInputElement; ) as HTMLInputElement;
const savedInstancesElement = document.querySelector(
"#saved-instances",
) as HTMLDivElement;
$savedInstances.subscribe((instances) => { $savedInstances.subscribe((instances) => {
if (instances.size === 0) { if (instances.size === 0) {
savedInstancesElement.style.display = "none";
return; return;
} }
@ -117,7 +126,8 @@ const { instance, errors } = Astro.props;
instanceElement.value = getUrlDomain(savedInstances[0] as string); instanceElement.value = getUrlDomain(savedInstances[0] as string);
} }
document.querySelector("#saved-instances>div")!.replaceChildren( savedInstancesElement.style.display = "block";
document.querySelector("#saved-instances>.list")!.replaceChildren(
...savedInstances ...savedInstances
.flatMap((instance: string) => { .flatMap((instance: string) => {
if (!instance) { if (!instance) {
@ -126,6 +136,7 @@ const { instance, errors } = Astro.props;
const host = getUrlDomain(instance); const host = getUrlDomain(instance);
const element = document.createElement("span"); const element = document.createElement("span");
element.classList.add("link");
element.textContent = host; element.textContent = host;
element.addEventListener("click", () => { element.addEventListener("click", () => {
instanceElement.value = host; instanceElement.value = host;

View file

@ -96,6 +96,7 @@ if (Astro.request.method === "POST") {
<input <input
type="submit" type="submit"
value="Publish" value="Publish"
class="mt1r"
data-translate="publish" data-translate="publish"
data-translate-attribute="value" data-translate-attribute="value"
/> />

View file

@ -94,9 +94,8 @@ strong {
font-weight: bolder; font-weight: bolder;
} }
form label { label {
display: block; display: block;
margin-bottom: 1rem;
} }
input, input,
@ -178,3 +177,7 @@ p.error {
color: var(--s2f-error-color); color: var(--s2f-error-color);
margin: 0 0 1rem; margin: 0 0 1rem;
} }
.mt1r {
margin-top: 1rem !important;
}