From 511014d04380fec911ce13f11f665e2fb7f8e5c3 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <rpm@fthiessen.de>
Date: Tue, 16 Nov 2021 23:30:21 +0100
Subject: [PATCH] [style] Fix style on extra small devices

* Show only one day in the agenda view if devices has a very low width.
* Fix very tiny font on small devices
---
 src/components/overview/AgendaView.vue      | 19 ++++++++-----------
 src/components/overview/slots/EventSlot.vue |  8 ++++----
 src/pages/Overview.vue                      | 18 +++++++-----------
 3 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/components/overview/AgendaView.vue b/src/components/overview/AgendaView.vue
index a090467..d33dfc5 100644
--- a/src/components/overview/AgendaView.vue
+++ b/src/components/overview/AgendaView.vue
@@ -49,6 +49,7 @@
           </div>
           <div class="col-xs-12 col-sm-3 text-center">
             <q-btn-toggle
+              v-if="$q.screen.gt.xs"
               v-model="calendarView"
               flat
               stretch
@@ -80,7 +81,7 @@
           </template>
           <template #day="{ scope: { timestamp } }">
             <div itemref="" class="q-pb-sm" style="min-height: 200px">
-              <eventslot
+              <event-slot
                 v-for="(agenda, index) in events[timestamp.weekday]"
                 :key="index"
                 v-model="events[timestamp.weekday][index]"
@@ -98,27 +99,27 @@
 <script lang="ts">
 import { ComponentPublicInstance, computed, defineComponent, onBeforeMount, ref } from 'vue';
 import { useScheduleStore } from '../../store';
-import Eventslot from './slots/EventSlot.vue';
-import { date } from 'quasar';
+import EventSlot from './slots/EventSlot.vue';
+import { date, useQuasar } from 'quasar';
 import { startOfWeek } from '@flaschengeist/api';
 import EditEvent from '../management/EditEvent.vue';
 import { QCalendarAgenda } from '@quasar/quasar-ui-qcalendar';
 
 export default defineComponent({
   name: 'AgendaView',
-  components: { Eventslot, EditEvent, QCalendarAgenda: <ComponentPublicInstance>QCalendarAgenda },
+  components: { EventSlot, EditEvent, QCalendarAgenda: <ComponentPublicInstance>QCalendarAgenda },
 
   setup() {
     const store = useScheduleStore();
-    const windowWidth = ref(window.innerWidth);
+    const quasar = useQuasar();
+
     const selectedDate = ref(date.formatDate(new Date(), 'YYYY-MM-DD'));
     const proxyDate = ref('');
     const calendarView = ref('week');
 
     const calendarRealView = computed(() => (calendarDays.value != 7 ? 'day' : 'week'));
     const calendarDays = computed(() =>
-      // <= 1023 is the breakpoint for sm to md
-      calendarView.value == 'day' ? 1 : windowWidth.value <= 1023 ? 3 : 7
+      (calendarView.value == 'day' || quasar.screen.xs) ? 1 : quasar.screen.sm ? 3 : 7
     );
     const events = ref<Agendas>({});
     const editor = ref<FG.Event | undefined>(undefined);
@@ -128,10 +129,6 @@ export default defineComponent({
     }
 
     onBeforeMount(async () => {
-      window.addEventListener('resize', () => {
-        windowWidth.value = window.innerWidth;
-      });
-
       await loadAgendas();
     });
 
diff --git a/src/components/overview/slots/EventSlot.vue b/src/components/overview/slots/EventSlot.vue
index 3638682..d819ef5 100644
--- a/src/components/overview/slots/EventSlot.vue
+++ b/src/components/overview/slots/EventSlot.vue
@@ -4,13 +4,13 @@
     bordered
   >
     <q-card-section class="text-primary q-pa-xs">
-      <div class="text-weight-bolder text-center" style="font-size: 1.5vw">
+      <div class="text-weight-bolder text-center">
         {{ event.type.name }}
         <template v-if="event.name"
-          >: <span style="font-size: 1.2vw">{{ event.name }}</span>
+          >: <span>{{ event.name }}</span>
         </template>
       </div>
-      <div v-if="event.description" class="text-weight-medium" style="font-size: 1vw">
+      <div v-if="event.description" class="text-weight-medium">
         {{ event.description }}
       </div>
     </q-card-section>
@@ -53,7 +53,7 @@ import { PERMISSIONS } from '../../../permissions';
 import JobSlot from './JobSlot.vue';
 
 export default defineComponent({
-  name: 'Eventslot',
+  name: 'EventSlot',
   components: { JobSlot },
   props: {
     modelValue: {
diff --git a/src/pages/Overview.vue b/src/pages/Overview.vue
index b54bd48..4a2e128 100644
--- a/src/pages/Overview.vue
+++ b/src/pages/Overview.vue
@@ -34,7 +34,7 @@
         <q-tab-panel name="agendaView">
           <AgendaView />
         </q-tab-panel>
-        <q-tab-panel name="eventtypes">
+        <q-tab-panel name="listView">
         </q-tab-panel>
       </q-tab-panels>
     </q-page>
@@ -44,27 +44,23 @@
 <script lang="ts">
 import { computed, defineComponent, ref } from 'vue';
 import AgendaView from '../components/overview/AgendaView.vue';
-import { Screen } from 'quasar';
+import { useQuasar } from 'quasar';
 
 export default defineComponent({
   name: 'EventOverview',
   components: { AgendaView },
   setup() {
-    interface Tab {
-      name: string;
-      label: string;
-    }
+    const quasar = useQuasar();
 
-    const tabs: Tab[] = [
+    const tabs = computed(() => ([
+      { name: 'listView', label: 'Liste' },
       { name: 'agendaView', label: 'Kalendar' }
-    ];
+    ]));
 
     const drawer = ref<boolean>(false);
 
     const showDrawer = computed({
-      get: () => {
-        return !Screen.gt.sm && drawer.value;
-      },
+      get: () => !quasar.screen.gt.sm && drawer.value,
       set: (val: boolean) => {
         drawer.value = val;
       },