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>
<label data-translate="instance">
<label
class="mt1r"
data-translate="instance"
>
Fediverse instance
<div class="instance-input">
<span id="https-label">https://</span>
@ -41,13 +44,15 @@ const { instance, errors } = Astro.props;
<div
id="saved-instances"
class="mt1r"
data-translate="previouslyUsed"
>
Previously used:
<div></div>
<span class="list"></span>
</div>
<label
class="mt1r"
for="remember"
data-translate="rememberInstance"
>
@ -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;

View file

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

View file

@ -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;
}