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