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

improved full details panel

Browse Source
This commit is contained in:
ajdj100
2026-01-17 10:25:18 -05:00
parent cdf8f57eb5
commit afbb771061
1 changed files with 37 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
ui/src/components/loa/loaList.vue
View File

@@ -235,27 +235,47 @@ function setPage(pagenum: number) {
<TableRow v-if="expanded === post.id" @mouseenter="hoverID = post.id"
@mouseleave="hoverID = null" :class="{ 'bg-muted/50 border-t-0': hoverID === post.id }">
<TableCell :colspan="8" class="p-0">
<div class="w-full p-3 mb-6 space-y-3">
<div class="flex justify-between items-start gap-4">
<div class="space-y-3 w-full">
<!-- Header -->
<div class="flex items-center gap-2">
<h4 class="text-sm font-semibold text-foreground">
Reason
</h4>
<Separator class="flex-1" />
</div>
<!-- Content -->
<div
class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground w-full">
{{ post.reason || 'No reason provided.' }}
</div>
<div class="w-full p-4 mb-6 space-y-4">
<!-- Dates -->
<div class="grid grid-cols-3 gap-4 text-sm">
<div>
<p class="text-muted-foreground">Start</p>
<p class="font-medium">
{{ formatDate(post.start_date) }}
</p>
</div>
<div>
<p class="text-muted-foreground">Original end</p>
<p class="font-medium">
{{ formatDate(post.end_date) }}
</p>
</div>
<div class="">
<p class="text-muted-foreground">Extended to</p>
<p class="font-medium text-foreground">
{{post.extended_till ? formatDate(post.extended_till) : 'N/A' }}
</p>
</div>
</div>
<!-- Reason -->
<div class="space-y-2">
<div class="flex items-center gap-2">
<h4 class="text-sm font-semibold text-foreground">
Reason
</h4>
<Separator class="flex-1" />
</div>
<div
class="rounded-lg border bg-muted/40 px-4 py-3 text-sm leading-relaxed whitespace-pre-wrap text-muted-foreground">
{{ post.reason || 'No reason provided.' }}
</div>
</div>
</div>
</TableCell>
</TableRow>