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

tweaked training report scroll behaviour

Browse Source
This commit is contained in:
ajdj100
2025-11-20 09:06:16 -05:00
parent aad87096b5
commit a075162502
1 changed files with 53 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
ui/src/pages/TrainingReport.vue
View File

@@ -58,28 +58,30 @@ onMounted(async () => {
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p> <p class="scroll-m-20 text-2xl font-semibold tracking-tight">Training Reports</p>
<Button @click="createTrainingReport">New Training Report</Button> <Button @click="createTrainingReport">New Training Report</Button>
</div> </div>
<Table> <div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
<TableHeader> <Table>
<TableRow> <TableHeader>
<TableHead class="w-[100px]"> <TableRow>
Training <TableHead class="w-[100px]">
</TableHead> Training
<TableHead>Date</TableHead> </TableHead>
<TableHead class="text-right"> <TableHead>Date</TableHead>
Posted By <TableHead class="text-right">
</TableHead> Posted By
</TableRow> </TableHead>
</TableHeader> </TableRow>
<TableBody v-if="loaded"> </TableHeader>
<TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id" <TableBody v-if="loaded">
@click="viewTrainingReport(report.event_id);"> <TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
<TableCell class="font-medium">{{ report.course_name }}</TableCell> @click="viewTrainingReport(report.event_id);">
<TableCell>{{ report.date }}</TableCell> <TableCell class="font-medium">{{ report.course_name }}</TableCell>
<TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by <TableCell>{{ report.date }}</TableCell>
}}</TableCell> <TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by
</TableRow> }}</TableCell>
</TableBody> </TableRow>
</Table> </TableBody>
</Table>
</div>
</div> </div>
<!-- view training report section --> <!-- view training report section -->
<div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2"> <div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
@@ -129,3 +131,32 @@ onMounted(async () => {
</div> </div>
</div> </div>
</template> </template>
<style scoped>
/* Firefox */
.scrollbar-themed {
scrollbar-width: thin;
scrollbar-color: #555 #1f1f1f;
padding-right: 6px;
}
/* Chrome, Edge, Safari */
.scrollbar-themed::-webkit-scrollbar {
width: 10px; /* slightly wider to allow padding look */
}
.scrollbar-themed::-webkit-scrollbar-track {
background: #1f1f1f;
margin-left: 6px; /* ❗ adds space between content + scrollbar */
}
.scrollbar-themed::-webkit-scrollbar-thumb {
background: #555;
border-radius: 9999px;
}
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
background: #777;
}
</style>