Merge pull request #60 from readingdancer/Fix-Issue-On-Mobile

Fixed an issue on mobile and added the "Select your category" option.
code-for-chapel-hill · Mar 30, 2020 · 482a2d9 · 482a2d9
2 parents c96c9fb + 18f2480
commit 482a2d9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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?",