[style] Fixed darkmode and layout on very small devices

src/components/Widget.vue

@@ -12,7 +12,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'DummyWidget',
+  name: 'EventsWidget',
   setup() {
     function randomNumber(start: number, end: number) {
       return start + Math.floor(Math.random() * Math.floor(end));

src/components/overview/AgendaView.vue

@@ -19,9 +19,9 @@
   <q-page padding>
     <q-card>
       <div style="max-width: 1800px; width: 100%">
-        <q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
+        <div class="bg-primary text-white q-my-sm shadow-2 row justify-center">
-          <div class="row justify-center items-center">
+          <div class="col-xs-12 col-sm-9 row justify-center items-center">
-            <q-btn flat dense label="Prev" @click="calendarPrev" />
+            <q-btn flat dense icon="mdi-chevron-left" title="previous" @click="calendarPrev" />
             <q-separator vertical />
             <q-btn flat dense
               >{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
@@ -45,22 +45,21 @@
               </q-popup-proxy>
             </q-btn>
             <q-separator vertical />
-            <q-btn flat dense label="Next" @click="calendarNext" />
+            <q-btn flat dense icon="mdi-chevron-right" title="next" @click="calendarNext" />
           </div>
-          <!-- <q-space /> -->
+          <div class="col-xs-12 col-sm-3 text-center">
-
           <q-btn-toggle
             v-model="calendarView"
-            class="row absolute-right"
             flat
             stretch
-            toggle-color=""
+            toggle-color="black"
             :options="[
               { label: 'Tag', value: 'day' },
               { label: 'Woche', value: 'week' },
             ]"
           />
-        </q-toolbar>
+          </div>
+        </div>
         <q-calendar-agenda
           v-model="selectedDate"
           :view="calendarRealView"
@@ -242,7 +241,13 @@ export default defineComponent({
 <style>
 @import '@quasar/quasar-ui-qcalendar/dist/index.css';
 
+/* Fill full height of card */
 .q-calendar-agenda__pane {
   height: 100%;
 }
+
+/* Same as Qcard */
+.q-calendar {
+  --calendar-background-dark: --q-dark;
+}
 </style>

src/pages/Overview.vue

@@ -59,9 +59,7 @@ export default defineComponent({
     }
 
     const tabs: Tab[] = [
-      { name: 'agendaView', label: 'Kalendar' },
+      { name: 'agendaView', label: 'Kalendar' }
-      // { name: 'eventtypes', label: 'Veranstaltungsarten' },
-      // { name: 'jobtypes', label: 'Dienstarten' }
     ];
 
     const drawer = ref<boolean>(false);