From 098087a7220099576102cc438a692d580b1a29c5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 1 Dec 2024 22:15:23 +0200
Subject: [PATCH] mobile-friendly appearance tab

---
 .../palette_editor/palette_editor.vue         | 19 ++++++++
 .../settings_modal/tabs/appearance_tab.scss   | 26 ++++++++++-
 .../settings_modal/tabs/appearance_tab.vue    | 44 +++++++++++--------
 3 files changed, 69 insertions(+), 20 deletions(-)

diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index be5dee44..d88accf5 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -168,6 +168,25 @@ const updatePalette = (paletteKey, value) => {
         grid-column: 1 / span 2;
       }
     }
+
+    .-mobile & {
+      grid-template-columns: 1fr;
+      grid-template-rows: repeat(10, 1fr) auto;
+
+      .palette-import-button {
+        grid-column: 1;
+      }
+
+      .palette-export-button {
+        grid-column: 1;
+      }
+
+      &.-apply {
+        .palette-apply-button {
+          grid-column: 1;
+        }
+      }
+    }
   }
 }
 </style>
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
index ede4b342..596c674f 100644
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -35,9 +35,11 @@
   .palette-entry {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    padding: 0 0.5em;
 
-    > label {
-      flex: 1 0 auto;
+    .palette-label label {
+      text-align: center;
     }
 
     .palette-square {
@@ -60,6 +62,26 @@
     margin-top: 0.5em;
   }
 
+  .modal-view.-mobile & {
+    .palette-entry {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .palette-label {
+      line-height: 1.5em;
+      margin-top: 0.5em;
+      width: 100%;
+    }
+
+    .palette-preview {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-template-rows: 1em 1em;
+      margin-bottom: 0.5em;
+    }
+  }
+
   .theme-list {
     list-style: none;
     display: flex;
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 41fda7b7..be05fae0 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -93,15 +93,19 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPalette(p.key, p)"
             >
-              <label>
-                {{ p.name }}
-              </label>
-              <span
-                v-for="c in palettesKeys"
-                :key="c"
-                class="palette-square"
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-              />
+              <div class="palette-label">
+                <label>
+                  {{ p.name }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
             </button>
             <h4 v-if="stylePalettes?.length > 0">
               {{ $t('settings.style.themes3.palette.style') }}
@@ -113,15 +117,19 @@
               :class="{ toggled: isPaletteActive(p.key) }"
               @click="() => setPaletteCustom(p)"
             >
-              <label>
-                {{ p.name ?? $t('settings.style.themes3.palette.user') }}
-              </label>
-              <span
-                v-for="c in palettesKeys"
-                :key="c"
-                class="palette-square"
-                :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
-              />
+              <div class="palette-label">
+                <label>
+                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
             </button>
             <h4 v-if="expertLevel > 0">
               {{ $t('settings.style.themes3.palette.user') }}