ayanova/src/views/home-schedule.vue

@@ -3,35 +3,46 @@
     <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
     <v-sheet height="64">
       <v-toolbar flat class="ml-n3">
-        <v-btn outlined class="xxmr-4" color="grey darken-2" @click="setToday">
+        <v-btn text :small="isXS" :large="issmAndUp" @click="setToday">
           {{ $ay.t("DateRangeToday") }}
         </v-btn>
-        <v-btn fab text small color="grey darken-2" @click="prev">
-          <v-icon small>$prev</v-icon>
+        <v-btn fab text :small="isXS" @click="prev">
+          <v-icon :small="isXS">$prev</v-icon>
         </v-btn>
-        <v-btn fab text small color="grey darken-2" @click="next">
-          <v-icon small>$next</v-icon>
+        <v-btn fab text :small="isXS" @click="next">
+          <v-icon :small="isXS">$next</v-icon>
         </v-btn>
         <v-toolbar-title v-if="$refs.calendar">
-          <v-btn text @click="viewType = 'month'">
+          <v-btn
+            :small="isXS"
+            :large="issmAndUp"
+            text
+            @click="viewType = 'month'"
+          >
             {{ $refs.calendar.title }}</v-btn
           >
         </v-toolbar-title>
-        <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
+        <v-spacer v-if="issmAndUp"></v-spacer>
         <v-btn
           class="mr-3"
           fab
           text
-          small
-          color="grey darken-2"
+          :small="isXS"
+          :large="issmAndUp"
           @click="settingsDialog = true"
         >
-          <v-icon small>$ayiCog</v-icon>
+          <v-icon :small="isXS">$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="isXS"
+              :large="issmAndUp"
+              text
+              v-bind="attrs"
+              v-on="on"
+            >
               <span>{{ typeToLabel() }}</span>
               <v-icon right>$sort</v-icon>
             </v-btn>
@@ -406,7 +417,7 @@
               <v-btn text @click="settingsDialog = false" color="primary">{{
                 $ay.t("Cancel")
               }}</v-btn>
-              <v-spacer v-if="!$vuetify.breakpoint.xs"></v-spacer>
+              <v-spacer v-if="issmAndUp"></v-spacer>
               <v-btn
                 color="primary"
                 text
@@ -898,6 +909,13 @@ export default {
       return window.$gz.util.DaysOfWeekToWeekdays(
         this.formUserOptions.excludeDaysOfWeek
       );
+    },
+    isXS() {
+      //console.log(this.$vuetify.breakpoint);
+      return this.$vuetify.breakpoint.xs;
+    },
+    issmAndUp() {
+      return this.$vuetify.breakpoint.smAndUp;
     }
   }
 };

ayanova/src/views/svc-schedule.vue

@@ -6,19 +6,13 @@
 
     <v-sheet height="64">
       <v-toolbar flat dense class="ml-n3">
-        <v-btn
-          text
-          :small="isXS"
-          :large="issmAndUp"
-          class="xxmr-4"
-          @click="setToday"
-        >
+        <v-btn text :small="isXS" :large="issmAndUp" @click="setToday">
           {{ $ay.t("DateRangeToday") }}
         </v-btn>
-        <v-btn fab text small @click="prev">
+        <v-btn fab text :small="isXS" @click="prev">
           <v-icon :small="isXS">$prev</v-icon>
         </v-btn>
-        <v-btn fab text small @click="next">
+        <v-btn fab text :small="isXS" @click="next">
           <v-icon :small="isXS">$next</v-icon>
         </v-btn>
         <v-toolbar-title v-if="$refs.calendar">
@@ -53,7 +47,7 @@
           :large="issmAndUp"
           @click="settingsDialog = true"
         >
-          <v-icon :small="isXS" >$ayiCog</v-icon>
+          <v-icon :small="isXS">$ayiCog</v-icon>
         </v-btn>
 
         <v-menu bottom right>