diff --git a/src/App.js b/src/App.js index befcece80..e87108dd9 100644 --- a/src/App.js +++ b/src/App.js @@ -67,9 +67,6 @@ 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 57c32cbd2..9d7ad9129 100644 --- a/src/App.vue +++ b/src/App.vue @@ -70,7 +70,7 @@ - + diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue index d88accf58..be5dee448 100644 --- a/src/components/palette_editor/palette_editor.vue +++ b/src/components/palette_editor/palette_editor.vue @@ -168,25 +168,6 @@ 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; - } - } - } } } diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue index 0c0d6a689..40ab68801 100644 --- a/src/components/settings_modal/helpers/unit_setting.vue +++ b/src/components/settings_modal/helpers/unit_setting.vue @@ -10,33 +10,31 @@ {{ ' ' }} - - + - - - + {{ 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 bd0ed4524..887a82f58 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -76,23 +76,6 @@ } } - &.-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: diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss index c1a25cf1e..a5314fe12 100644 --- a/src/components/settings_modal/settings_modal_admin_content.scss +++ b/src/components/settings_modal/settings_modal_admin_content.scss @@ -17,13 +17,10 @@ } .select-multiple { - margin-top: 0.5em; display: flex; - flex-direction: column; .option-list { margin: 0; - margin-top: 0.5em; padding-left: 0.5em; } } diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js index 2e1d99548..f6b49819a 100644 --- a/src/components/settings_modal/settings_modal_user_content.js +++ b/src/components/settings_modal/settings_modal_user_content.js @@ -67,9 +67,6 @@ const SettingsModalContent = { }, expertLevel () { return this.$store.state.config.expertLevel - }, - isMobileLayout () { - return this.$store.state.interface.layoutType === 'mobile' } }, methods: { diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss index 25e9bda3a..b7e258fda 100644 --- a/src/components/settings_modal/settings_modal_user_content.scss +++ b/src/components/settings_modal/settings_modal_user_content.scss @@ -31,13 +31,10 @@ } .select-multiple { - margin-top: 1em; display: flex; - flex-direction: column; .option-list { margin: 0; - margin-top: 0.5em; padding-left: 0.5em; } } diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue index 4d8981b29..06605e7dc 100644 --- a/src/components/settings_modal/settings_modal_user_content.vue +++ b/src/components/settings_modal/settings_modal_user_content.vue @@ -21,7 +21,6 @@
{ bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => { let palette @@ -142,6 +140,10 @@ const AppearanceTab = { palette = { key, ...v } } this.bundledPalettes.push(palette) + + if (this.isPaletteActive(key)) { + this.userPalette = palette + } })) }) @@ -167,15 +169,7 @@ const AppearanceTab = { }) }) }, - watch: { - paletteDataUsed () { - this.userPalette = this.paletteDataUsed || {} - } - }, computed: { - paletteDataUsed () { - return this.$store.state.interface.paletteDataUsed - }, availableStyles () { return [ ...this.availableThemesV3, @@ -190,6 +184,11 @@ const AppearanceTab = { }, stylePalettes () { const ruleset = this.$store.state.interface.styleDataUsed || [] + console.log( + 'ASR', + this.$store.state.interface.paletteDataUsed, + this.$store.state.interface.styleDataUsed + ) if (!ruleset && ruleset.length === 0) return const meta = ruleset.find(x => x.component === '@meta') const result = ruleset.filter(x => x.component.startsWith('@palette')) diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss index 596c674fa..ede4b3424 100644 --- a/src/components/settings_modal/tabs/appearance_tab.scss +++ b/src/components/settings_modal/tabs/appearance_tab.scss @@ -35,11 +35,9 @@ .palette-entry { display: flex; align-items: center; - justify-content: space-between; - padding: 0 0.5em; - .palette-label label { - text-align: center; + > label { + flex: 1 0 auto; } .palette-square { @@ -62,26 +60,6 @@ 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 be05fae09..5c1c46fe3 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -93,19 +93,15 @@ :class="{ toggled: isPaletteActive(p.key) }" @click="() => setPalette(p.key, p)" > -
- -
-
- -
+ +

{{ $t('settings.style.themes3.palette.style') }} @@ -117,25 +113,20 @@ :class="{ toggled: isPaletteActive(p.key) }" @click="() => setPaletteCustom(p)" > -
- -
-
- -
+ + -

+

{{ $t('settings.style.themes3.palette.user') }}