Feature/issue345

assets/variables.scss

@@ -10,6 +10,7 @@ $gray-1: #6F6F6F;
 $gray-2: #C8C8C8;
 $gray-3: #808080;
 $gray-4: #D9D9D9;
+$gray-5: #E5E5E5;
 $white-1: #FFFFFF;
 $white-2: #F8F9FA; 
 $black: #2D2D2D;

components/DataView.vue

@@ -98,6 +98,10 @@ export default class DataView extends Vue {
     .v-toolbar__content {
       align-items: start;
       justify-content: space-between;
+
+      @include lessThan($small) {
+        flex-direction: column;
+      }
     }
   }
   &-Header {
@@ -131,6 +135,14 @@ export default class DataView extends Vue {
     .infoIcon-visible {
       visibility: unset;
     }
+
+    @include lessThan($small) {
+      align-self: flex-end;
+
+      .DataView-DataInfo {
+        text-align: right;
+      }
+    }
   }
   &-CardText {
     margin-bottom: 46px;

components/DropDown.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="dropdown-container">
+    <select
+      v-model="selectedOption"
+      class="select-options"
+      @change="handleSelect($event)"
+    >
+      <option v-for="(option, index) in dropdownOptions" :key="index">
+        {{ option }}
+      </option>
+    </select>
+    <v-icon class="dropdown-icon">
+      fa fa-chevron-down
+    </v-icon>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dropdownOptions: {
+      type: Array,
+      required: true
+    },
+    dropdownModel: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  data() {
+    const selectedOption = this.dropdownModel
+    return {
+      selectedOption
+    }
+  },
+  methods: {
+    handleSelect(event) {
+      const dropdownModel = event.target.value
+      this.$emit('selectedOption', dropdownModel)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.dropdown-container {
+  border: 1px solid $gray-5;
+  border-radius: 5px;
+  background: $white-1;
+  display: inline-block;
+  white-space: nowrap;
+
+  select {
+    padding: 0.435em 0.5em 0.435em 1em;
+  }
+
+  select:hover {
+    cursor: pointer;
+  }
+
+  .dropdown-icon {
+    font-size: 12px;
+    margin-right: 1em;
+  }
+
+  select:focus {
+    outline: none;
+  }
+}
+</style>

components/News.vue

@@ -3,11 +3,11 @@
     <div class="county-select">
       <v-card color="#7D70BB" class="county-selector-card">
         <label class="selection">Select a County:</label>
-        <select v-model="currentCounty" class="county-choice">
-          <option v-for="(countyName, index) in countyNames" :key="index">
-            {{ countyName }}
-          </option>
-        </select>
+        <DropDown
+          :dropdown-model="currentCounty"
+          :dropdown-options="countyNames"
+          @selectedOption="handleSelect"
+        />
       </v-card>
     </div>
 
@@ -16,6 +16,7 @@
   </div>
 </template>
 <script>
+import DropDown from '@/components/DropDown'
 import WhatsNew from '@/components/WhatsNew.vue'
 import AlamedaNews from '@/data/news/alameda.json'
 import ContraCostaNews from '@/data/news/contra_costa.json'
@@ -31,6 +32,7 @@ import Data from '@/data/data.json'
 
 export default {
   components: {
+    DropDown,
     WhatsNew,
     CountyGuidelines
   },
@@ -55,6 +57,11 @@ export default {
     }
     return data
   },
+  methods: {
+    handleSelect(event) {
+      this.currentCounty = event
+    }
+  },
   head() {
     return {
       title: this.$t('COVID-19 News')

components/Stats.vue

@@ -40,11 +40,11 @@
           <div class="county-select-container">
             <div class="county-select">
               <label class="selection">Show Data For:</label>
-              <select v-model="currentCounty" class="select-css">
-                <option v-for="(countyName, index) in countyNames" :key="index">
-                  {{ countyName }}
-                </option>
-              </select>
+              <DropDown
+                :dropdown-model="currentCounty"
+                :dropdown-options="countyNames"
+                @selectedOption="handleSelect"
+              />
             </div>
             <div class="county-stats">
               <div class="border">
@@ -252,6 +252,7 @@
 </template>
 
 <script>
+import DropDown from '@/components/DropDown.vue'
 import TimeBarChart from '@/components/TimeBarChart.vue'
 import TimeLineChart from '@/components/TimeLineChart.vue'
 import TimeLineChartCountyComparison from '@/components/TimeLineChartCountyComparison.vue'
@@ -274,7 +275,8 @@ export default {
     TimeLineChart,
     TimeLineChartCountyComparison,
     HorizontalBarChart,
-    DataView
+    DataView,
+    DropDown
   },
   data() {
     const currentCounty = 'San Francisco County'
@@ -421,6 +423,9 @@ export default {
         case 'Solano County':
           return 'solano'
       }
+    },
+    handleSelect(county) {
+      this.currentCounty = county
     }
   },
   head() {
@@ -539,46 +544,6 @@ export default {
     }
   }
 
-  .select-css {
-    display: block;
-    font-size: 16px;
-    font-weight: 700;
-    color: #444;
-    line-height: 1.3;
-    padding: 0.6em 1.4em 0.5em 0.8em;
-    width: 40%;
-    max-width: 60%;
-    box-sizing: border-box;
-    margin: 0;
-    border: 1px solid #aaa;
-    box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04);
-    border-radius: 0.5em;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: #fff;
-    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
-      linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
-    background-repeat: no-repeat, repeat;
-    background-position: right 0.7em top 50%, 0 0;
-    background-size: 0.65em auto, 100%;
-    &:-ms-expand {
-      display: none;
-    }
-    &:hover {
-      border-color: #888;
-    }
-    &:focus {
-      border-color: #aaa;
-      box-shadow: 0 0 1px 3px rgba(59, 153, 252, 0.7);
-      box-shadow: 0 0 0 3px -moz-mac-focusring;
-      color: #222;
-      outline: none;
-    }
-    option {
-      font-weight: normal;
-    }
-  }
   @include lessThan($small) {
     .select-css {
       width: initial;