ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: hide buttons if js disabled

Browse source
This commit is contained in:
Ayo 2023-07-25 23:04:21 +02:00 committed by Ayo Ayco
parent 54a91b51d6
commit 1a36871616
1 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/AddressBar.astro
View file

@ -19,7 +19,6 @@ const { url } = Astro.props;
id="app-back" id="app-back"
name="app-back" name="app-back"
onclick="history.go(-1); return false;" onclick="history.go(-1); return false;"
hidden
> >
<Icon name="ic:round-arrow-back-ios" /> <Icon name="ic:round-arrow-back-ios" />
</button> </button>
@ -45,11 +44,10 @@ const { url } = Astro.props;
type="button" type="button"
id="app-home" id="app-home"
href="/" href="/"
hidden
> >
<Icon name="mdi:home" /> <Icon name="mdi:home" />
</a> </a>
<div aria-label="Settings" class="btn right-buttons"> <div aria-label="Settings" id="app-settings" class="btn right-buttons">
<input type="checkbox" id="settings-toggle" hidden /> <input type="checkbox" id="settings-toggle" hidden />
<label for="settings-toggle"><Icon name="mdi:cog" /></label> <label for="settings-toggle"><Icon name="mdi:cog" /></label>
</div> </div>
@ -61,9 +59,11 @@ const { url } = Astro.props;
const backLink = document.querySelector<HTMLButtonElement>("#app-back"); const backLink = document.querySelector<HTMLButtonElement>("#app-back");
const submitBtn = document.querySelector<HTMLButtonElement>("#submit"); const submitBtn = document.querySelector<HTMLButtonElement>("#submit");
const urlInput = document.querySelector<HTMLInputElement>("#app-url"); const urlInput = document.querySelector<HTMLInputElement>("#app-url");
const settings = document.querySelector<HTMLDivElement>("#app-settings");
// if js is enabled, show the back button and github link // if js is enabled, show the back and settings button
backLink?.removeAttribute("hidden"); backLink?.setAttribute("style", "display: block");
settings?.setAttribute("style", "display: block");
if (urlInput?.value === "") { if (urlInput?.value === "") {
backLink?.setAttribute("disabled", "true"); backLink?.setAttribute("disabled", "true");
@ -107,6 +107,11 @@ const { url } = Astro.props;
color: #555; color: #555;
} }
#app-back,
#app-settings {
display: none;
}
.btn { .btn {
display: block; display: block;
border: 0px; border: 0px;