AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

Move theme apply/reset to new row

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/settings_modal/settings_modal.scss
View file

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

13
src/components/settings_modal/settings_modal.vue
View file

@ -44,6 +44,10 @@
<div class="panel-body"> <div class="panel-body">
<SettingsModalContent v-if="modalOpenedOnce" /> <SettingsModalContent v-if="modalOpenedOnce" />
</div> </div>
<span
id="unscrolled-content"
class="extra-content"
/>
<div class="panel-footer settings-footer"> <div class="panel-footer settings-footer">
<Popover <Popover
class="export" class="export"
@ -53,7 +57,7 @@
:bound-to="{ x: 'container' }" :bound-to="{ x: 'container' }"
remove-padding remove-padding
> >
<template v-slot:trigger> <template #trigger>
<button <button
class="btn button-default" class="btn button-default"
:title="$t('general.close')" :title="$t('general.close')"
@ -65,7 +69,7 @@
/> />
</button> </button>
</template> </template>
<template v-slot:content="{close}"> <template #content="{close}">
<div class="dropdown-menu"> <div class="dropdown-menu">
<button <button
class="button-default dropdown-item dropdown-item-icon" class="button-default dropdown-item dropdown-item-icon"
@ -103,14 +107,11 @@
<Checkbox <Checkbox
:model-value="!!expertLevel" :model-value="!!expertLevel"
class="expertMode"
@update:modelValue="expertLevel = Number($event)" @update:modelValue="expertLevel = Number($event)"
> >
{{ $t("settings.expert_mode") }} {{ $t("settings.expert_mode") }}
</Checkbox> </Checkbox>
<span
id="unscrolled-content"
class="extra-content"
/>
<button <button
v-if="currentUser" v-if="currentUser"
class="button-default logout-button" class="button-default logout-button"

5
src/components/settings_modal/tabs/theme_tab/theme_tab.scss
View file

@ -284,7 +284,6 @@
box-shadow: none; box-shadow: none;
background: transparent; background: transparent;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
align-self: stretch;
} }
.theme-color-cl, .theme-color-cl,
@ -318,11 +317,11 @@
.extra-content { .extra-content {
.apply-container { .apply-container {
padding-left: 15vw;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-around; justify-content: space-evenly;
flex-grow: 1; flex-grow: 1;
.btn { .btn {
flex-grow: 1; flex-grow: 1;
min-height: 2em; min-height: 2em;

30
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -958,20 +958,22 @@
v-if="isActive" v-if="isActive"
to="#unscrolled-content" to="#unscrolled-content"
> >
<div class="apply-container"> <div class="panel-body settings-footer">
<button <div class="apply-container">
class="btn button-default submit" <button
:disabled="!themeValid" class="btn button-default submit"
@click="setCustomTheme" :disabled="!themeValid"
> @click="setCustomTheme"
{{ $t('general.apply') }} >
</button> {{ $t('general.apply') }}
<button </button>
class="btn button-default" <button
@click="clearAll" class="btn button-default"
> @click="clearAll"
{{ $t('settings.style.switcher.reset') }} >
</button> {{ $t('settings.style.switcher.reset') }}
</button>
</div>
</div> </div>
</teleport> </teleport>
</div> </div>