Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduced some spacing on mobile

Browse Source
This commit is contained in:
Alexis
2025-04-23 21:41:32 +02:00
parent 707d4374ef
commit f1f140f2bc
6 changed files with 38 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/calendar/state/monthly/DayTile.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup>
import type { RPGDate } from "~/models/Date"
import type { CalendarEvent } from "~/models/CalendarEvent"
import { useElementBounding } from "@vueuse/core"
import { breakpointsTailwind, useElementBounding } from "@vueuse/core"
import { storeToRefs } from "pinia"
import { computed, ref, type ComputedRef } from "vue"
@@ -15,9 +15,13 @@ const props = defineProps<{
const calendarTile = ref()
const calendarEventsList = ref()
const { defaultDate, selectDate, areDatesIdentical } = useCalendar()
const { defaultDate, selectDate, areDatesIdentical, getFormattedDateTitle } = useCalendar()
const { selectedDate, currentEvents, isReadOnly } = storeToRefs(useCalendar())
const breakpoints = useBreakpoints(
breakpointsTailwind
)
/**
* All events with a startDate / endDate that starts or ends on the tile
*/
@@ -73,22 +77,22 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<template>
<div
ref="calendarTile"
class="tile relative text-xs p-2"
class="tile relative p-1 md:p-2"
:class="{
'text-slate-300 dark:text-slate-500': props.faded,
'text-slate-500 dark:text-slate-300': !props.faded
}"
>
<button
class="relative z-10 group block w-full text-center cursor-pointer"
class="relative z-10 group block w-full text-2xs md:text-xs text-center cursor-pointer"
@click="selectDate(date)"
>
<ClientOnly>
<span
class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
class="inline-flex size-7 md:size-8 aspect-square items-center justify-center rounded-full border-1 md:border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
:class="{
'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
'text-white bg-indigo-500': isSelectedDate
'text-background bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
'text-background bg-indigo-500': isSelectedDate
}"
>
{{ date.day }}
@@ -99,7 +103,7 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<ClientOnly>
<ul
ref="calendarEventsList"
class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
class="absolute top-9 md:top-12 bottom-1 md:bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
:class="{
'opacity-40': props.faded && !isSelectedDate
}"
@@ -114,17 +118,23 @@ const eventsNotDisplayed: ComputedRef<number> = computed<number>(() => eventsFo
<UiPopover>
<UiPopoverTrigger as-child>
<button
class="text-xs px-2 py-1 block w-full text-left font-bold rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer transition-colors hover:bg-slate-800"
class="text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left font-bold rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer transition-colors hover:text-foreground hover:bg-foreground/10"
>
{{ eventsNotDisplayed }} autre{{ eventsNotDisplayed > 1 ? 's' : '' }}
</button>
</UiPopoverTrigger>
<UiPopoverContent class="w-80" :align="'center'" :side="'right'">
<div class="text-center mb-4">
<UiPopoverContent
class="w-80"
:align="'center'"
:align-offset="breakpoints.lg.value ? 50 : 25"
:collision-padding="breakpoints.lg.value ? 50 : 25"
:side="breakpoints.lg.value ? 'left' : 'bottom'"
>
<div class="text-center mb-2">
<span
class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
class="text-lg font-semibold rounded-full"
>
{{ date.day }}
{{ getFormattedDateTitle(date, true) }}
</span>
</div>
<ul class="grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity">