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

adjusted grid styling

Browse Source
This commit is contained in:
ajdj100
2025-11-20 15:11:14 -05:00
parent 91b915fbcf
commit 9322affce5
2 changed files with 23 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
ui/src/components/trainingReport/trainingReportForm.vue
View File

@@ -117,11 +117,11 @@ onMounted(async () => {
<!-- Column Headers -->
<div
class="grid grid-cols-[180px_140px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 font-medium text-sm text-muted-foreground px-1">
<div>Member</div>
<div>Role</div>
<div v-if="selectedCourse?.hasBookwork">Bookwork</div>
<div v-if="selectedCourse?.hasQual">Qual</div>
<div>Bookwork</div>
<div>Qual</div>
<div>Remarks</div>
<div></div> <!-- empty for remove button -->
</div>
@@ -130,7 +130,7 @@ onMounted(async () => {
<!-- Attendee Rows -->
<template v-for="(field, index) in fields" :key="field.key">
<div class="grid grid-cols-[180px_140px_50px_1fr_auto] gap-3 items-start">
<div class="grid grid-cols-[180px_160px_50px_50px_1fr_auto] gap-3 items-start">
<!-- Member Select -->
<VeeField :name="`attendees[${index}].attendee_id`" v-slot="{ field: f, errors: e }">
@@ -161,41 +161,40 @@ onMounted(async () => {
</VeeField>
<!-- Passed Checkbox -->
<VeeField v-if="selectedCourse?.hasBookwork" v-slot="{ field }"
:name="`attendees[${index}].passed_bookwork`" type="checkbox" :value="true"
:unchecked-value="false">
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_bookwork`" type="checkbox"
:value="true" :unchecked-value="false">
<label>
<input type="checkbox" :name="`attendees[${index}].passed_bookwork`" v-bind="field"
:value="true" />
<!-- <Checkbox :name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
</Checkbox> -->
<!-- <input type="checkbox" :name="`attendees[${index}].passed_bookwork`" v-bind="field"
:value="true" /> -->
<Checkbox :disabled="!selectedCourse?.hasBookwork"
:name="`attendees[${index}].passed_bookwork`" v-bind="field" :value="true">
</Checkbox>
</label>
</VeeField>
<!-- Passed Checkbox -->
<VeeField v-if="selectedCourse?.hasQual" v-slot="{ field }"
:name="`attendees[${index}].passed_qual`" type="checkbox" :value="true"
:unchecked-value="false">
<VeeField v-slot="{ field }" :name="`attendees[${index}].passed_qual`" type="checkbox"
:value="true" :unchecked-value="false">
<label>
<input type="checkbox" :name="`attendees[${index}].passed_qual`" v-bind="field"
:value="true" />
<!-- <Checkbox :name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox> -->
<!-- <input type="checkbox" :name="`attendees[${index}].passed_qual`" v-bind="field"
:value="true" /> -->
<Checkbox :disabled="!selectedCourse?.hasQual"
:name="`attendees[${index}].passed_qual`" v-bind="field"></Checkbox>
</label>
</VeeField>
<!-- Remarks -->
<VeeField :name="`attendees[${index}].remarks`" v-slot="{ field: f, errors: e }">
<div>
<textarea v-bind="f" class="w-full border p-2 rounded-md h-[38px] resize-none"
<textarea v-bind="f" class="h-[38px] resize-none border rounded p-2 w-full focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] bg-background outline-none"
placeholder="Optional remarks"></textarea>
<FieldError v-if="e.length" :errors="e" />
</div>
</VeeField>
<!-- Remove button -->
<Button type="button" variant="ghost" size="xs" @click="remove(index)" class="self-center">
<X class="h-4 w-4" />
<Button type="button" variant="ghost" @click="remove(index)" class="self-center">
<X :size="10" />
</Button>
</div>
</template>