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 */