diff --git a/src/App.js b/src/App.js index e87108dd..befcece8 100644 --- 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 index 9d7ad912..57c32cbd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -70,7 +70,7 @@ - + diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue index 40ab6880..0c0d6a68 100644 --- a/src/components/settings_modal/helpers/unit_setting.vue +++ b/src/components/settings_modal/helpers/unit_setting.vue @@ -10,31 +10,33 @@ {{ ' ' }} - - - {{ getUnitString(option) }} - - + + {{ ' ' }} .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 index 887a82f5..bd0ed452 100644 --- 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: