From 4fffa2b698bc4c97b8c8700b305ad39b66cfdfc8 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sun, 4 Apr 2021 21:22:47 +0100
Subject: [PATCH] Adds functionality for setting and remembering layout
 orientation

---
 src/views/Home.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index f4b20648..45502cef 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -5,11 +5,11 @@
     <!-- Search bar, layout options and settings -->
     <FilterTile ref="filterComp"
       @user-is-searchin="searching"
-      @change-display-layout="changeDisplayLayout"
+      @change-display-layout="setLayoutOrientation"
       class="filter-container"
     />
     <!-- Main content, section for each group of items -->
-    <div class="item-group-container">
+    <div :class="`item-group-container orientation-${layout}`">
       <ItemGroup
         v-for="(section, index) in sections"
         :key="index"
@@ -41,10 +41,23 @@ export default {
     pageInfo: conf.pageInfo, // Site meta data (title, description, etc)
     sections: conf.sections, // List of sections, containing items
     searchValue: '',
+    layout: '',
   }),
+  computed: {
+    layoutOrientation: {
+      get: () => localStorage.layoutOrientation || 'default',
+      set: function setLayout(layout) {
+        localStorage.setItem('layoutOrientation', layout);
+        this.layout = layout;
+      },
+    },
+  },
   methods: {
-    changeDisplayLayout(layout) {
-      console.log('Display layout will update', layout);
+    setLayoutOrientation(layout) {
+      this.layoutOrientation = layout;
+    },
+    getLayoutOrientation() {
+      return localStorage.layoutOrientation || 'default';
     },
     /* Updates local data with search value, triggered from filter comp */
     searching(searchValue) {
@@ -97,6 +110,7 @@ export default {
   },
   mounted() {
     this.initiateFontAwesome();
+    this.layout = this.getLayoutOrientation();
   },
 };
 </script>
@@ -115,6 +129,16 @@ export default {
   display: grid;
   gap: 0.5rem;
 
+  /* Options for alternate layouts, triggered by buttons */
+  &.orientation-horizontal {
+    display: flex;
+    flex-direction: column;
+  }
+  &.orientation-vertical {
+    display: flex;
+    flex-direction: row;
+  }
+
   /* Specify number of columns, based on screen size */
   @include phone {
     grid-template-columns: repeat(1, 1fr);