From 707d4374ef753e3136975d8132aa846625cea3c0 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 23 Apr 2025 16:21:51 +0200
Subject: [PATCH] Changed calendar layout for buttons

---
 app.vue                                         |  2 +-
 components/calendar/dialog/QuickCreateEvent.vue | 15 ++++++++++++---
 components/calendar/menu/Menu.vue               | 14 ++++++++++++--
 components/calendar/state/monthly/DayTile.vue   |  2 --
 components/calendar/state/monthly/Layout.vue    |  5 ++++-
 5 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/app.vue b/app.vue
index a8e9e84..696529d 100644
--- a/app.vue
+++ b/app.vue
@@ -37,7 +37,7 @@ const useIdFunction = () => useId()
         <div class="h-full grid grid-cols-[auto_1fr] dark:bg-black transition-colors">
           <Sidebar />
 
-          <div class="wrapper shadow-body-light dark:shadow-body-dark transition-all">
+          <div class="wrapper max-h-screen shadow-body-light dark:shadow-body-dark transition-all">
             <NuxtPage />
           </div>
         </div>
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index 41a9218..486501f 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { PhPlus } from "@phosphor-icons/vue";
 
 const isDialogOpen = ref<boolean>(false);
@@ -15,13 +16,21 @@ function toggleDialog() {
 function handleClosing() {
   setTimeout(() => resetSkeleton(), 100)
 }
+
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
 </script>
 
 <template>
-  <UiButton @click="toggleDialog">
-    <PhPlus size="18" weight="bold" />
+  <UiButton
+    class="max-md:fixed max-md:bottom-16 max-md:right-8 max-md:z-50 max-md:size-12 max-md:shadow"
+    :size="breakpoints.lg.value ? 'default' : 'icon'"
+    @click="toggleDialog"
+  >
+    <PhPlus :size="breakpoints.md.value ? 18 : 24" weight="bold" />
 
-    <strong class="font-semibold">
+    <strong class="font-semibold max-lg:hidden">
       {{ $t("entity.calendar.event.newEvent") }}
     </strong>
   </UiButton>
diff --git a/components/calendar/menu/Menu.vue b/components/calendar/menu/Menu.vue
index e510630..e553814 100644
--- a/components/calendar/menu/Menu.vue
+++ b/components/calendar/menu/Menu.vue
@@ -1,10 +1,15 @@
 <script lang="ts" setup>
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { useCalendar } from "~/stores/CalendarStore"
 
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
 const { revealAdvancedSearch, } = useCalendar()
 const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
+
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
 </script>
 
 <template>
@@ -24,9 +29,14 @@ const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
 
       <menu class="flex items-center gap-2">
         <li>
-          <UiButton search-slash @click="revealAdvancedSearch()">
+          <UiButton
+            :search-slash="breakpoints.lg.value"
+            :size="breakpoints.lg.value ? 'default' : 'icon'"
+            @click="revealAdvancedSearch()"
+          >
             <PhMagnifyingGlass size="20" weight="light" />
-            <span>
+
+            <span class="max-lg:hidden">
               {{ $t('entity.advancedSearch.title') }}
             </span>
           </UiButton>
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index 9d45c80..bb39c48 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -149,8 +149,6 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 </template>
 
 <style lang="scss" scoped>
-// .tile are the direct children of the grid
-// We need to get, between each element, a 1px solid line to separate them, for columns and rows
 .tile {
   border-right-width: 1px;
   border-bottom-width: 1px;
diff --git a/components/calendar/state/monthly/Layout.vue b/components/calendar/state/monthly/Layout.vue
index aa1c163..83759f8 100644
--- a/components/calendar/state/monthly/Layout.vue
+++ b/components/calendar/state/monthly/Layout.vue
@@ -6,6 +6,9 @@ const { currentDate, decrementViewMonth, incrementViewMonth } = useCalendar()
 const { currentMonthData } = storeToRefs(useCalendar())
 
 function handleWheel(e: WheelEvent) {
+  // Prevent scrolling
+  e.preventDefault()
+
   const isMovingUp = e.deltaY < 0
   if (isMovingUp) {
     moveCalendarLeft()
@@ -24,7 +27,7 @@ const moveCalendarRight = useThrottleFn(() => {
 </script>
 
 <template>
-  <div class="grid grid-cols-10" @wheel="handleWheel">
+  <div class="grid grid-cols-5 md:grid-cols-7 lg:grid-cols-10" @wheel="handleWheel">
     <template v-if="currentMonthData">
       <CalendarStateMonthlyDayTile
         v-for="day in currentMonthData?.days"