vignesh/trypost
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(posts): tidy the mobile calendar header

Browse source 
- Show/hide the date picker and view switcher with Tailwind (lg:hidden /
  hidden lg:block) instead of the isMobile ref; isMobile now only drives
  effectiveView (which changes navigation behavior, not just visibility)
- Full-width buttons on mobile: prev / Today (fills) / next, and the date
  picker fills the row next to New post
This commit is contained in:
Paulo Castellano 2026-07-17 21:16:43 -03:00
parent fe721d490b
commit 07c2e7cbf3
1 changed files with 17 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
resources/js/pages/posts/Calendar.vue
View file

@ -52,9 +52,8 @@ interface Props {
const props = defineProps<Props>();
// Mobile detection — seed from the viewport at setup (available on client render
// and SPA navigations) so a narrow screen never paints the month grid for a frame.
const isMobile = ref(typeof window !== 'undefined' ? window.innerWidth < 1024 : false);
// Mobile detection
const isMobile = ref(false);
const { canCreatePost } = useWorkspaceRole();
const createPostUrl = (isoDate: string | null = null) =>
@ -255,14 +254,14 @@ const formatTime = (scheduledAt: string): string => {
<AppLayout :fullWidth="true">
<div class="flex flex-col h-full">
<header class="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b-2 border-foreground bg-card px-4 py-3 md:grid md:grid-cols-[auto_1fr_auto] md:px-6">
<div class="flex items-center gap-2 pl-12 md:pl-0">
<Button variant="outline" size="icon" @click="navigate(-1)">
<div class="flex w-full items-center gap-2 pl-12 md:w-auto md:pl-0">
<Button variant="outline" size="icon" class="shrink-0" @click="navigate(-1)">
<IconChevronLeft class="size-4" />
</Button>
<Button variant="outline" @click="goToToday">
<Button variant="outline" class="flex-1 md:flex-none" @click="goToToday">
{{ $t('calendar.today') }}
</Button>
<Button variant="outline" size="icon" @click="navigate(1)">
<Button variant="outline" size="icon" class="shrink-0" @click="navigate(1)">
<IconChevronRight class="size-4" />
</Button>
</div>
@ -271,17 +270,19 @@ const formatTime = (scheduledAt: string): string => {
{{ headerTitle }}
</span>
</div>
<div class="flex items-center gap-2">
<div v-if="isMobile" class="w-44">
<div class="flex w-full items-center gap-2 md:w-auto">
<div class="flex-1 lg:hidden">
<DatePicker v-model="selectedDate" :show-time="false" @update:model-value="(v: any) => goToDate(v)" />
</div>
<Tabs v-if="!isMobile" :default-value="view" @update:model-value="switchView">
<TabsList>
<TabsTrigger value="day">{{ $t('calendar.day') }}</TabsTrigger>
<TabsTrigger value="week">{{ $t('calendar.week') }}</TabsTrigger>
<TabsTrigger value="month">{{ $t('calendar.month') }}</TabsTrigger>
</TabsList>
</Tabs>
<div class="hidden lg:block">
<Tabs :default-value="view" @update:model-value="switchView">
<TabsList>
<TabsTrigger value="day">{{ $t('calendar.day') }}</TabsTrigger>
<TabsTrigger value="week">{{ $t('calendar.week') }}</TabsTrigger>
<TabsTrigger value="month">{{ $t('calendar.month') }}</TabsTrigger>
</TabsList>
</Tabs>
</div>
<Link v-if="canCreatePost" :href="createPost.url()">
<Button>{{ $t('calendar.new_post') }}</Button>