diff --git a/src/views/Minimal.vue b/src/views/Minimal.vue index 1e551336..2e92ecdb 100644 --- a/src/views/Minimal.vue +++ b/src/views/Minimal.vue @@ -4,7 +4,7 @@

{{ pageInfo.title }}

- +
@@ -33,8 +33,10 @@ @sectionSelected="sectionSelected" @itemClicked="finishedSearching()" @change-modal-visibility="updateModalVisibility" - :class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''" /> +
+ {{searchValue ? $t('home.no-results') : $t('home.no-data')}} +
@@ -44,6 +46,7 @@ import MinimalSection from '@/components/MinimalView/MinimalSection.vue'; 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'; export default { @@ -64,6 +67,7 @@ export default { modalOpen: false, // When true, keybindings are disabled selectedSection: 0, // The index of currently selected section tabbedView: true, // By default use tabs, when searching then show all instead + theme: GetTheme(), }), watch: { /* When the theme changes, then call the update method */ @@ -156,18 +160,28 @@ export default { return itemsFound; } }, + /* Make CSS to set the number of columns based on the number of sections */ setColumnCount() { return `--col-count: ${this.sections.length};`; }, + /* Make CSS styles to apply the users custom background image */ getBackgroundImage() { if (this.appConfig && this.appConfig.backgroundImg) { return `background: url('${this.appConfig.backgroundImg}');background-size:cover;`; } return ''; }, + /* If theme present, then call helper to apply it, and any custom colors */ + applyTheme() { + if (this.theme) { + ApplyLocalTheme(this.theme); + ApplyCustomVariables(this.theme); + } + }, }, mounted() { this.initiateFontAwesome(); + this.applyTheme(); }, }; @@ -209,9 +223,6 @@ export default { grid-template-columns: repeat(var(--col-count), 1fr); @extend .scroll-bar; - /* Hide when search term returns nothing */ - .no-results { display: none; } - &.showing-all { flex-direction: column; display: flex;