From b0ee28fae85e899328e1a1197481f9c35b47d33f Mon Sep 17 00:00:00 2001 From: Paulo Castellano Date: Fri, 9 Oct 2026 21:22:56 -0300 Subject: [PATCH 1/3] Show calendar posts as icon tiles on mobile On phones the month and week views rendered each post and posting slot as a squeezed chip with a cut-off time and thumbnail. Below md they now render as square tiles with the network icon, the overflow button reads "+N", and month rows are tall enough to fit three tiles plus the button. --- .../components/publish/CalendarPostChip.vue | 21 ++++++--- .../components/publish/CalendarSlotChip.vue | 27 ++++++++++- .../components/publish/CalendarTimeGrid.vue | 18 +++++--- resources/js/pages/posts/Calendar.vue | 45 ++++++++++++++++++- tests/Browser/CalendarPageTest.php | 11 ++++- 5 files changed, 105 insertions(+), 17 deletions(-) diff --git a/resources/js/components/publish/CalendarPostChip.vue b/resources/js/components/publish/CalendarPostChip.vue index a99734a93..660a0bbb7 100644 --- a/resources/js/components/publish/CalendarPostChip.vue +++ b/resources/js/components/publish/CalendarPostChip.vue @@ -27,8 +27,9 @@ const props = withDefaults( post: CalendarPost; timezone: string; layout?: 'month' | 'week'; + compact?: boolean; }>(), - { layout: 'month' }, + { layout: 'month', compact: false }, ); @@ -137,14 +138,22 @@ const scheduleMode = computed(() => class="flex min-w-0 shrink-0 gap-1.5 rounded-lg border border-border-strong bg-card text-start transition-control hover:bg-secondary focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ring data-[state=open]:bg-secondary" :class="[ STATUS_CLASSES[post.status] ?? '', - layout === 'week' - ? 'items-start p-1.5' - : 'h-7 items-center px-1', + compact + ? 'size-7 items-center justify-center' + : layout === 'week' + ? 'items-start p-1.5' + : 'h-7 items-center px-1', ]" :aria-label="`${channels} · ${time} · ${text || $t('calendar.no_content')}`" :data-testid="`calendar-post-${post.id}`" > - + + > diff --git a/resources/js/components/publish/CalendarSlotChip.vue b/resources/js/components/publish/CalendarSlotChip.vue index 84b367be1..cb9e95944 100644 --- a/resources/js/components/publish/CalendarSlotChip.vue +++ b/resources/js/components/publish/CalendarSlotChip.vue @@ -16,8 +16,9 @@ const props = withDefaults( timezone: string; canCreatePost: boolean; layout?: 'chip' | 'agenda'; + compact?: boolean; }>(), - { layout: 'chip' }, + { layout: 'chip', compact: false }, ); const time = computed(() => @@ -76,6 +77,30 @@ const newPost = (): void => { {{ $t('posts.publish.add_post_in_slot') }} + + + diff --git a/resources/js/pages/posts/Calendar.vue b/resources/js/pages/posts/Calendar.vue index e1d4c7c51..4bccd4cef 100644 --- a/resources/js/pages/posts/Calendar.vue +++ b/resources/js/pages/posts/Calendar.vue @@ -2,6 +2,7 @@ import { Head, router, usePage } from '@inertiajs/vue3'; import { IconChevronDown, + IconChevronUp, IconLayoutSidebarRightCollapse, IconLayoutSidebarRightExpand, IconPlus, @@ -711,7 +712,7 @@ const goToDay = (key: string): void => {
{ v-if="item.post" :post="item.post" :timezone="timezone" + :compact="!isDesktop" /> { " :timezone="timezone" :can-create-post="canCreatePost" + :compact="!isDesktop" />
@@ -789,13 +792,50 @@ const goToDay = (key: string): void => { itemsFor(day).length > MONTH_CHIPS " type="button" - class="inline-flex h-6 shrink-0 items-center gap-1 self-end rounded-md px-2 text-xs font-medium text-foreground transition-control hover:bg-accent" + class="inline-flex shrink-0 items-center gap-1 rounded-md text-xs font-medium text-foreground transition-control hover:bg-accent" + :class=" + isDesktop + ? 'h-6 self-end px-2' + : 'h-7 min-w-7 justify-center self-start px-1' + " :aria-expanded=" expandedDays.includes(dayKey(day)) " + :aria-label=" + isDesktop + ? undefined + : expandedDays.includes( + dayKey(day), + ) + ? $t('calendar.less') + : $t('calendar.more', { + count: String( + itemsFor(day) + .length - + MONTH_CHIPS, + ), + }) + " :data-testid="`calendar-more-${dayKey(day)}`" @click="toggleDay(dayKey(day))" > + + diff --git a/resources/js/components/publish/CalendarTimeGrid.vue b/resources/js/components/publish/CalendarTimeGrid.vue index cf0440442..bd1c08e77 100644 --- a/resources/js/components/publish/CalendarTimeGrid.vue +++ b/resources/js/components/publish/CalendarTimeGrid.vue @@ -71,6 +71,19 @@ const isStacked = ( hour: number, ): boolean => (column.byHour.get(hour)?.length ?? 0) > 1; +const iconOnly = computed(() => compact.value && props.days.length === 7); + +const chipClass = ( + column: { byHour: Map }, + hour: number, +): string => { + if (iconOnly.value) { + return ''; + } + + return isStacked(column, hour) ? 'w-full shrink-0' : 'flex-1'; +}; + const visibleItems = ( key: string, hour: number, @@ -201,14 +214,8 @@ watch( ? 'month' : 'week' " - :compact="compact" - :class=" - compact - ? '' - : isStacked(column, hour) - ? 'w-full shrink-0' - : 'flex-1' - " + :compact="iconOnly" + :class="chipClass(column, hour)" />