diff --git a/src/components/FilterTile.vue b/src/components/FilterTile.vue
index 2e3f2e62..ddd266f6 100644
--- a/src/components/FilterTile.vue
+++ b/src/components/FilterTile.vue
@@ -14,10 +14,13 @@
title="Clear search"
@click="clearFilterInput">
-
-
hello
-
world
-
+
@@ -45,6 +48,9 @@ export default {
this.userIsTypingSomething();
document.activeElement.blur();
},
+ updateDisplayLayout(layout) {
+ this.$emit('change-display-layout', layout);
+ },
},
mounted() {
window.addEventListener('keyup', (event) => {
@@ -112,11 +118,41 @@ export default {
}
}
}
- .space-filler {
+ .options-container {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ justify-content: flex-end;
flex: 1;
+ padding: 0 1rem;
border-radius: 20px 0 0;
background: $background;
+
+ span.options-label {
+ font-size: 0.8rem;
+ color: #5cabca;
+ width: 6rem;
+ text-align: left;
+ }
+
+ i.fas {
+ min-width: 1.2rem;
+ font-size: 1rem;
+ margin: 0.2rem;
+ padding: 0.2rem;
+ text-align: center;
+ color: #5cabca;
+ background: #05070e;
+ border: 1px solid #5cabca;
+ border-radius: 4px;
+ opacity: 0.8;
+ cursor: pointer;
+ &:hover {
+ opacity: 1;
+ }
+ }
}
+
@media screen and (max-width: 600px) {
form {
flex: 1;
@@ -124,7 +160,7 @@ export default {
text-align: center;
padding: 0.25rem 0;
}
- .space-filler {
+ .options-container {
display: none;
}
}
diff --git a/src/components/KeyboardShortcutInfo.vue b/src/components/KeyboardShortcutInfo.vue
index b19306fc..b7dddeb0 100644
--- a/src/components/KeyboardShortcutInfo.vue
+++ b/src/components/KeyboardShortcutInfo.vue
@@ -30,12 +30,13 @@ export default {
return !!localStorage.hideWelcomeHelpers;
},
/**
- * Sets the session storage to 'true', so that it won't be shown again
- * Then sets the state, also to true, so that it'll be hidden immediatley
+ * Update session storage, so that it won't be shown again
+ * Trigger the hide function, and remove the event listerner
*/
hideWelcomeHelper() {
- localStorage.setItem('hideWelcomeHelpers', true);
this.shouldHide = true;
+ localStorage.setItem('hideWelcomeHelpers', true);
+ window.removeEventListener('keyup');
},
},
/**
diff --git a/src/views/Home.vue b/src/views/Home.vue
index eddf4e2e..52ed8181 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,7 +1,11 @@