diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue index 64a24d27..3742bdeb 100644 --- a/src/components/Settings/ConfigLauncher.vue +++ b/src/components/Settings/ConfigLauncher.vue @@ -1,10 +1,12 @@ @@ -93,4 +128,38 @@ export default { } } } + +.view-switcher { + position: absolute; + right: 1rem; + margin-top: 3rem; + z-index: 5; + background: var(--background); + border: 1px solid var(--settings-text-color); + border-radius: var(--curve-factor); + box-shadow: var(--settings-container-shadow); + ul { + list-style: none; + margin: 0; + padding: 0; + li { + cursor: pointer; + padding: 0.25rem 0.75rem; + a { + color: var(--settings-text-color); + text-decoration: none; + display: flex; + align-items: center; + } + &:hover { + background: var(--settings-text-color); + a { color: var(--background); } + } + svg { + margin: 0 0.25rem 0 0; + border: none; + } + } + } +} diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue index 2e92ecdb..f6b16eb1 100644 --- a/src/views/Minimal.vue +++ b/src/views/Minimal.vue @@ -1,5 +1,11 @@ @@ -48,6 +55,7 @@ import MinimalHeading from '@/components/MinimalView/MinimalHeading.vue'; import MinimalSearch from '@/components/MinimalView/MinimalSearch.vue'; import { GetTheme, ApplyLocalTheme, ApplyCustomVariables } from '@/utils/ThemeHelper'; import Defaults, { localStorageKeys } from '@/utils/defaults'; +import ConfigLauncher from '@/components/Settings/ConfigLauncher'; export default { name: 'home', @@ -60,6 +68,7 @@ export default { MinimalSection, MinimalHeading, MinimalSearch, + ConfigLauncher, }, data: () => ({ searchValue: '', @@ -178,6 +187,9 @@ export default { ApplyCustomVariables(this.theme); } }, + modalChanged(modalState) { + this.modalOpen = modalState; + }, }, mounted() { this.initiateFontAwesome(); @@ -193,10 +205,10 @@ export default { .minimal-home { display: flex; flex-direction: column; - justify-content: center; margin: 1rem auto; padding-bottom: 1px; - min-height: calc(99.9vh - var(--footer-height)); + padding-top: 10vh; + min-height: calc(99vh - var(--footer-height)); width: 90%; max-width: 1000px; background: var(--background); @@ -232,6 +244,13 @@ export default { } } + @include phone { + .item-group-container { + display: flex; + flex-direction: column; + } +} + .no-data { font-size: 2rem; color: var(--background); @@ -242,4 +261,28 @@ export default { border-radius: var(--curve-factor); } +.minimal-buttons { + position: absolute; + top: 0.5rem; + right: 1rem; + display: flex; + .home-page-icon { + color: var(--primary); + width: 1.5rem; + height: 1.5rem; + @extend .svg-button; + } +} + + +