Move theme apply/reset to new row

Fixes #225
This commit is contained in:
FloatingGhost 2022-12-06 15:55:39 +00:00
parent b68e968bf9
commit 17e574b173
4 changed files with 29 additions and 23 deletions

View file

@ -76,6 +76,10 @@
position: absolute;
right: 20px;
padding-right: 10px;
@media all and (max-width: 800px) {
display: none;
}
}
}
}

View file

@ -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"

View file

@ -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;

View file

@ -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>