From 18f2480e619b5405d9fec7809011b194967dda1b Mon Sep 17 00:00:00 2001
From: Chris Houston <chouston@vizioz.com>
Date: Mon, 30 Mar 2020 10:59:44 -0400
Subject: [PATCH] Fixed an issue on mobile and added the "Select your category"
 option.

---
 covid-19-support/src/App.vue                     | 10 +---------
 covid-19-support/src/components/ResultsList.vue  |  4 ++--
 covid-19-support/src/components/SearchFilter.vue | 15 +++++++++++++--
 covid-19-support/src/locales/en.json             |  3 ++-
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/covid-19-support/src/App.vue b/covid-19-support/src/App.vue
index d7c1d212..82138854 100644
--- a/covid-19-support/src/App.vue
+++ b/covid-19-support/src/App.vue
@@ -47,7 +47,7 @@ export default {
   data() {
     return {
       entries: null,
-      need: 'restaurant',
+      need: 'none',
       day: new Date().getDay(),
       isFilterOpen: true,
       language: { name: 'English', iso: 'en' }
@@ -92,14 +92,6 @@ body,
   box-sizing: border-box;
 }
 
-#wrapper.toggled .tab {
-  left: 22rem;
-}
-
-#wrapper.toggled .tab i {
-  transform: rotate(90deg);
-}
-
 #page-content-wrapper {
   width: 100%;
   height: 100%;
diff --git a/covid-19-support/src/components/ResultsList.vue b/covid-19-support/src/components/ResultsList.vue
index 200762b1..bf456de5 100644
--- a/covid-19-support/src/components/ResultsList.vue
+++ b/covid-19-support/src/components/ResultsList.vue
@@ -31,8 +31,8 @@ export default {
 
 <style>
 .resultList {
-  height: 100vh;
-  overflow-y: scroll;
+  max-height: calc(100vh - 229px);
+  overflow-y: auto;
 }
 .resultItem {
   padding: 10px;
diff --git a/covid-19-support/src/components/SearchFilter.vue b/covid-19-support/src/components/SearchFilter.vue
index cfba64e9..8c530cee 100644
--- a/covid-19-support/src/components/SearchFilter.vue
+++ b/covid-19-support/src/components/SearchFilter.vue
@@ -37,6 +37,7 @@ export default {
   computed: {
     needOptions() {
       return [
+        { value: 'none', text: this.$tc('label.selectacategory', 1) },
         { value: 'restaurant', text: this.$tc('category.restaurant', 2) },
         { value: 'meal', text: this.$tc('category.meal', 2) },
         { value: 'grocery', text: this.$tc('category.grocery', 2) },
@@ -58,7 +59,7 @@ export default {
 
 <style scoped>
 #search-filter-wrapper {
-  margin-left: -22rem;
+  margin-left: -300px;
   -webkit-transition: margin 0.25s ease-out;
   -moz-transition: margin 0.25s ease-out;
   -o-transition: margin 0.25s ease-out;
@@ -78,7 +79,7 @@ export default {
 }
 
 .list-group {
-  width: 22rem;
+  width: 300px;
   border-bottom: solid 1px rgba(0, 0, 0, 0.125);
 }
 
@@ -100,6 +101,16 @@ export default {
   background: #fff;
   transition: left 0.25s ease-out;
   cursor: pointer;
+  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.3);
+}
+
+#wrapper.toggled .tab {
+  box-shadow: 12px 0px 14px 0px rgba(0, 0, 0, 0.3);
+  left: 300px;
+}
+
+#wrapper.toggled .tab i {
+  transform: rotate(90deg);
 }
 .tab i {
   font-size: 1.5rem;
diff --git a/covid-19-support/src/locales/en.json b/covid-19-support/src/locales/en.json
index 4755c640..5aa704d3 100644
--- a/covid-19-support/src/locales/en.json
+++ b/covid-19-support/src/locales/en.json
@@ -31,7 +31,8 @@
     "opentopublic": "Meals open to public",
     "orderonline": "Order & pay online",
     "phone": "Phone",
-    "seniorshopping": "Senior shopping hours"
+    "seniorshopping": "Senior shopping hours",
+    "selectacategory": "Select a category..."
   },
   "sidebar": {
     "what-do-you-need": "What do you need?",