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>
<Button @click="createTrainingReport">New Training Report</Button>
</div>
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">
Training
</TableHead>
<TableHead>Date</TableHead>
<TableHead class="text-right">
Posted By
</TableHead>
</TableRow>
</TableHeader>
<TableBody v-if="loaded">
<TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
@click="viewTrainingReport(report.event_id);">
<TableCell class="font-medium">{{ report.course_name }}</TableCell>
<TableCell>{{ report.date }}</TableCell>
<TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by
}}</TableCell>
</TableRow>
</TableBody>
</Table>
<div class="overflow-y-auto max-h-[70vh] mt-5 scrollbar-themed">
<Table>
<TableHeader>
<TableRow>
<TableHead class="w-[100px]">
Training
</TableHead>
<TableHead>Date</TableHead>
<TableHead class="text-right">
Posted By
</TableHead>
</TableRow>
</TableHeader>
<TableBody v-if="loaded">
<TableRow class="cursor-pointer" v-for="report in trainingReports" :key="report.event_id"
@click="viewTrainingReport(report.event_id);">
<TableCell class="font-medium">{{ report.course_name }}</TableCell>
<TableCell>{{ report.date }}</TableCell>
<TableCell class="text-right">{{ report.created_by === null ? "Unknown User" : report.created_by
}}</TableCell>
</TableRow>
</TableBody>
</Table>
</div>
</div>
<!-- view training report section -->
<div v-if="sidePanel == sidePanelState.view" class="px-4 border-l w-1/2">
@@ -129,3 +131,32 @@ onMounted(async () => {
</div>
</div>
</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>