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

feat(calendar): move labels outside card borders for visual continuity

Browse Source 
- Month names moved above month cards in year view (outside article border)
  Hidden in non-year views; toolbar shows context label instead
- Day labels (Mon 24, Tue 25) moved above day columns in week view
- Each card/column wrapped in flex container: title above, card below
- New .calendar-card-title CSS: 11px, 55% opacity, subtle label above card
- No duplicate headers: toolbar is the single source of current context

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ruslan Bakiev
2026-02-24 14:42:09 +07:00
parent 9505cecab2
commit 00e036946c
1 changed files with 58 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -183,37 +183,46 @@ defineProps<{
class="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-3 auto-rows-fr"
:style="calendarViewportHeight > 0 ? { minHeight: `${calendarView === 'year' ? Math.max(420, calendarViewportHeight) : calendarViewportHeight}px` } : undefined"
>
<article
<div
v-for="item in yearMonths"
:key="`year-month-${item.monthIndex}`"
v-show="calendarView === 'year' || item.monthIndex === calendarCursorMonth"
class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable"
:class="[
calendarView === 'year'
? 'h-full hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
: 'cursor-default bg-base-100 sm:col-span-2 xl:col-span-3 flex flex-col',
calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
calendarView === 'year' ? 'flex flex-col h-full' : 'sm:col-span-2 xl:col-span-3 flex flex-col',
]"
:style="{
...calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex)),
...(calendarView !== 'year' && item.monthIndex === calendarCursorMonth && calendarViewportHeight > 0
? { minHeight: `${calendarViewportHeight}px` }
: {}),
}"
:data-calendar-month-index="item.monthIndex"
@mouseenter="setCalendarHoveredMonthIndex(item.monthIndex)"
@click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"
>
<p class="font-medium">{{ item.label }}</p>
<p class="text-xs text-base-content/60">{{ item.count }} events</p>
<button
v-if="calendarView === 'year' && item.first"
class="mt-1 block w-full text-left text-xs text-base-content/70 hover:underline"
@click.stop="openThreadFromCalendarItem(item.first)"
<p
v-if="calendarView === 'year'"
class="calendar-card-title"
>{{ item.label }}</p>
<article
class="group relative rounded-xl border border-base-300 p-3 text-left transition calendar-hover-targetable flex-1"
:class="[
calendarView === 'year'
? 'hover:border-primary/50 hover:bg-primary/5 cursor-zoom-in'
: 'cursor-default bg-base-100 flex flex-col',
calendarHoveredMonthIndex === item.monthIndex ? 'calendar-hover-target' : '',
calendarZoomPrimeToken === calendarPrimeMonthToken(item.monthIndex) ? 'calendar-zoom-prime-active' : '',
]"
:style="{
...calendarPrimeStyle(calendarPrimeMonthToken(item.monthIndex)),
...(calendarView !== 'year' && item.monthIndex === calendarCursorMonth && calendarViewportHeight > 0
? { minHeight: `${calendarViewportHeight}px` }
: {}),
}"
:data-calendar-month-index="item.monthIndex"
@mouseenter="setCalendarHoveredMonthIndex(item.monthIndex)"
@click="calendarView === 'year' ? zoomToMonth(item.monthIndex) : undefined"
>
{{ formatDay(item.first.start) }} · {{ item.first.title }}
</button>
<p v-if="calendarView === 'year'" class="text-xs text-base-content/60">{{ item.count }} events</p>
<button
v-if="calendarView === 'year' && item.first"
class="mt-1 block w-full text-left text-xs text-base-content/70 hover:underline"
@click.stop="openThreadFromCalendarItem(item.first)"
>
{{ formatDay(item.first.start) }} · {{ item.first.title }}
</button>
<div v-if="item.monthIndex === calendarCursorMonth" class="mt-3 calendar-depth-stack">
<div
@@ -284,23 +293,24 @@ defineProps<{
:class="calendarView === 'week' ? 'calendar-depth-layer-active' : 'calendar-depth-layer-hidden'"
>
<div class="calendar-week-grid">
<article
<div
v-for="day in weekDays"
:key="day.key"
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' : '',
calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
]"
:style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
:data-calendar-day-key="day.key"
@mouseenter="setCalendarHoveredDayKey(day.key)"
@click="pickDate(day.key)"
class="flex flex-col min-h-full"
>
<div class="mb-2 flex items-start justify-between gap-2">
<p class="text-sm font-semibold leading-tight">{{ day.label }} {{ day.day }}</p>
</div>
<p class="calendar-card-title text-center">{{ day.label }} {{ day.day }}</p>
<article
class="group relative flex flex-1 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' : '',
calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
]"
:style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
:data-calendar-day-key="day.key"
@mouseenter="setCalendarHoveredDayKey(day.key)"
@click="pickDate(day.key)"
>
<div class="space-y-1.5">
<button
v-for="event in day.events"
@@ -314,6 +324,7 @@ defineProps<{
<p v-if="day.events.length === 0" class="pt-1 text-xs text-base-content/50">No events</p>
</div>
</article>
</div>
</div>
</div>
@@ -338,6 +349,7 @@ defineProps<{
</div>
</div>
</article>
</div>
</div>
</div>
</div>
@@ -445,6 +457,14 @@ defineProps<{
right: 4px;
}
.calendar-card-title {
font-size: 11px;
font-weight: 600;
color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
padding: 0 4px 2px;
user-select: none;
}
.calendar-week-number {
display: inline-flex;
align-items: center;