From 24f2329e9d8cc09e6a442545a5cae46b2ef72326 Mon Sep 17 00:00:00 2001 From: wukko <me@wukko.me> Date: Fri, 23 Aug 2024 19:44:10 +0600 Subject: [PATCH] web/settings: slightly update navigation style on mobile --- .../settings/SettingsNavSection.svelte | 2 + .../components/settings/SettingsNavTab.svelte | 44 ++++++++++--------- 2 files changed, 25 insertions(+), 21 deletions(-) diff --git a/web/src/components/settings/SettingsNavSection.svelte b/web/src/components/settings/SettingsNavSection.svelte index 7a6527e6..7b138a4e 100644 --- a/web/src/components/settings/SettingsNavSection.svelte +++ b/web/src/components/settings/SettingsNavSection.svelte @@ -24,6 +24,8 @@ #settings-section { gap: 6px; + border-radius: var(--border-radius); + overflow: hidden; } #settings-section-title { diff --git a/web/src/components/settings/SettingsNavTab.svelte b/web/src/components/settings/SettingsNavTab.svelte index 63274b99..1f579fb2 100644 --- a/web/src/components/settings/SettingsNavTab.svelte +++ b/web/src/components/settings/SettingsNavTab.svelte @@ -22,7 +22,9 @@ <div class="tab-icon" style="background: var(--{iconColor})"> <slot></slot> </div> - <span>{$t(`settings.page.${tabName}`)}</span> + <div class="settings-tab-text"> + <span>{$t(`settings.page.${tabName}`)}</span> + </div> </div> <div class="settings-tab-chevron"> <IconChevronRight /> @@ -57,19 +59,27 @@ font-weight: 500; } - .settings-tab :global(svg) { + .tab-icon { + display: flex; + justify-content: center; + align-items: center; + padding: var(--small-padding); + border-radius: 5px; + } + + .settings-tab .tab-icon :global(svg) { stroke-width: 1.5px; + stroke: var(--white); height: 20px; width: 20px; } - .settings-tab .tab-icon :global(svg) { - stroke: var(--white); - } - .settings-tab-chevron :global(svg) { display: none; - stroke: var(--secondary); + stroke-width: 2px; + stroke: var(--gray); + height: 18px; + width: 18px; } @media (hover: hover) { @@ -91,29 +101,17 @@ font-size: 14.5px; } - .tab-icon { - display: flex; - justify-content: center; - align-items: center; - padding: var(--small-padding); - border-radius: 5px; - } - @media screen and (max-width: 750px) { .settings-tab { --big-padding: 7px; background: none; - padding: var(--big-padding) calc(var(--big-padding) * 1.5); - } - - .settings-tab-left { - gap: calc(var(--big-padding) * 1.5); + padding: var(--big-padding) 11px; } .settings-tab:not(:last-child) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; - box-shadow: 0 3px 0px -1.7px var(--button-stroke); + box-shadow: 48px 3px 0px -1.8px var(--button-stroke); } .settings-tab:not(:first-child) { @@ -121,6 +119,10 @@ border-top-right-radius: 0; } + .settings-tab-left { + gap: 10px; + } + .settings-tab-chevron :global(svg) { display: block; }