From 17e574b173cab2ab3f426e9f7ae49cce9081fac8 Mon Sep 17 00:00:00 2001 From: FloatingGhost <hannah@coffee-and-dreams.uk> Date: Tue, 6 Dec 2022 15:55:39 +0000 Subject: [PATCH] Move theme apply/reset to new row Fixes #225 --- .../settings_modal/settings_modal.scss | 4 +++ .../settings_modal/settings_modal.vue | 13 ++++---- .../tabs/theme_tab/theme_tab.scss | 5 ++-- .../tabs/theme_tab/theme_tab.vue | 30 ++++++++++--------- 4 files changed, 29 insertions(+), 23 deletions(-) diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss index 70b63360..15dae7fd 100644 --- a/src/components/settings_modal/settings_modal.scss +++ b/src/components/settings_modal/settings_modal.scss @@ -76,6 +76,10 @@ position: absolute; right: 20px; padding-right: 10px; + + @media all and (max-width: 800px) { + display: none; + } } } } diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue index 03c9978e..7cd493e4 100644 --- a/src/components/settings_modal/settings_modal.vue +++ b/src/components/settings_modal/settings_modal.vue @@ -44,6 +44,10 @@ <div class="panel-body"> <SettingsModalContent v-if="modalOpenedOnce" /> </div> + <span + id="unscrolled-content" + class="extra-content" + /> <div class="panel-footer settings-footer"> <Popover class="export" @@ -53,7 +57,7 @@ :bound-to="{ x: 'container' }" remove-padding > - <template v-slot:trigger> + <template #trigger> <button class="btn button-default" :title="$t('general.close')" @@ -65,7 +69,7 @@ /> </button> </template> - <template v-slot:content="{close}"> + <template #content="{close}"> <div class="dropdown-menu"> <button class="button-default dropdown-item dropdown-item-icon" @@ -103,14 +107,11 @@ <Checkbox :model-value="!!expertLevel" + class="expertMode" @update:modelValue="expertLevel = Number($event)" > {{ $t("settings.expert_mode") }} </Checkbox> - <span - id="unscrolled-content" - class="extra-content" - /> <button v-if="currentUser" class="button-default logout-button" diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss index bad6f51b..0427e42f 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss @@ -284,7 +284,6 @@ box-shadow: none; background: transparent; color: var(--faint, $fallback--faint); - align-self: stretch; } .theme-color-cl, @@ -318,11 +317,11 @@ .extra-content { .apply-container { + padding-left: 15vw; display: flex; flex-direction: row; - justify-content: space-around; + justify-content: space-evenly; flex-grow: 1; - .btn { flex-grow: 1; min-height: 2em; diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index 8dc64901..39b72478 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -958,20 +958,22 @@ v-if="isActive" to="#unscrolled-content" > - <div class="apply-container"> - <button - class="btn button-default submit" - :disabled="!themeValid" - @click="setCustomTheme" - > - {{ $t('general.apply') }} - </button> - <button - class="btn button-default" - @click="clearAll" - > - {{ $t('settings.style.switcher.reset') }} - </button> + <div class="panel-body settings-footer"> + <div class="apply-container"> + <button + class="btn button-default submit" + :disabled="!themeValid" + @click="setCustomTheme" + > + {{ $t('general.apply') }} + </button> + <button + class="btn button-default" + @click="clearAll" + > + {{ $t('settings.style.switcher.reset') }} + </button> + </div> </div> </teleport> </div>