diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index efd9243fd..b863d253a 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -13,7 +13,7 @@
keypath="settings.style.fonts.override"
tag="span"
>
-
+
{{ label }}
@@ -73,7 +73,7 @@
- {{ backendDescriptionDescription + ' ' }}
+
+ {{ backendDescriptionDescription + ' ' }}
+
diff --git a/src/components/settings_modal/helpers/list_setting.vue b/src/components/settings_modal/helpers/list_setting.vue
index b90331cdb..1dacba410 100644
--- a/src/components/settings_modal/helpers/list_setting.vue
+++ b/src/components/settings_modal/helpers/list_setting.vue
@@ -83,8 +83,10 @@
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index f786a35da..4ed6227a1 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -18,6 +18,10 @@ export default {
type: [String, Array],
required: false
},
+ showDescription: {
+ type: Boolean,
+ required: false
+ },
descriptionPathOverride: {
type: [String, Array],
required: false
@@ -69,7 +73,7 @@ export default {
type: Boolean
},
overrideBackendDescriptionLabel: {
- type: Boolean
+ type: [Boolean, String]
},
draftMode: {
type: Boolean,
@@ -157,6 +161,8 @@ export default {
}
},
backendDescriptionDescription () {
+ console.log('LOL', this.description)
+ if (this.description) return this.description
if (this.realSource !== 'admin') return ''
if (this.hideDescription) return null
if (!this.backendDescription || this.overrideBackendDescription) {
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
index af765843e..4bb4b7167 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@@ -107,6 +107,10 @@
flex-shrink: 1;
}
}
+
+ .tab-slot-wrapper {
+ grid-template-columns: 0 minmax(min-content, 45em) 0;
+ }
}
@supports (container-type: inline-size) {
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 44197bafe..303d1ae00 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -6,6 +6,7 @@
font-weight: 500;
margin-top: 1em;
margin-bottom: 1em;
+ margin-right: 1em;
}
h3 {
@@ -13,6 +14,7 @@
font-weight: 500;
margin-top: 1em;
margin-bottom: 0.5em;
+ margin-right: 1em;
border-bottom: 1px solid var(--border);
padding-bottom: 0.25em;
box-sizing: border-box;
@@ -22,26 +24,41 @@
h4 {
font-size: 1.1rem;
margin-top: 1em;
+ margin-right: 1em;
margin-bottom: 0.5em;
+ margin-left: 1em;
}
h5 {
font-size: 1rem;
- margin-bottom: 0.5em;
- margin-top: 0;
+ margin-right: 1em;
+ margin-bottom: 0.25em;
+ margin-top: 0.75em;
}
p {
line-height: 1.5;
}
+ .sidenote {
+ margin-left: 5em;
+ padding: 0.25em 1em;
+ margin-top: 0.25em;
+ }
+
+ .setting-description {
+ margin-top: 0.2em;
+ margin-bottom: 0;
+ font-size: 80%;
+ }
+
.setting-item {
display: grid;
grid-template-areas:
"label control"
". desc"
". draft";
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 2fr 3fr;
column-gap: 0.5em;
align-items: baseline;
padding: 0.5em 0;
@@ -97,6 +114,14 @@
&.two-column {
display: grid;
grid-template-columns: 1fr 1fr;
+ margin-left: 2em;
+ border-bottom: 1px solid var(--border);
+ padding-bottom: 0.5em;
+ margin-bottom: 1em;
+
+ .setting-item {
+ grid-template-columns: 3fr 1fr;
+ }
> li {
margin: 0;
@@ -105,12 +130,6 @@
}
}
- .setting-description {
- margin-top: 0.2em;
- margin-bottom: 0;
- font-size: 80%;
- }
-
.settings-modal-panel {
overflow: hidden;
transition: transform;
@@ -160,10 +179,9 @@
}
.setting-item {
- border-bottom: 1px solid var(--border);
grid-template-columns: 1fr min-content;
column-gap: 0.5em;
- padding: 1em 0;
+ padding: 1em 1em;
align-items: center;
.setting-label {
@@ -173,6 +191,12 @@
ul {
padding: 0;
+
+ li:not(:first-child) {
+ .setting-item {
+ border-top: 1px solid var(--border);
+ }
+ }
}
.setting-list:not(.suboptions),
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 5360089d6..2bde5b21b 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -49,7 +49,6 @@
{{ $t('settings.text_size') }}
-
-
-
- px
- rem
-
-
-
- 14px
-
-
-
+
+
+ px
+ rem
+
+
+
+ 14px
+
+
- {{ $t('settings.confirm_dialogs') }}
+ {{ $t('settings.confirm_dialogs') }}
@@ -279,10 +281,12 @@
-
-
{{ $t('settings.notification_mutes') }}
-
{{ $t('settings.notification_blocks') }}
-
+
+
+ - {{ $t('settings.notification_mutes') }}
+ - {{ $t('settings.notification_blocks') }}
+
+