fixed scrolling behaviour on application management page
This commit is contained in:
@@ -168,7 +168,7 @@
|
||||
}
|
||||
|
||||
/* Root container */
|
||||
.ListRendererV2-container {
|
||||
.bookstack-container {
|
||||
font-family: var(--font-sans, system-ui), sans-serif;
|
||||
color: var(--foreground);
|
||||
line-height: 1.45;
|
||||
@@ -178,56 +178,53 @@
|
||||
}
|
||||
|
||||
/* Headers */
|
||||
.ListRendererV2-container h4 {
|
||||
.bookstack-container h4 {
|
||||
margin: 0.9rem 0 0.4rem 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
font-size: 1.05rem;
|
||||
color: var(--foreground);
|
||||
/* PURE WHITE */
|
||||
}
|
||||
|
||||
.ListRendererV2-container h5 {
|
||||
.bookstack-container h5 {
|
||||
margin: 0.9rem 0 0.4rem 0;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
font-size: 0.95rem;
|
||||
color: var(--foreground);
|
||||
/* Still white (change to muted if desired) */
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
.ListRendererV2-container ul {
|
||||
.bookstack-container ul {
|
||||
list-style-type: disc;
|
||||
margin-left: 1.1rem;
|
||||
margin-bottom: 0.6rem;
|
||||
padding-left: 0.6rem;
|
||||
color: var(--muted-foreground);
|
||||
/* dim text */
|
||||
}
|
||||
|
||||
/* Nested lists */
|
||||
.ListRendererV2-container ul ul {
|
||||
.bookstack-container ul ul {
|
||||
list-style-type: circle;
|
||||
margin-left: 0.9rem;
|
||||
}
|
||||
|
||||
/* List items */
|
||||
.ListRendererV2-container li {
|
||||
.bookstack-container li {
|
||||
margin: 0.15rem 0;
|
||||
padding-left: 0.1rem;
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Bullet color */
|
||||
.ListRendererV2-container li::marker {
|
||||
.bookstack-container li::marker {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
/* Inline elements */
|
||||
.ListRendererV2-container li p,
|
||||
.ListRendererV2-container li span,
|
||||
.ListRendererV2-container p {
|
||||
.bookstack-container li p,
|
||||
.bookstack-container li span,
|
||||
.bookstack-container p {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@@ -235,6 +232,45 @@
|
||||
}
|
||||
|
||||
/* Top-level spacing */
|
||||
.ListRendererV2-container>ul>li {
|
||||
.bookstack-container>ul>li {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
/* links */
|
||||
.bookstack-container a {
|
||||
color: var(--color-primary);
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
|
||||
.bookstack-container a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Scrollbar stuff */
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { getAllApplications, approveApplication, denyApplication } from '@/api/application';
|
||||
import { getAllApplications, approveApplication, denyApplication } from '@/api/application';
|
||||
import { ApplicationStatus } from '@shared/types/application'
|
||||
import {
|
||||
Table,
|
||||
@@ -96,39 +96,50 @@ onMounted(async () => {
|
||||
<!-- application list -->
|
||||
<div :class="openPanel == false ? 'w-full' : 'w-2/5'" class="pr-9">
|
||||
<h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">Manage Applications</h1>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Date Submitted</TableHead>
|
||||
<TableHead class="text-right">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody class="overflow-y-auto scrollbar-themed">
|
||||
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
|
||||
:onClick="() => { openApplication(app.id) }">
|
||||
<TableCell class="font-medium">{{ app.member_name }}</TableCell>
|
||||
<TableCell :title="formatExact(app.submitted_at)">
|
||||
{{ formatAgo(app.submitted_at) }}
|
||||
</TableCell>
|
||||
<TableCell v-if="app.app_status === ApplicationStatus.Pending"
|
||||
class="inline-flex items-end gap-2">
|
||||
<Button variant="success" @click.stop="() => { handleApprove(app.id) }">
|
||||
<CheckIcon></CheckIcon>
|
||||
</Button>
|
||||
<Button variant="destructive" @click.stop="() => { handleDeny(app.id) }">
|
||||
<XIcon></XIcon>
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell class="text-right font-semibold" :class="[
|
||||
,
|
||||
app.app_status === ApplicationStatus.Pending && 'text-yellow-500',
|
||||
app.app_status === ApplicationStatus.Accepted && 'text-green-500',
|
||||
app.app_status === ApplicationStatus.Denied && 'text-destructive'
|
||||
]">{{ app.app_status }}</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div class="max-h-[80vh] overflow-hidden">
|
||||
<Table class="w-full">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Date Submitted</TableHead>
|
||||
<TableHead class="text-right">Status</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
</Table>
|
||||
|
||||
<!-- Scrollable body container -->
|
||||
<div class="overflow-y-auto max-h-[70vh] scrollbar-themed">
|
||||
<Table class="w-full">
|
||||
<TableBody>
|
||||
<TableRow v-for="app in appList" :key="app.id" class="cursor-pointer"
|
||||
@click="openApplication(app.id)">
|
||||
<TableCell class="font-medium">{{ app.member_name }}</TableCell>
|
||||
<TableCell :title="formatExact(app.submitted_at)">
|
||||
{{ formatAgo(app.submitted_at) }}
|
||||
</TableCell>
|
||||
|
||||
<TableCell v-if="app.app_status === ApplicationStatus.Pending"
|
||||
class="inline-flex items-end gap-2">
|
||||
<Button variant="success" @click.stop="handleApprove(app.id)">
|
||||
<CheckIcon />
|
||||
</Button>
|
||||
<Button variant="destructive" @click.stop="handleDeny(app.id)">
|
||||
<XIcon />
|
||||
</Button>
|
||||
</TableCell>
|
||||
|
||||
<TableCell class="text-right font-semibold" :class="[
|
||||
app.app_status === ApplicationStatus.Pending && 'text-yellow-500',
|
||||
app.app_status === ApplicationStatus.Accepted && 'text-green-500',
|
||||
app.app_status === ApplicationStatus.Denied && 'text-destructive'
|
||||
]">
|
||||
{{ app.app_status }}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="openPanel" class="pl-9 border-l w-3/5" :key="$route.params.id">
|
||||
<div class="mb-5 flex justify-between">
|
||||
@@ -144,32 +155,4 @@ onMounted(async () => {
|
||||
</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>
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user