enhance: calendar add button

src/components/Modal.vue

@@ -6,7 +6,12 @@
     @contextmenu.prevent
   >
     <!-- @click="closeModal" -->
-    <component :is="component_ref" :data="data" @click.stop class="p-4 bg-white rounded-lg" />
+    <component
+      :is="component_ref"
+      :data="data"
+      @click.stop
+      class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
+    />
   </div>
 </template>
 

src/components/admin/club/calendar/CreateCalendarModal.vue

@@ -76,7 +76,7 @@
         />
         <label for="allDay">ganztägig</label>
       </div>
-      <div v-if="!allDay" class="flex flex-row gap-2">
+      <div v-if="!allDay" class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input
@@ -105,7 +105,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-row gap-2">
+      <div v-else class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input

src/components/admin/club/calendar/UpdateCalendarModal.vue

@@ -78,7 +78,7 @@
         <input type="checkbox" id="allDay" v-model="calendar.allDay" />
         <label for="allDay">ganztägig</label>
       </div>
-      <div v-if="!calendar.allDay" class="flex flex-row gap-2">
+      <div v-if="!calendar.allDay" class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input
@@ -113,7 +113,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-row gap-2">
+      <div v-else class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input

src/components/public/calendar/ShowCalendarEntryModal.vue

@@ -18,7 +18,7 @@
         <textarea id="content" class="h-18" readonly :value="data.content"></textarea>
       </div>
       <div v-if="data.allDay" class="flex flex-row gap-2 items-center">Der Termin findet ganztägig statt.</div>
-      <div v-if="data.allDay == false" class="flex flex-row gap-2">
+      <div v-if="data.allDay == false" class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input type="datetime-local" id="starttime" readonly :value="formatForDateTimeLocalInput(data.starttime)" />
@@ -34,7 +34,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-row gap-2">
+      <div v-else class="flex flex-col sm:flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input type="date" id="startdate" readonly :value="formatForDateInput(data.starttime)" />

src/main.css

@@ -87,7 +87,8 @@ select {
 input[readonly],
 textarea[readonly],
 select[readonly] {
-  @apply pointer-events-none;
+  @apply select-none;
+  /* pointer-events-none; */
 }
 
 input[disabled],
@@ -124,7 +125,7 @@ summary::-webkit-details-marker {
 }
 
 .fc-button-primary {
-  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700;
+  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700 h-10 text-center;
 }
 .fc-button-active {
   @apply !bg-red-500 !border-red-500;
@@ -132,3 +133,19 @@ summary::-webkit-details-marker {
 .fc-toolbar {
   @apply flex-wrap;
 }
+
+/* For screens between 850px and 768px */
+@media (max-width: 850px) and (min-width: 768px) {
+  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
+    @apply !order-1;
+  }
+  /* Your styles for this range */
+}
+
+/* For screens between 525px and 0px */
+@media (max-width: 525px) and (min-width: 0px) {
+  /* Your styles for this range */
+  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
+    @apply !order-1;
+  }
+}

src/views/admin/club/calendar/Calendar.vue

@@ -3,7 +3,10 @@
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Kalender</h1>
-        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
+        <div class="flex flex-row gap-2">
+          <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select" />
+          <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
+        </div>
       </div>
     </template>
     <template #diffMain>
@@ -26,7 +29,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { useCalendarStore } from "@/stores/admin/club/calendar";
 import { useAbilityStore } from "@/stores/ability";
-import { LinkIcon } from "@heroicons/vue/24/outline";
+import { LinkIcon, PlusIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -76,9 +79,9 @@ export default defineComponent({
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
         {
-          start: e.startStr,
-          end: e.endStr,
-          allDay: e.allDay,
+          start: e?.startStr ?? new Date().toISOString(),
+          end: e?.endStr ?? new Date().toISOString(),
+          allDay: e?.allDay ?? false,
         }
       );
     },