Merge pull request #295 from Vizioz/features/mobile-UI

Features/mobile UI
code-for-chapel-hill · Feb 26, 2021 · c087e56 · c087e56
2 parents 1975662 + cbbd6c5
commit c087e56
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 32 deletions.
diff --git a/covid-19-support/src/App.vue b/covid-19-support/src/App.vue
@@ -3,7 +3,7 @@
     <app-header :language="language.name" @language-selected="changeLanguage" :socialMedia="socialMediaico">
       <theme-header></theme-header>
     </app-header>
-    <mobile-search-filters :need="need" @need-selected="needSelected" />
+    <mobile-search-filters :need="need" :warning="warningMobile" @need-selected="needSelected" />
     <!-- <mobile-map-list-toggle
       :is-filter-open="isFilterOpen"
       :is-resource-selected="locationData.currentBusiness != null && showList !== true"
@@ -19,6 +19,7 @@
         :highlightFilteredMarkers="highlightFilteredMarkers"
         :location="locationData"
         :show-list="showList"
+        :warning="warning"
         @location-selected="locationSelected"
         @toggle="isFilterOpen = !isFilterOpen"
         @need-selected="needSelected"
@@ -133,7 +134,9 @@ export default {
       darkMode: darkModeMediaQuery.matches,
       mapUrl: '',
       attribution: null,
-      socialMediaico: theme.socialMedia
+      socialMediaico: theme.socialMedia,
+      warning: theme.warning,
+      warningMobile: theme.warning
     }
   },
   mounted() {
@@ -189,6 +192,7 @@ export default {
       this.need = val
       this.showList = this.need !== 'none'
       this.highlightFilters = []
+      this.warningMobile = null
       window.gtag('event', 'What do you need?', { event_category: 'Search - (' + this.language.name + ')', event_label: val })
     },
     changeLanguage(item) {

diff --git a/covid-19-support/src/components/BusinessDetails.vue b/covid-19-support/src/components/BusinessDetails.vue
@@ -9,13 +9,15 @@
     <b-list-group class="list-group-flush business-details" @click="expandBusinessDetails">
       <b-list-group-item variant="sideNav" :class="infotype + (snippet ? ' business-snippet' : '')">
         <div>
-          <div class="mobile-expand" @click.stop="toggleExpand"></div>
-          <div class="title">
-            <i :class="businessIcon(business.marker)"></i>
-            <div class="busName">
-              <h5>{{ business.marker.gsx$providername.$t }}</h5>
-              <span v-if="!!business.marker.gsx$provideraddloc.$t">{{ business.marker.gsx$provideraddloc.$t }}</span>
-              <template v-if="!!business.marker.gsx$cuisine.$t">{{ business.marker.gsx$cuisine.$t }}</template>
+          <div @click.stop="toggleExpand">
+            <div class="mobile-expand"></div>
+            <div class="title">
+              <i :class="businessIcon(business.marker)"></i>
+              <div class="busName">
+                <h5>{{ business.marker.gsx$providername.$t }}</h5>
+                <span v-if="!!business.marker.gsx$provideraddloc.$t">{{ business.marker.gsx$provideraddloc.$t }}</span>
+                <template v-if="!!business.marker.gsx$cuisine.$t">{{ business.marker.gsx$cuisine.$t }}</template>
+              </div>
             </div>
           </div>
           <div v-if="!snippet && getAddress(business.marker) !== ''">
@@ -179,7 +181,7 @@
               />
             </span>
           </p>
-          <p class="directions-options" id="directions-options-snippet" v-if="snippet && directionsBool" @click.stop>
+          <p class="directions-options-expanded" id="directions-options-snippet" v-if="snippet && directionsBool" @click.stop>
             <icon-list-item class="list-item" icon="fa fa-google" title="Google Maps" :link="googleDirectionsLink(business.marker)" />
             <icon-list-item v-if="iOS" icon="fa fa-apple" title="Apple Maps" :link="appleDirectionsLink(business.marker)" />
             <icon-list-item icon="fa-waze" iconSet="fab" title="Waze" :link="wazeDirectionsLink(business.marker)" />
@@ -469,19 +471,17 @@ export default {
       }
     }
 
-    .directions-options {
+    .directions-options-expanded {
       background-color: white;
       border: 1px solid #ddd;
       padding: 10px 6px;
       display: flex;
+      justify-content: space-around;
+      text-align: center;
       margin-bottom: 4px;
       outline: 1px solid theme-color-level('quaternary');
       outline-offset: -2px;
 
-      > div {
-        flex: 1 0 auto;
-      }
-
       ::v-deep .iconListItem {
         //background-color: transparent;
 

diff --git a/covid-19-support/src/components/MobileSearchFilters.vue b/covid-19-support/src/components/MobileSearchFilters.vue
@@ -1,15 +1,24 @@
 <template>
-  <search-filters class="mobile-search-filters" :need="need" @need-selected="(opt) => $emit('need-selected', opt)"></search-filters>
+  <div class="mobile-search-filters">
+    <search-filters :need="need" @need-selected="(opt) => $emit('need-selected', opt)"></search-filters>
+    <b-alert v-if="warning" v-model="showWarning" variant="warning" dismissible>{{ warning }}</b-alert>
+  </div>
 </template>
 
 <script>
 import SearchFilters from './SearchFilters'
 export default {
   props: {
-    need: String
+    need: String,
+    warning: String
   },
   components: {
     SearchFilters
+  },
+  data() {
+    return {
+      showWarning: true
+    }
   }
 }
 </script>
@@ -24,6 +33,13 @@ export default {
   width: 100%;
   background: theme-color('secondary');
 
+  .alert {
+    position: absolute;
+    top: 100%;
+    margin: 20px 1.25rem;
+    width: calc(100% - 2.5rem);
+  }
+
   @media (prefers-color-scheme: dark) {
     background: theme-color('secondaryDark');
   }

diff --git a/covid-19-support/src/components/Sidebar.vue b/covid-19-support/src/components/Sidebar.vue
@@ -1,8 +1,10 @@
 <template>
   <aside>
-    <div class="sh" @click="toggleListing()" v-if="showListButton">
-      <span><i class="fas" :class="showListIcon" />{{ showListLabel }}</span>
-    </div>
+    <b-collapse class="sh" :class="showListClass" v-model="showListButton">
+      <div @click="toggleListing()">
+        <span><i class="fas" :class="showListIcon" />{{ showListLabel }}</span>
+      </div>
+    </b-collapse>
 
     <div class="border-right" id="sidebar-wrapper" ref="sidebar" :class="expandedDetails" :style="transformVal">
       <div class="tab bg-dialogs border-right border-top border-bottom" @click="toggle">
@@ -16,6 +18,9 @@
           <info-panel :infotype="'note'" :icon="'fa-info-circle'" v-if="location.currentBusiness == null || showLists">
             {{ $t('sidebar.info-about-us') }} <a href="#" @click="$bvModal.show('about-us')">{{ $t('sidebar.info-link-text') }}</a
             >{{ $t('sidebar.info-end-text') }}
+            <div class="warning-wrap" v-if="warning">
+              <b-alert variant="warning" show>{{ warning }}</b-alert>
+            </div>
           </info-panel>
 
           <info-panel :infotype="'handwash'" :icon="'fa-hands-wash'" v-if="filteredMarkers.length == 0">
@@ -73,7 +78,8 @@ export default {
     highlightFilteredMarkers: Array,
     location: { locValue: Number, locId: String, isSetByMap: Boolean, currentBusiness: Object },
     showList: Boolean,
-    listType: String
+    listType: String,
+    warning: String
   },
   data() {
     return {
@@ -100,14 +106,22 @@ export default {
     showLists() {
       return this.showListsVal
     },
-    showListButton() {
-      return this.showListsVal || this.location.currentBusiness
+    showListButton: {
+      set() {
+        // do nothing. This setter needed to allow v-model for the collapse component
+      },
+      get() {
+        return this.filteredMarkers.length > 0 || this.location.currentBusiness
+      }
     },
     showListIcon() {
-      return this.showExpandedDetails ? 'fa-map-marked-alt' : 'fa-list-ul'
+      return this.highlightFilteredMarkers.length ? (this.showExpandedDetails ? 'fa-map-marked-alt' : 'fa-list-ul') : 'fa-expand-alt'
     },
     showListLabel() {
-      return this.showExpandedDetails ? 'Show Map' : 'Show List'
+      return this.highlightFilteredMarkers.length ? (this.showExpandedDetails ? 'Show Map' : 'Show List') : 'Zoom out to view results'
+    },
+    showListClass() {
+      return !this.highlightFilteredMarkers.length ? 'disabled' : ''
     },
     businessSnippet() {
       var isSnippet =
@@ -128,7 +142,7 @@ export default {
       this.showExpandedDetails = !this.showExpandedDetails
     },
     toggleListing() {
-      if (!this.location.currentBusiness) {
+      if (!this.location.currentBusiness && this.highlightFilteredMarkers.length) {
         this.showListsVal = true
         this.showExpandedDetails = !this.showExpandedDetails
       }
@@ -143,7 +157,8 @@ export default {
 
           if (business) {
             let height = business.$vnode.elm.clientHeight
-            t.transformVal = 'transform: translateY(calc(100vh - ' + (height + 132) + 'px))'
+            let windowHeight = window.innerHeight
+            t.transformVal = 'transform: translateY(' + (windowHeight - (height + 132)) + 'px)'
           } else {
             t.transformVal = ''
           }
@@ -188,12 +203,21 @@ export default {
   padding-bottom: 2px;
   padding-left: calc(2.5% + 1.25rem);
   padding-right: calc(2.5% + 1.25rem);
-  box-shadow: 0px 0px 4px #999;
   margin: 0;
   line-height: 2.5;
   background-color: #eee;
   cursor: pointer;
 
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+
+  @media (prefers-color-scheme: dark) {
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+  }
+
+  &.disabled {
+    color: rgba(0, 0, 0, 0.7);
+  }
+
   i {
     margin-right: 10px;
   }
@@ -209,13 +233,13 @@ export default {
 
 #sidebar-wrapper {
   transition: transform 0.25s ease-out;
-  transform: translateY(calc(100vh - 132px));
+  transform: translateY(calc(100% - 76px));
   z-index: 1035;
-  max-height: 100vh;
+  max-height: 100%;
   margin-left: 2.5%;
   margin-right: 2.5%;
   width: 95%;
-  height: 100vh;
+  height: 100%;
   background: theme-color('secondary');
   z-index: 1037;
 
@@ -346,4 +370,17 @@ export default {
   margin-top: 18px;
   margin-left: 7px;
 }
+
+.warning-wrap {
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 0;
+
+  .alert {
+    width: 100%;
+    padding: 10px;
+    margin: 0;
+    font-weight: bold;
+  }
+}
 </style>
diff --git a/covid-19-support/src/themes/NCCovidSupport/theme.config.js b/covid-19-support/src/themes/NCCovidSupport/theme.config.js
@@ -41,5 +41,6 @@ export const theme = {
       attribution:
         '&copy; <a href="https://carto.com/">Carto</a>, &copy; <a href="https://openmaptiles.org/">OpenMapTiles</a> &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
     }
-  }
+  },
+  warning: 'This site is no longer being updated'
 }