Mobile UX improvements for calendar
This commit is contained in:
@@ -184,7 +184,7 @@ defineExpose({ forceReload })
|
||||
<template>
|
||||
<div v-if="loaded">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
|
||||
<div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3 ">
|
||||
<h2 class="text-lg font-semibold break-after-all">
|
||||
{{ activeEvent?.name || 'Event' }}
|
||||
</h2>
|
||||
@@ -232,14 +232,14 @@ defineExpose({ forceReload })
|
||||
</div>
|
||||
</section>
|
||||
<section v-if="isPast && userStore.state === 'member'" class="w-full">
|
||||
<ButtonGroup class="flex w-full">
|
||||
<Button variant="outline"
|
||||
<ButtonGroup class="flex w-full justify-center">
|
||||
<Button variant="outline" class="flex-1"
|
||||
:class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
|
||||
@click="setAttendance(CalendarAttendance.Attending)">Going</Button>
|
||||
<Button variant="outline"
|
||||
<Button variant="outline" class="flex-1"
|
||||
:class="myAttendance?.status === CalendarAttendance.Maybe ? 'border-2 !border-l-2 border-primary text-primary' : ''"
|
||||
@click="setAttendance(CalendarAttendance.Maybe)">Maybe</Button>
|
||||
<Button variant="outline"
|
||||
<Button variant="outline" class="flex-1"
|
||||
:class="myAttendance?.status === CalendarAttendance.NotAttending ? 'border-2 !border-l-2 border-primary text-primary' : ''"
|
||||
@click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
|
||||
</ButtonGroup>
|
||||
@@ -264,7 +264,7 @@ defineExpose({ forceReload })
|
||||
<!-- Description -->
|
||||
<section class="space-y-2 w-full">
|
||||
<p class="text-lg font-semibold">Description</p>
|
||||
<p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
|
||||
<p class="border border-border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
|
||||
{{ activeEvent.description }}
|
||||
</p>
|
||||
</section>
|
||||
@@ -278,8 +278,8 @@ defineExpose({ forceReload })
|
||||
<p>Declined <span class="ml-1">{{ attendanceStatusSummary.notAttending }}</span></p>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
|
||||
<div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
|
||||
<div class="flex flex-col border border-border bg-muted/50 rounded-lg min-h-24 my-2">
|
||||
<div class="flex w-full pt-2 border-b border-border *:w-full *:text-center *:pb-1 *:cursor-pointer">
|
||||
<label :class="attendanceTab === 'Alpha' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
||||
@click="attendanceTab = 'Alpha'">Alpha {{ attendanceCountsByGroup.Alpha }}</label>
|
||||
<label :class="attendanceTab === 'Echo' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
||||
@@ -288,7 +288,7 @@ defineExpose({ forceReload })
|
||||
@click="attendanceTab = 'Other'">Other {{ attendanceCountsByGroup.Other }}</label>
|
||||
</div>
|
||||
<div class="pb-1 min-h-48">
|
||||
<div class="grid grid-cols-2 font-semibold text-muted-foreground border-b py-1 px-3 mb-2">
|
||||
<div class="grid grid-cols-2 font-semibold text-muted-foreground border-b border-border py-1 px-3 mb-2">
|
||||
<p>Name</p>
|
||||
<p class="text-right">Status</p>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@ export const buttonVariants = cva(
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
"hover:bg-accent active:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
success:
|
||||
"bg-success text-success-foreground shadow-xs hover:bg-success/90",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
|
||||
Reference in New Issue
Block a user