Changed limit and added scrollbars on details

This commit is contained in:
Alexis
2024-11-25 16:33:02 +01:00
parent 372c7a49e1
commit 863937bb16
5 changed files with 33 additions and 21 deletions

View File

@@ -75,7 +75,7 @@ function deployDeleteModal() {
>
<div ref="eventDetails" class="grid gap-1">
<header class="pr-12">
<div class="text-lg font-semibold">
<div class="mb-2 max-h-24 overflow-y-auto text-lg font-semibold">
{{ event.title }}
</div>
@@ -100,18 +100,26 @@ function deployDeleteModal() {
<div class="mb-1 space-y-1">
<template v-if="event.location">
<p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhMapPinArea size="16" weight="fill" /> {{ event.location }}
</p>
<div class="text-sm italic dark:opacity-75 flex items-center gap-1">
<div>
<PhMapPinArea size="16" weight="fill" />
</div>
<p class="max-h-12 overflow-y-auto">{{ event.location }}</p>
</div>
</template>
<p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhAlarm size="16" weight="fill" /> {{ dateDifference }}
</p>
<div class="text-sm italic dark:opacity-75 flex items-center gap-1">
<div>
<PhAlarm size="16" weight="fill" />
</div>
<p>{{ dateDifference }}</p>
</div>
<template v-if="dateDuration">
<p class="text-sm italic dark:opacity-75 flex items-center gap-1">
<PhHourglassMedium size="16" weight="fill" />
{{ $t('entity.calendar.date.while', { duration: dateDuration } )}}
</p>
<div class="text-sm italic dark:opacity-75 flex items-center gap-1">
<div>
<PhHourglassMedium size="16" weight="fill" />
</div>
<p>{{ $t('entity.calendar.date.while', { duration: dateDuration } )}}</p>
</div>
</template>
</div>
@@ -134,7 +142,7 @@ function deployDeleteModal() {
<template v-if="event.description">
<hr class="border-slate-500 mt-2" >
<div class="mt-2 text-sm text-slate-600 dark:text-slate-300">
<div class="max-h-48 overflow-y-auto mt-2 text-sm text-slate-600 dark:text-slate-300">
{{ event.description }}
</div>
</template>

View File

@@ -104,6 +104,7 @@ function handleCancel() {
name="new-event-title"
required
:placeholder="$t('entity.calendar.event.title')"
:maxlength="120"
class="w-full -my-1 py-1 -mx-1 px-1 text-lg border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
>
</div>
@@ -116,6 +117,7 @@ function handleCancel() {
name="new-event-description"
:placeholder="$t('entity.addDescription')"
class="w-full -my-1 py-1 -mx-1 px-1 min-h-24 max-h-36 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
:maxlength="1200"
/>
</div>
@@ -170,7 +172,9 @@ function handleCancel() {
type="text"
name="new-event-location"
:placeholder="$t('entity.calendar.event.addLocation')"
class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600">
class="w-full -my-1 py-2 px-2 text-sm border-b-[1px] bg-transparent focus-visible:outline-none focus-visible:border-blue-600"
:maxlength="160"
>
</div>
</div>