pleroma-fe

commit: 51b62be34d22be94c6bd7167a65e15afb3dd1b8d
parent 13c482ea2a70bec58eb011910c157c9bf3eadf0a
Author: Henry Jameson <me@hjkos.com>
Date:   Sun,  1 Dec 2024 22:20:13 +0200

better settings on mobile

Diffstat:
M
src/App.js
3
+++
M
src/App.vue
2
+-
M
src/components/settings_modal/helpers/unit_setting.vue
54
++++++++++++++++++++++++++++++------------------------
M
src/components/settings_modal/settings_modal.scss
17
+++++++++++++++++

4 files changed, 51 insertions(+), 25 deletions(-)
diff --git a/src/App.js b/src/App.js
@@ -67,6 +67,9 @@ export default {
     themeApplied () {
       return this.$store.state.interface.themeApplied
     },
+    layoutModalClass () {
+      return '-' + this.layoutType
+    },
     classes () {
       return [
         {
diff --git a/src/App.vue b/src/App.vue
@@ -70,7 +70,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal />
+    <SettingsModal :class="layoutModalClass"/>
     <UpdateNotification />
     <GlobalNoticeList />
   </div>
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
@@ -10,31 +10,33 @@
       <slot />
     </label>
     {{ ' ' }}
-    <input
-      :id="path"
-      class="input number-input"
-      type="number"
-      :step="step"
-      :disabled="disabled"
-      :min="min || 0"
-      :value="stateValue"
-      @change="updateValue"
-    >
-    <Select
-      :id="path"
-      :model-value="stateUnit"
-      :disabled="disabled"
-      class="unit-input unstyled"
-      @change="updateUnit"
-    >
-      <option
-        v-for="option in units"
-        :key="option"
-        :value="option"
+    <span class="no-break">
+      <input
+        :id="path"
+        class="input number-input"
+        type="number"
+        :step="step"
+        :disabled="disabled"
+        :min="min || 0"
+        :value="stateValue"
+        @change="updateValue"
+      >
+      <Select
+        :id="path"
+        :model-value="stateUnit"
+        :disabled="disabled"
+        class="unit-input unstyled"
+        @change="updateUnit"
       >
-        {{ getUnitString(option) }}
-      </option>
-    </Select>
+        <option
+          v-for="option in units"
+          :key="option"
+          :value="option"
+        >
+          {{ getUnitString(option) }}
+        </option>
+      </Select>
+    </span>
     {{ ' ' }}
     <ModifiedIndicator
       :changed="isChanged"
@@ -47,6 +49,10 @@
 
 <style lang="scss">
 .UnitSetting {
+  .no-break {
+    display: inline-block;
+  }
+
   .number-input {
     max-width: 6.5em;
     text-align: right;
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
@@ -76,6 +76,23 @@
     }
   }
 
+  &.-mobile {
+    .setting-list,
+    .option-list {
+      padding-left: 0.25em;
+
+      > li {
+        margin: 1em 0;
+        line-height: 1.5em;
+        vertical-align: center;
+      }
+
+      &.two-column {
+        column-count: 1;
+      }
+    }
+  }
+
   &.peek {
     .settings-modal-panel {
       /* Explanation: