frontend: add diagonal month expand icon in year view

This commit is contained in:
Ruslan Bakiev
2026-02-21 15:48:39 +07:00
parent 432ea89a47
commit f6d4f87f00

View File

@@ -3827,9 +3827,20 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
<button <button
v-for="item in yearMonths" v-for="item in yearMonths"
:key="`year-month-${item.monthIndex}`" :key="`year-month-${item.monthIndex}`"
class="rounded-xl border border-base-300 p-3 text-left transition hover:border-primary/50 hover:bg-primary/5" class="group relative rounded-xl border border-base-300 p-3 text-left transition hover:border-primary/50 hover:bg-primary/5"
@click="openYearMonth(item.monthIndex)" @click="openYearMonth(item.monthIndex)"
> >
<button
type="button"
class="calendar-hover-jump calendar-hover-jump-month"
title="Expand month diagonally"
aria-label="Expand month diagonally"
@click.stop="openYearMonth(item.monthIndex)"
>
<svg viewBox="0 0 20 20" class="h-3.5 w-3.5 fill-none stroke-current" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M7 13L3 17M13 7l4-4M3 13V17h4M17 7V3h-4" />
</svg>
</button>
<p class="font-medium">{{ item.label }}</p> <p class="font-medium">{{ item.label }}</p>
<p class="text-xs text-base-content/60">{{ item.count }} events</p> <p class="text-xs text-base-content/60">{{ item.count }} events</p>
<button <button
@@ -4988,6 +4999,11 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
right: 10px; right: 10px;
} }
.calendar-hover-jump-month {
top: 8px;
right: 8px;
}
.calendar-hover-jump-row { .calendar-hover-jump-row {
top: 50%; top: 50%;
right: -14px; right: -14px;