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 @@
-
+
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();
},
};
@@ -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);