Add select instead of button group if running on xs-size

components/pages/events/index.vue

@@ -2,25 +2,12 @@
   <div>
     <app-loader :show="isLoading" />
     <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
-      <v-layout row>
-        <v-flex xs12>
-          <v-btn-toggle v-model="range" mandatory @change="changeRange()">
-            <v-btn flat value="ONE_WEEK">
-              1 vecka
-            </v-btn>
-            <v-btn flat value="TWO_WEEKS">
-              2 veckor
-            </v-btn>
-            <v-btn flat value="ONE_MONTH">
-              1 månad
-            </v-btn>
-            <v-btn flat value="ONE_QUARTER">
-              1 kvartal
-            </v-btn>
-            <v-btn flat value="ONE_YEAR">
-              1 år
-            </v-btn>
+      <v-layout row wrap>
+        <v-flex>
+          <v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory @change="changeRange">
+            <v-btn flat v-for="r in ranges" :key="r.value" :value="r.value">{{r.name}}</v-btn>
           </v-btn-toggle>
+          <v-select outline v-if="$vuetify.breakpoint.xsOnly" v-model="range" @change="changeRange" :items="ranges" item-text="name" item-value="value"></v-select>
         </v-flex>
       </v-layout>
       <v-layout row wrap v-for="event in events" :key="event.id">
@@ -72,7 +59,14 @@
         snackbar: false,
         snackColor: "success",
         snackText: "",
-        range: undefined
+        range: undefined,
+        ranges: [
+          {name: "1 vecka", value: "ONE_WEEK"},
+          {name: "2 veckor", value: "TWO_WEEKS"},
+          {name: "1 månad", value: "ONE_MONTH"},
+          {name: "1 kvartal", value: "ONE_QUARTER"},
+          {name: "1 år", value: "ONE_YEAR"}
+        ]
       };
     },
     computed: {
@@ -176,8 +170,8 @@
           this.snackbar = true;
         }
       },
-      changeRange() {
-        this.$router.push(`/?range=${this.range}`);
+      changeRange(range) {
+        this.$router.push(`/?range=${range}`);
       }
     }
   };