17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 38 Pull Requests 1 Actions 3 Packages Projects 1 Releases 14 Wiki Activity

Mobile UX improvements for calendar

Browse Source
This commit is contained in:
ajdj100
2026-01-15 20:22:31 -05:00
parent f4abc51198
commit f58d0114eb
3 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/components/calendar/ViewCalendarEvent.vue
View File

@@ -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>

2
ui/src/components/ui/button/index.js
View File

@@ -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",

4
ui/src/pages/Calendar.vue
View File

@@ -155,7 +155,7 @@ onMounted(() => {
<div>
<CreateCalendarEvent ref="dialogRef" @reload="loadEvents(); eventViewRef.forceReload();"></CreateCalendarEvent>
<div class="flex">
<div class="flex-1 min-h-0 mt-5">
<div class="flex-1 min-h-0 mt-5" :class="{ 'hidden md:block': panelOpen }">
<div class="h-[80vh] min-h-0">
<!-- calendar header -->
<div class="flex items-center justify-between mx-5">
@@ -208,7 +208,7 @@ onMounted(() => {
</div>
</div>
<aside v-if="panelOpen"
class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
class="w-screen 3xl:w-lg 2xl:w-md lg:border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
:style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
<ViewCalendarEvent ref="eventViewRef" :key="currentEventID" @close="() => { router.push('/calendar'); }"
@reload="loadEvents()" @load="calendarRef.getApi().updateSize()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">