From d22230b1d5567dbdf062f82d00759f44360c7c2b Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Sun, 7 Jul 2024 21:51:46 +0600 Subject: [PATCH] web/settings: highlight the setting when linked to - remade the way padding in settings is done to accommodate space for a highlight - renamed nav components to indicate better what they are --- .../settings/SettingsCategory.svelte | 43 ++++++++++++++++++- ...ction.svelte => SettingsNavSection.svelte} | 0 ...ttingsTab.svelte => SettingsNavTab.svelte} | 0 web/src/routes/settings/+layout.svelte | 42 ++++++++++-------- 4 files changed, 65 insertions(+), 20 deletions(-) rename web/src/components/settings/{SettingsSection.svelte => SettingsNavSection.svelte} (100%) rename web/src/components/settings/{SettingsTab.svelte => SettingsNavTab.svelte} (100%) diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte index 3ec3c895..3b77b582 100644 --- a/web/src/components/settings/SettingsCategory.svelte +++ b/web/src/components/settings/SettingsCategory.svelte @@ -1,10 +1,24 @@ <script lang="ts"> + import { page } from "$app/stores"; + export let sectionId: string; export let title: string; export let description: string = ""; + + let animate = false; + + $: hash = $page.url.hash.replace("#", ""); + + $: if (hash === sectionId) { + animate = true; + } </script> -<section id={sectionId} class="settings-content"> +<section + id={sectionId} + class="settings-content" + class:animate +> <h3 class="settings-content-title">{title}</h3> <slot></slot> @@ -18,5 +32,32 @@ display: flex; flex-direction: column; gap: 10px; + padding: calc(var(--settings-padding) / 2); + border-radius: 18px; + } + + .settings-content.animate { + animation: highlight 2s; + } + + @keyframes highlight { + 0% { + box-shadow: none; + } + 10% { + box-shadow: 0 0 0 3.5px var(--blue) inset; + } + 20%, 50% { + box-shadow: 0 0 0 3px var(--blue) inset; + } + 100% { + box-shadow: none; + } + } + + @media screen and (max-width: 750px) { + .settings-content { + padding: var(--padding); + } } </style> diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsNavSection.svelte similarity index 100% rename from web/src/components/settings/SettingsSection.svelte rename to web/src/components/settings/SettingsNavSection.svelte diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsNavTab.svelte similarity index 100% rename from web/src/components/settings/SettingsTab.svelte rename to web/src/components/settings/SettingsNavTab.svelte diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte index 65c1fb4e..5ad31ef9 100644 --- a/web/src/routes/settings/+layout.svelte +++ b/web/src/routes/settings/+layout.svelte @@ -3,8 +3,8 @@ import { t } from "$lib/i18n/translations"; - import SettingsTab from "$components/settings/SettingsTab.svelte"; - import SettingsSection from "$components/settings/SettingsSection.svelte"; + import SettingsNavTab from "$components/settings/SettingsNavTab.svelte"; + import SettingsNavSection from "$components/settings/SettingsNavSection.svelte"; import IconSunHigh from "@tabler/icons-svelte/IconSunHigh.svelte"; @@ -68,38 +68,38 @@ {/if} </div> <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}> - <SettingsSection sectionTitle="general"> - <SettingsTab + <SettingsNavSection sectionTitle="general"> + <SettingsNavTab tabName="appearance" tabLink="general/appearance" iconColor="blue" > <IconSunHigh /> - </SettingsTab> - </SettingsSection> - <SettingsSection sectionTitle="save"> - <SettingsTab + </SettingsNavTab> + </SettingsNavSection> + <SettingsNavSection sectionTitle="save"> + <SettingsNavTab tabName="video" tabLink="save/video" iconColor="green" > <IconMovie /> - </SettingsTab> - <SettingsTab + </SettingsNavTab> + <SettingsNavTab tabName="audio" tabLink="save/audio" iconColor="green" > <IconMusic /> - </SettingsTab> - <SettingsTab + </SettingsNavTab> + <SettingsNavTab tabName="metadata" tabLink="save/metadata" iconColor="green" > <IconFileSettings /> - </SettingsTab> - </SettingsSection> + </SettingsNavTab> + </SettingsNavSection> </nav> </div> @@ -120,15 +120,13 @@ grid-template-columns: var(--settings-nav-width) 1fr; overflow: hidden; padding-left: var(--settings-padding); - padding-top: var(--settings-padding); } #settings-page-content { display: flex; flex-direction: column; - gap: var(--settings-padding); max-width: 600px; - padding: 0 var(--settings-padding); + padding: calc(var(--settings-padding) / 2); overflow-y: scroll; } @@ -140,6 +138,7 @@ #settings-sidebar { width: var(--settings-nav-width); + padding-top: var(--settings-padding); } #settings-sidebar { @@ -189,14 +188,18 @@ padding: 0; } - #settings-page-content, #settings-navigation { padding: var(--padding); + padding-bottom: calc(var(--padding) * 2); + } + + #settings-page-content { + padding: var(--padding) 0; + padding-top: 0; } #settings-page-content { max-width: unset; - gap: calc(var(--padding) * 2); } #settings-header { @@ -210,6 +213,7 @@ #settings-sidebar { gap: 0px; + padding: 0; } #settings-page-title {