diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index ef77f144..ee4da0dc 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -200,7 +200,7 @@ export default {
grid-template-columns: repeat(var(--item-col-count, 2), minmax(0, 1fr));
}
}
-.orientation-horizontal {
+.orientation-horizontal:not(.single-section-view) {
display: flex;
flex-direction: column;
.there-are-items {
diff --git a/src/router.js b/src/router.js
index f1983a89..d7ddd0ce 100644
--- a/src/router.js
+++ b/src/router.js
@@ -84,6 +84,12 @@ const router = new Router({
component: Home,
meta: makeMetaTags('Home Page'),
},
+ { // View only single section
+ path: `${routePaths.home}/:section`,
+ name: 'home-section',
+ component: Home,
+ meta: makeMetaTags('Home Page'),
+ },
{ // Workspace view page
path: routePaths.workspace,
name: 'workspace',
diff --git a/src/views/Home.vue b/src/views/Home.vue
index ec12c72b..b8a2fe5d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -13,11 +13,19 @@
:modalOpen="modalOpen"
class="settings-outer"
/>
+
+
+
+
+ Back to All
+
+
({
searchValue: '',
@@ -74,6 +85,9 @@ export default {
modalOpen() {
return this.$store.state.modalOpen;
},
+ singleSectionView() {
+ return this.findSingleSection(this.$store.getters.sections, this.$route.params.section);
+ },
/* Get class for num columns, if specified by user */
colCount() {
let { colCount } = this.appConfig;
@@ -94,7 +108,7 @@ export default {
return this.sections;
},
filteredTiles() {
- const sections = this.allSections;
+ const sections = this.singleSectionView || this.allSections;
return sections.filter((section) => this.filterTiles(section.items, this.searchValue));
},
/* Updates layout (when button clicked), and saves in local storage */
@@ -148,6 +162,19 @@ export default {
updateModalVisibility(modalState) {
this.$store.commit('SET_MODAL_OPEN', modalState);
},
+ /* If on sub-route, and section exists, then return only that section */
+ findSingleSection: (allSectios, sectionTitle) => {
+ if (!sectionTitle) return undefined;
+ let sectionToReturn;
+ const parse = (section) => section.replace(' ', '-').toLowerCase().trim();
+ allSectios.forEach((section) => {
+ if (parse(sectionTitle) === parse(section.name)) {
+ sectionToReturn = [section];
+ }
+ });
+ if (!sectionToReturn) ErrorHandler(`No section named '${sectionTitle}' was found`);
+ return sectionToReturn;
+ },
/* Returns an array of links to external CSS from the Config */
getExternalCSSLinks() {
const availibleThemes = {};
@@ -245,6 +272,16 @@ export default {
min-height: calc(99.9vh - var(--footer-height));
}
+.back-to-all-link {
+ display: flex;
+ align-items: center;
+ padding: 0.25rem;
+ margin: 0.25rem;
+ @extend .svg-button;
+ svg { margin-right: 0.5rem; }
+ text-decoration: none;
+}
+
/* Outside container wrapping the item groups*/
.item-group-container {
display: grid;
@@ -269,7 +306,7 @@ export default {
flex-direction: row;
}
}
- &.orientation-horizontal, &.orientation-vertical {
+ &.orientation-horizontal, &.orientation-vertical, &.single-section-view {
@include phone { --content-max-width: 100%; }
@include tablet { --content-max-width: 98%; }
@include laptop { --content-max-width: 90%; }
@@ -302,6 +339,11 @@ export default {
/* Hide when search term returns nothing */
.no-results { display: none; }
+
+ /* When in single-section view mode */
+ &.single-section-view {
+ display: block;
+ }
}
/* Custom styles only applied when there is no sections in config */