From f502f803413383abfd405b660d7c26b1bb6e67a7 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 25 Apr 2025 17:25:01 +0200
Subject: [PATCH] Updated list style

---
 components/calendar/search/CalendarSearch.vue    | 10 +++++-----
 .../calendar/search/lists/EventCallout.vue       | 16 ++++++++--------
 components/calendar/search/lists/SearchList.vue  |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue       |  2 +-
 components/ui/dialog/DialogContent.vue           |  2 +-
 components/ui/dialog/DialogScrollContent.vue     |  2 +-
 components/ui/pagination/PaginationEllipsis.vue  |  2 +-
 components/ui/pagination/PaginationFirst.vue     |  2 +-
 components/ui/pagination/PaginationLast.vue      |  2 +-
 components/ui/pagination/PaginationNext.vue      |  2 +-
 components/ui/pagination/PaginationPrev.vue      |  2 +-
 11 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/components/calendar/search/CalendarSearch.vue b/components/calendar/search/CalendarSearch.vue
index d05b263..11335cf 100644
--- a/components/calendar/search/CalendarSearch.vue
+++ b/components/calendar/search/CalendarSearch.vue
@@ -265,10 +265,10 @@ function handleCategoryUnselect(e: Category) {
 <template>
   <UiDialog v-model:open="isAdvancedSearchOpen" @update:open="resetSearch()">
     <UiDialogContent
-      class="flex flex-col flex-nowrap top-10 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
-      :class="{
-        'bottom-10': searchResults.length > 0
-      }"
+      class="flex flex-col flex-nowrap top-10 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%] max-md:rounded-none"
+      :class="cn({
+        'max-md:w-full bottom-0 md:bottom-10 top-0 md:top-10': searchResults.length > 0
+      })"
     >
       <VisuallyHidden>
         <UiDialogTitle> {{ $t('entity.advancedSearch.title') }} </UiDialogTitle>
@@ -447,7 +447,7 @@ function handleCategoryUnselect(e: Category) {
                 as-child
               >
                 <UiButton
-                  class="w-10 h-10 p-0"
+                  class="size-8 md:size-10 p-0"
                   :variant="item.value === currentPage ? 'default' : 'outline'"
                 >
                   {{ item.value }}
diff --git a/components/calendar/search/lists/EventCallout.vue b/components/calendar/search/lists/EventCallout.vue
index ecf0a65..3655f48 100644
--- a/components/calendar/search/lists/EventCallout.vue
+++ b/components/calendar/search/lists/EventCallout.vue
@@ -21,7 +21,7 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
 
 <template>
   <button
-    class="event-callout group relative block w-full text-left py-3 px-4 cursor-pointer transition-colors"
+    class="event-callout group relative block w-full text-left py-2 px-3 md:py-3 md:px-4 cursor-pointer transition-colors"
     :class="cn(
       event.category ? `element-${event.category.color}` : '',
       {
@@ -30,7 +30,7 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
     @click="$emit('query:date-jump', event.startDate)"
   >
     <div class="flex gap-2 items-center mb-1">
-      <h2 class="font-bold text-lg underline-offset-4 group-hover:underline">
+      <h2 class="font-semibold md:font-bold md:text-lg underline-offset-4 group-hover:underline">
         {{ event.title }}
       </h2>
       <div v-if="event.wiki">
@@ -43,7 +43,7 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
       </div>
     </div>
 
-    <div class="flex gap-2 items-center justify-between mb-1">
+    <div class="flex gap-2 items-center justify-between mb-2 md:mb-1">
       <template v-if="!event.endDate">
         <p class="font-semibold text-sm opacity-75">
           {{ getFormattedDateTitle(event.startDate, true) }}
@@ -81,15 +81,15 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
 
     <div class="mb-1 flex gap-x-2 items-center">
       <template v-if="event.location">
-        <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
+        <p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
           <PhMapPinArea size="16" weight="fill" /> {{ event.location }}
         </p>
       </template>
-      <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
+      <p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
         <PhAlarm size="16" weight="fill" /> {{ dateDifference }}
       </p>
       <template v-if="dateDuration">
-        <p class="w-fit text-sm italic opacity-75 flex items-center gap-1">
+        <p class="w-fit text-xs md:text-sm italic opacity-75 flex items-center gap-1">
           <PhHourglassMedium size="16" weight="fill" /> {{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
         </p>
       </template>
@@ -111,8 +111,8 @@ const dateDuration = computed<string | null>(() => props.event.endDate ? getRela
       </ul>
     </div>
 
-    <div v-if="event.description" class="text-sm">
-      <hr class="my-2 border-white opacity-50" >
+    <div v-if="event.description" class="text-xs md:text-sm">
+      <hr class="my-3 md:my-2 border-white opacity-50" >
       <span class="opacity-75">
         {{ event.description }}
       </span>
diff --git a/components/calendar/search/lists/SearchList.vue b/components/calendar/search/lists/SearchList.vue
index 7701227..cf03588 100644
--- a/components/calendar/search/lists/SearchList.vue
+++ b/components/calendar/search/lists/SearchList.vue
@@ -60,7 +60,7 @@ const pagedResults = computed(() => sortedResults.value.slice(props.startAt, pro
 </script>
 
 <template>
-  <ul class="grid gap-4 pl-8 pr-12">
+  <ul class="grid gap-3 md:gap-4 pl-4 pr-6 md:pl-8 md:pr-12">
     <li v-for="r in pagedResults" :key="isCalendarEvent(r) ? r.title : r.name">
       <EventCallout v-if="isCalendarEvent(r)" :event="r" @query:date-jump="handleJumpToDate" />
 
diff --git a/components/ui/alert-dialog/AlertDialogContent.vue b/components/ui/alert-dialog/AlertDialogContent.vue
index da740fa..a6efa85 100644
--- a/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/components/ui/alert-dialog/AlertDialogContent.vue
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 gap-4 border border-indigo-200 bg-background dark:bg-slate-950 dark:border-indigo-950 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-3xl -translate-x-1/2 -translate-y-1/2 gap-4 border border-indigo-200 bg-background dark:bg-slate-950 dark:border-indigo-950 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% rounded-lg',
           props.class,
         )
       "
diff --git a/components/ui/dialog/DialogContent.vue b/components/ui/dialog/DialogContent.vue
index 3c0717f..e745b5c 100644
--- a/components/ui/dialog/DialogContent.vue
+++ b/components/ui/dialog/DialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-4xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background border-indigo-200 dark:bg-slate-950 dark:border-indigo-950 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-[calc(100%-2rem)] max-w-4xl -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background border-indigo-200 dark:bg-slate-950 dark:border-indigo-950 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% rounded-lg',
           props.class
         )
       "
diff --git a/components/ui/dialog/DialogScrollContent.vue b/components/ui/dialog/DialogScrollContent.vue
index a0e33cb..cbe3478 100644
--- a/components/ui/dialog/DialogScrollContent.vue
+++ b/components/ui/dialog/DialogScrollContent.vue
@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogContent
         :class="
           cn(
-            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 rounded-lg md:w-full',
             props.class
           )
         "
diff --git a/components/ui/pagination/PaginationEllipsis.vue b/components/ui/pagination/PaginationEllipsis.vue
index 4461bcf..bae7960 100644
--- a/components/ui/pagination/PaginationEllipsis.vue
+++ b/components/ui/pagination/PaginationEllipsis.vue
@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <PaginationEllipsis
     v-bind="delegatedProps"
-    :class="cn('size-9 flex items-center justify-center', props.class)"
+    :class="cn('size-8 md:size-10 flex items-center justify-center', props.class)"
   >
     <slot>
       <PhArrowsHorizontal />
diff --git a/components/ui/pagination/PaginationFirst.vue b/components/ui/pagination/PaginationFirst.vue
index 797c576..66b2491 100644
--- a/components/ui/pagination/PaginationFirst.vue
+++ b/components/ui/pagination/PaginationFirst.vue
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretDoubleLeft class="size-4" />
       </slot>
diff --git a/components/ui/pagination/PaginationLast.vue b/components/ui/pagination/PaginationLast.vue
index 445f802..4556f60 100644
--- a/components/ui/pagination/PaginationLast.vue
+++ b/components/ui/pagination/PaginationLast.vue
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretDoubleRight class="size-4" />
       </slot>
diff --git a/components/ui/pagination/PaginationNext.vue b/components/ui/pagination/PaginationNext.vue
index cfee4e1..d64bb35 100644
--- a/components/ui/pagination/PaginationNext.vue
+++ b/components/ui/pagination/PaginationNext.vue
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretRight class="size-4" />
       </slot>
diff --git a/components/ui/pagination/PaginationPrev.vue b/components/ui/pagination/PaginationPrev.vue
index 5f88339..c895a88 100644
--- a/components/ui/pagination/PaginationPrev.vue
+++ b/components/ui/pagination/PaginationPrev.vue
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretLeft class="size-4" />
       </slot>