ayanova/src/views/svc-schedule.vue

@@ -4,18 +4,24 @@
     <!-- {{ categories }}<br />
     {{ events }} -->
     <v-sheet height="64">
-      <v-toolbar flat class="ml-n3">
-        <v-btn outlined class="xxmr-4" color="grey darken-2" @click="setToday">
+      <v-toolbar flat dense class="ml-n3">
+        <v-btn
+          outlined
+          :small="$vuetify.breakpoint.xs"
+          :large="$vuetify.breakpoint.md"
+          class="xxmr-4"
+          @click="setToday"
+        >
           {{ $ay.t("DateRangeToday") }}
         </v-btn>
-        <v-btn fab text small color="grey darken-2" @click="prev">
+        <v-btn fab text small @click="prev">
           <v-icon small>$prev</v-icon>
         </v-btn>
-        <v-btn fab text small color="grey darken-2" @click="next">
+        <v-btn fab text small @click="next">
           <v-icon small>$next</v-icon>
         </v-btn>
         <v-toolbar-title v-if="$refs.calendar">
-          <v-btn text @click="viewType = 'month'">
+          <v-btn small text @click="viewType = 'month'">
             {{ $refs.calendar.title }}</v-btn
           >
         </v-toolbar-title>
@@ -23,6 +29,7 @@
         <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
         <template v-if="!$vuetify.breakpoint.xs">
           <gz-tag-picker
+            class="mr-3"
             place-holder="ph filter users"
             no-label
             select-only
@@ -30,20 +37,13 @@
             @input="refresh"
           ></gz-tag-picker>
         </template>
-        <v-btn
-          class="mr-3"
-          fab
-          text
-          small
-          color="grey darken-2"
-          @click="settingsDialog = true"
-        >
+        <v-btn class="mr-3" fab text small @click="settingsDialog = true">
           <v-icon small>$ayiCog</v-icon>
         </v-btn>
 
         <v-menu bottom right>
           <template v-slot:activator="{ on, attrs }">
-            <v-btn outlined color="grey darken-2" v-bind="attrs" v-on="on">
+            <v-btn small outlined v-bind="attrs" v-on="on">
               <span>{{ typeToLabel() }}</span>
               <v-icon right>$sort</v-icon>
             </v-btn>
@@ -287,6 +287,18 @@
             <v-card-title>{{ $ay.t("ScheduleOptions") }} </v-card-title>
             <v-card-text>
               <v-row no-gutters>
+                <template v-if="$vuetify.breakpoint.xs">
+                  <v-col cols="12">
+                    <gz-tag-picker
+                      place-holder="ph filter users"
+                      label="mylabel"
+                      hint="BLAH"
+                      select-only
+                      v-model="tags"
+                      @input="refresh"
+                    ></gz-tag-picker>
+                  </v-col>
+                </template>
                 <v-col cols="12" class="mt-2">
                   <gz-time-picker
                     :label="$ay.t('ScheduleFirstHour')"