From 55515f0fb1e47041f5b903b978d0beba57de1666 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 25 Jun 2024 14:50:59 +0600
Subject: [PATCH] web/settings: mobile layout, better padding & borders

---
 .../settings/SettingsCategory.svelte          |  2 +-
 .../settings/SettingsSection.svelte           |  7 ++
 .../components/settings/SettingsTab.svelte    | 57 +++++++++++--
 web/src/routes/+layout.svelte                 |  5 +-
 web/src/routes/+page.svelte                   |  4 +
 web/src/routes/settings/+layout.svelte        | 83 +++++++++++++++++--
 6 files changed, 141 insertions(+), 17 deletions(-)

diff --git a/web/src/components/settings/SettingsCategory.svelte b/web/src/components/settings/SettingsCategory.svelte
index 9707f920..8ccd1cf5 100644
--- a/web/src/components/settings/SettingsCategory.svelte
+++ b/web/src/components/settings/SettingsCategory.svelte
@@ -16,6 +16,6 @@
     .settings-content {
         display: flex;
         flex-direction: column;
-        gap: 16px;
+        gap: 10px;
     }
 </style>
diff --git a/web/src/components/settings/SettingsSection.svelte b/web/src/components/settings/SettingsSection.svelte
index 61af255d..ad5674fb 100644
--- a/web/src/components/settings/SettingsSection.svelte
+++ b/web/src/components/settings/SettingsSection.svelte
@@ -25,4 +25,11 @@
         color: var(--gray);
         padding-left: 8px;
     }
+
+    @media screen and (max-width: 750px) {
+        #settings-section-categories {
+            background: var(--button);
+            border-radius: var(--border-radius);
+        }
+    }
 </style>
diff --git a/web/src/components/settings/SettingsTab.svelte b/web/src/components/settings/SettingsTab.svelte
index 0da6fc5d..6375ec7b 100644
--- a/web/src/components/settings/SettingsTab.svelte
+++ b/web/src/components/settings/SettingsTab.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
 
+    import IconChevronRight from "@tabler/icons-svelte/IconChevronRight.svelte";
+
     export let tabName: string;
     export let tabLink: string;
     export let iconColor: "gray" | "blue" | "green" = "gray";
@@ -12,11 +14,15 @@
     class="settings-tab"
     href="/settings/{tabLink}"
     class:active={isActive}
->
-    <div class="tab-icon" style="background: var(--{iconColor})">
-        <slot></slot>
+>   
+    <div class="settings-tab-left">
+        <div class="tab-icon" style="background: var(--{iconColor})">
+            <slot></slot>
+        </div>
+        <span>{tabName}</span>
     </div>
-    <span>{tabName}</span>
+
+    <IconChevronRight class="settings-tab-chevron" />
 </a>
 
 <style>
@@ -25,6 +31,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        justify-content: space-between;
         gap: calc(var(--small-padding) * 2);
         padding: 7px;
         font-weight: 500;
@@ -33,14 +40,36 @@
         border-radius: var(--border-radius);
     }
 
+    .settings-tab-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: calc(var(--small-padding) * 2);
+        font-weight: 500;
+    }
+
     .settings-tab :global(svg) {
-        stroke: var(--white);
         stroke-width: 1.5px;
         height: 18px;
         width: 18px;
     }
 
-    .settings-tab:hover {
+    .settings-tab .tab-icon :global(svg) {
+        stroke: var(--white);
+    }
+
+    :global(.settings-tab-chevron) {
+        display: none;
+        stroke: var(--secondary);
+    }
+
+    @media (hover: hover) {
+        .settings-tab:hover {
+            background: var(--button-hover-transparent);
+        }
+    }
+
+    .settings-tab:active {
         background: var(--button-hover-transparent);
     }
 
@@ -60,4 +89,20 @@
         padding: var(--small-padding);
         border-radius: var(--small-padding);
     }
+
+    @media screen and (max-width: 750px) {
+        .settings-tab {
+            background: none;
+            --small-padding: 5px;
+        }
+
+        .settings-tab :global(svg) {
+            height: 19px;
+            width: 19px;
+        }
+
+        :global(.settings-tab-chevron) {
+            display: block;
+        }
+    }
 </style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 42421512..fe5f0ffc 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -24,7 +24,7 @@
         --button: #f4f4f4;
         --button-hover: #e8e8e8;
         --button-hover-transparent: rgba(0, 0, 0, 0.06);
-        --button-stroke: rgba(0, 0, 0, 0.08);
+        --button-stroke: rgba(0, 0, 0, 0.05);
         --button-text: #282828;
 
         --sidebar-bg: #000000;
@@ -64,7 +64,7 @@
             --button: #191919;
             --button-hover: #2a2a2a;
             --button-hover-transparent: rgba(225, 225, 225, 0.1);
-            --button-stroke: rgba(255, 255, 255, 0.08);
+            --button-stroke: rgba(255, 255, 255, 0.05);
             --button-text: #e1e1e1;
 
             --sidebar-bg: #101010;
@@ -216,7 +216,6 @@
     #content {
         display: flex;
         overflow: scroll;
-        padding: var(--padding);
         background-color: var(--primary);
 
         border-top-left-radius: var(--border-radius);
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index df78a944..14121fbb 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -14,6 +14,10 @@
 </div>
 
 <style>
+    #cobalt-save-container {
+        padding: var(--padding);
+    }
+
     #cobalt-save {
         display: flex;
         flex-direction: column;
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 9df4b374..d58cb825 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -10,6 +10,8 @@
     import IconMusic from "@tabler/icons-svelte/IconMusic.svelte";
     import IconFileSettings from "@tabler/icons-svelte/IconFileSettings.svelte";
 
+    import IconChevronLeft from "@tabler/icons-svelte/IconChevronLeft.svelte";
+
     let screenWidth: number;
 
     $: isMobile = screenWidth <= 750;
@@ -19,9 +21,18 @@
 <svelte:window bind:innerWidth={screenWidth} />
 
 <div id="settings-page">
-    <div id="settings-sidebar" class:visible-mobile={isMobile && isHome}>
-        <h2 id="settings-page-title">settings</h2>
-        <nav id="settings-navigation">
+    <div id="settings-sidebar">
+        <div id="settings-header" class:back-visible={!isHome && isMobile}>
+            {#if !isHome && isMobile}
+                <a class="back-button" href="/settings">
+                    <IconChevronLeft />
+                    <h2 id="settings-page-title">settings</h2>
+                </a>
+            {:else}
+                <h2 id="settings-page-title">settings</h2>
+            {/if}
+        </div>
+        <nav id="settings-navigation" class:visible-mobile={isMobile && isHome}>
             <SettingsSection sectionTitle="general">
                 <SettingsTab
                     tabName="appearance"
@@ -66,12 +77,13 @@
     #settings-page {
         --settings-nav-width: 250px;
         --settings-padding: 30px;
+        --settings-padding-small: calc(var(--settings-padding) - var(--padding));
         display: grid;
         width: 100%;
         grid-template-columns: var(--settings-nav-width) 1fr;
         overflow: hidden;
-        padding-left: calc(var(--settings-padding) - var(--padding));
-        padding-top: calc(var(--settings-padding) - var(--padding));
+        padding-left: var(--settings-padding);
+        padding-top: var(--settings-padding);
     }
 
     #settings-page-content {
@@ -101,6 +113,30 @@
         gap: 12px;
     }
 
+    #settings-header {
+        --back-padding: 6px;
+    }
+
+    .back-button {
+        display: flex;
+        align-items: center;
+        color: var(--secondary);
+        gap: var(--back-padding);
+        padding: var(--back-padding);
+        padding-right: calc(var(--back-padding) * 2);
+    }
+
+    .back-button:active {
+        background: var(--button-hover-transparent);
+        border-radius: var(--border-radius);
+    }
+
+    .back-button :global(svg) {
+        stroke-width: 2px;
+        height: 21px;
+        width: 21px;
+    }
+
     .hidden-mobile {
         display: none !important;
     }
@@ -108,16 +144,49 @@
     @media screen and (max-width: 750px) {
         #settings-page {
             --settings-nav-width: 100%;
+            display: flex;
+            flex-direction: column;
             grid-template-columns: 1fr;
+            padding: 0;
+        }
+
+        #settings-page-content,
+        #settings-navigation {
+            padding: var(--padding);
+        }
+
+        #settings-page-content {
+            max-width: unset;
+            gap: calc(var(--padding) * 2);
+        }
+
+        #settings-header {
+            display: flex;
+            align-items: center;
+            position: sticky;
+            padding: var(--padding);
+            gap: 4px;
+        }
+
+        #settings-header.back-visible {
+            padding: calc(var(--padding) - var(--back-padding));
         }
 
         #settings-sidebar {
+            gap: 0px;
+        }
+
+        #settings-page-title {
+            text-align: center;
+            font-size: 16px;
+        }
+
+        #settings-navigation {
             display: none;
         }
 
-        #settings-sidebar.visible-mobile {
+        #settings-navigation.visible-mobile {
             display: flex;
         }
     }
-
 </style>