dsrptlab/clientsflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(calendar): scope zoom selectors by layer and stretch week days to full height

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-02-23 15:32:52 +07:00
parent df8c06d313
commit 0bbeef5594
2 changed files with 21 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/app/components/workspace/calendar/CrmCalendarPanel.vue
View File

@@ -206,6 +206,7 @@ defineProps<{
<div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack">
<div
class="space-y-1 calendar-depth-layer"
data-calendar-layer="month"
:class="calendarView === 'month' || calendarView === 'agenda' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
>
<div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
@@ -262,14 +263,15 @@ defineProps<{
</div>
<div
class="calendar-week-scroll overflow-x-auto pb-1 calendar-depth-layer"
class="calendar-week-scroll h-full min-h-0 overflow-x-auto pb-1 calendar-depth-layer"
data-calendar-layer="week"
:class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
>
<div class="calendar-week-grid">
<article
v-for="day in weekDays"
:key="day.key"
class="group relative flex min-h-[18rem] flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
class="group relative flex h-full min-h-full flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
:class="[
selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
@@ -301,6 +303,7 @@ defineProps<{
<div
class="space-y-2 calendar-depth-layer"
data-calendar-layer="day"
:class="calendarView === 'day' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
>
<button
@@ -359,6 +362,8 @@ defineProps<{
grid-template-columns: repeat(7, minmax(165px, 1fr));
gap: 8px;
min-width: 1180px;
min-height: 100%;
align-items: stretch;
}
.calendar-depth-stack {