warning message witht theme data

code-for-chapel-hill · Feb 26, 2021 · cbbd6c5 · cbbd6c5
1 parent 8a4e342
commit cbbd6c5
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 6 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/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
@@ -18,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">
@@ -75,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 {
@@ -366,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'
 }