Added support for settings without JS
This commit is contained in:
DrMint
parent
f4cead3f9c
commit
df7d8397aa
|
|
@ -1,4 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"recommendations": ["astro-build.astro-vscode", "antfu.iconify"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -372,6 +372,10 @@ const { currentTheme } = Astro.locals;
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.when-no-js {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@ const { t } = await getI18n(currentLocale);
|
|||
<a
|
||||
class:list={{ current: locale === currentLocale }}
|
||||
href={`?action-lang=${locale}`}
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
{locale.toString().toUpperCase()}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -43,12 +43,23 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
</div>
|
||||
)
|
||||
}
|
||||
<div id="toolbar" class="when-js">
|
||||
<div id="toolbar">
|
||||
<Button
|
||||
icon="material-symbols:search"
|
||||
ariaLabel={t("header.topbar.search.tooltip")}
|
||||
/>
|
||||
<div class="separator"></div>
|
||||
|
||||
<div class="when-no-js">
|
||||
<a href="/settings">
|
||||
<Button
|
||||
icon="material-symbols:settings-outline"
|
||||
ariaLabel={t("header.topbar.search.tooltip")}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="when-js">
|
||||
<ThemeSelector />
|
||||
|
||||
<LanguageSelector class="m-not" withTitle />
|
||||
|
|
@ -57,6 +68,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
<CurrencySelector class="m-not" withTitle />
|
||||
<CurrencySelector class="m-only" />
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{
|
||||
|
|
@ -130,6 +142,10 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
}
|
||||
}
|
||||
|
||||
& > div.when-js {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
|
||||
& > :global(.m-only) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -145,6 +161,7 @@ const { t } = await getI18n(Astro.locals.currentLocale);
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<details>
|
||||
<summary><slot name="header" /></summary>
|
||||
<div class="content">
|
||||
<div class="content2">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<style>
|
||||
details {
|
||||
--foreground-color: var(--color-base-650);
|
||||
color: var(--foreground-color);
|
||||
border: 0.1em solid var(--foreground-color);
|
||||
background-color: var(--color-elevation-0);
|
||||
border-radius: 1.25em;
|
||||
|
||||
transition: all 1s;
|
||||
|
||||
&[open] {
|
||||
& > summary {
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
& > .content {
|
||||
animation: animate 0.5s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
& > summary {
|
||||
list-style: none;
|
||||
height: 2.5em;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
& > .content {
|
||||
padding: 1em;
|
||||
display: grid;
|
||||
|
||||
& > .content2 {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
from {
|
||||
grid-template-rows: 0fr;
|
||||
}
|
||||
to {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -39,7 +39,7 @@ const { icon, title, href } = Astro.props;
|
|||
gap: 2px;
|
||||
|
||||
& > h3 {
|
||||
font-size: 24px;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
<AppLayout
|
||||
title="Accord’s Library"
|
||||
illustration="/img/bg-home.webp"
|
||||
illustrationSize="100vh"
|
||||
illustrationSize="60vw"
|
||||
illustrationPosition="20%"
|
||||
>
|
||||
<div id="title" slot="header-title">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,90 @@
|
|||
---
|
||||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
import { getI18n, locales } from "translations/translations";
|
||||
|
||||
const { currentLocale, currentTheme, currentCurrency } = Astro.locals;
|
||||
const { t } = await getI18n(currentLocale);
|
||||
---
|
||||
|
||||
<AppLayout
|
||||
title="Settings"
|
||||
breadcrumb={[{ name: "Settings", slug: "settings" }]}
|
||||
>
|
||||
<div id="main" slot="main">
|
||||
<div class="section">
|
||||
<h2>Language</h2>
|
||||
<p>{t("header.topbar.language.tooltip")}</p><br />
|
||||
{
|
||||
locales.map((locale) => (
|
||||
<a
|
||||
class:list={{ current: locale === currentLocale }}
|
||||
href={`?action-lang=${locale}`}
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
{locale.toString().toUpperCase()}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Theme</h2>
|
||||
<p>{t("header.topbar.theme.tooltip")}</p><br />
|
||||
<a
|
||||
class:list={{ current: currentTheme === "dark" }}
|
||||
href="?action-theme=dark"
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
{t("header.topbar.theme.dark")}
|
||||
</a>
|
||||
<a
|
||||
class:list={{ current: currentTheme === "auto" }}
|
||||
href="?action-theme=auto"
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
{t("header.topbar.theme.auto")}
|
||||
</a>
|
||||
<a
|
||||
class:list={{ current: currentTheme === "light" }}
|
||||
href="?action-theme=light"
|
||||
data-astro-prefetch="tap"
|
||||
>
|
||||
{t("header.topbar.theme.light")}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Currency</h2>
|
||||
<p>{t("header.topbar.currency.tooltip")}</p><br />
|
||||
<a
|
||||
class:list={{ current: currentCurrency === "usd" }}
|
||||
href="?action-currency=usd"
|
||||
data-astro-prefetch="tap">USD</a
|
||||
>
|
||||
<a
|
||||
class:list={{ current: currentCurrency === "eur" }}
|
||||
href="?action-currency=eur"
|
||||
data-astro-prefetch="tap">EUR</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
<style>
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
|
||||
& > .current {
|
||||
color: var(--color-base-750);
|
||||
text-decoration: underline 0.08em var(--color-base-650);
|
||||
}
|
||||
}
|
||||
|
||||
#main {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 5em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -42,7 +42,7 @@ const { icon, subtitle, title, href } = Astro.props;
|
|||
gap: 0.15em;
|
||||
|
||||
& > h3 {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
& > p {
|
||||
|
|
|
|||
Loading…
Reference in New Issue