dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Hide Card wrapper on mobile for cleaner layout

Browse Source 
- Desktop: Show table in bordered Card wrapper
- Mobile: Remove wrapper padding and hide Card border
- Individual cards now display directly without outer container
- Applied to AdminMembers, AdminOrders, AdminConsulting, AdminEvents

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-25 10:51:06 +07:00
parent 534c9629ea
commit bc88c0590d
4 changed files with 40 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/admin/AdminConsulting.tsx
View File

@@ -305,10 +305,10 @@ export default function AdminConsulting() {
</TabsList> </TabsList>
<TabsContent value="upcoming"> <TabsContent value="upcoming">
<Card className="border-2 border-border"> <Card className="border-2 border-border hidden md:block">
<CardContent className="p-0"> <CardContent className="p-0">
{/* Desktop Table */} {/* Desktop Table */}
<div className="hidden md:block overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -405,11 +405,13 @@ export default function AdminConsulting() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</CardContent>
</Card>
{/* Mobile Card Layout */} {/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4"> <div className="md:hidden space-y-3">
{upcomingSlots.map((slot) => ( {upcomingSlots.map((slot) => (
<div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card"> <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div> <div>
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
@@ -493,15 +495,13 @@ export default function AdminConsulting() {
</div> </div>
)} )}
</div> </div>
</CardContent>
</Card>
</TabsContent> </TabsContent>
<TabsContent value="past"> <TabsContent value="past">
<Card className="border-2 border-border"> <Card className="border-2 border-border hidden md:block">
<CardContent className="p-0"> <CardContent className="p-0">
{/* Desktop Table */} {/* Desktop Table */}
<div className="hidden md:block overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -535,11 +535,13 @@ export default function AdminConsulting() {
)} )}
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</CardContent>
</Card>
{/* Mobile Card Layout */} {/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4"> <div className="md:hidden space-y-3">
{pastSlots.slice(0, 20).map((slot) => ( {pastSlots.slice(0, 20).map((slot) => (
<div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card"> <div key={slot.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div> <div>
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
@@ -573,9 +575,7 @@ export default function AdminConsulting() {
Belum ada riwayat konsultasi Belum ada riwayat konsultasi
</div> </div>
)} )}
</div> </div>
</CardContent>
</Card>
</TabsContent> </TabsContent>
</Tabs> </Tabs>

4
src/pages/admin/AdminEvents.tsx
View File

@@ -280,7 +280,7 @@ export default function AdminEvents() {
</div> </div>
{/* Mobile Card Layout */} {/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4"> <div className="md:hidden space-y-3">
{events.map((event) => ( {events.map((event) => (
<div key={event.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card"> <div key={event.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div> <div>
@@ -377,7 +377,7 @@ export default function AdminEvents() {
</div> </div>
{/* Mobile Card Layout */} {/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4"> <div className="md:hidden space-y-3">
{blocks.map((block) => ( {blocks.map((block) => (
<div key={block.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card"> <div key={block.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div> <div>

12
src/pages/admin/AdminMembers.tsx
View File

@@ -102,10 +102,10 @@ export default function AdminMembers() {
<h1 className="text-4xl font-bold mb-2">Manajemen Member</h1> <h1 className="text-4xl font-bold mb-2">Manajemen Member</h1>
<p className="text-muted-foreground mb-8">Kelola semua pengguna</p> <p className="text-muted-foreground mb-8">Kelola semua pengguna</p>
<Card className="border-2 border-border"> <Card className="border-2 border-border hidden md:block">
<CardContent className="p-0"> <CardContent className="p-0">
{/* Desktop Table */} {/* Desktop Table */}
<div className="hidden md:block overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -154,9 +154,11 @@ export default function AdminMembers() {
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</CardContent>
</Card>
{/* Mobile Card Layout */} {/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4"> <div className="md:hidden space-y-3">
{members.map((member) => ( {members.map((member) => (
<div key={member.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card"> <div key={member.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div> <div>
@@ -202,8 +204,6 @@ export default function AdminMembers() {
</div> </div>
)} )}
</div> </div>
</CardContent>
</Card>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}> <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-lg border-2 border-border"> <DialogContent className="max-w-lg border-2 border-border">

30
src/pages/admin/AdminOrders.tsx
View File

@@ -176,10 +176,10 @@ export default function AdminOrders() {
<h1 className="text-4xl font-bold mb-2">Manajemen Order</h1> <h1 className="text-4xl font-bold mb-2">Manajemen Order</h1>
<p className="text-muted-foreground mb-8">Kelola semua pesanan</p> <p className="text-muted-foreground mb-8">Kelola semua pesanan</p>
<Card className="border-2 border-border"> <Card className="border-2 border-border hidden md:block">
<CardContent className="p-0"> <CardContent className="p-0">
{/* Desktop Table */} {/* Desktop Table */}
<div className="hidden md:block overflow-x-auto"> <div className="overflow-x-auto">
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
@@ -218,10 +218,12 @@ export default function AdminOrders() {
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</CardContent>
</Card>
{/* Mobile Card Layout */} {/* Mobile Card Layout */}
<div className="md:hidden space-y-3 p-4"> <div className="md:hidden space-y-3">
{orders.map((order) => ( {orders.map((order) => (
<div key={order.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card"> <div key={order.id} className="border-2 border-border rounded-lg p-4 space-y-3 bg-card">
<div> <div>
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
@@ -252,17 +254,15 @@ export default function AdminOrders() {
</div> </div>
</div> </div>
</div> </div>
))} ))}
{orders.length === 0 && ( {orders.length === 0 && (
<div className="text-center py-8 text-muted-foreground"> <div className="text-center py-8 text-muted-foreground">
Belum ada order Belum ada order
</div> </div>
)} )}
</div> </div>
</CardContent>
</Card>
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}> <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-lg border-2 border-border"> <DialogContent className="max-w-lg border-2 border-border">
<DialogHeader> <DialogHeader>
<DialogTitle>Detail Order</DialogTitle> <DialogTitle>Detail Order</DialogTitle>