ondra/ironmount
1
1
Fork 0
mirror of https://github.com/nicotsx/ironmount.git synced 2025-12-10 12:10:51 +01:00
Code Issues Packages Projects Releases 1 Wiki Activity

fix: mobile viewport

Browse Source
This commit is contained in:
Nicolas Meienberger
2025-10-02 19:34:08 +02:00
parent c013351026
commit 86adda848e
4 changed files with 52 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
apps/client/app/routes/home.tsx
View File

@@ -60,20 +60,20 @@ export default function Home({ loaderData }: Route.ComponentProps) {
return (
<>
<h1 className="text-3xl font-bold mb-0 uppercase">Ironmount</h1>
<h2 className="text-sm font-semibold mb-2 text-muted-foreground">
<h1 className="text-2xl sm:text-3xl font-bold mb-0 uppercase">Ironmount</h1>
<h2 className="text-xs sm:text-sm font-semibold mb-2 text-muted-foreground">
Create, manage, monitor, and automate your volumes with ease.
</h2>
<div className="flex items-center gap-2 mt-4 justify-between">
<span className="flex items-center gap-2">
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-4 sm:justify-between">
<span className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<Input
className="w-[180px]"
className="w-full sm:w-[180px]"
placeholder="Search volumes…"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full sm:w-[180px]">
<SelectValue placeholder="All status" />
</SelectTrigger>
<SelectContent>
@@ -83,7 +83,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
</SelectContent>
</Select>
<Select value={backendFilter} onValueChange={setBackendFilter}>
<SelectTrigger className="w-[180px]">
<SelectTrigger className="w-full sm:w-[180px]">
<SelectValue placeholder="All backends" />
</SelectTrigger>
<SelectContent>
@@ -93,7 +93,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
</SelectContent>
</Select>
{(searchQuery || statusFilter || backendFilter) && (
<Button variant="outline" size="sm" onClick={clearFilters}>
<Button variant="outline" size="sm" onClick={clearFilters} className="w-full sm:w-auto">
<RotateCcw className="h-4 w-4 mr-2" />
Clear filters
</Button>
@@ -101,42 +101,44 @@ export default function Home({ loaderData }: Route.ComponentProps) {
</span>
<CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} />
</div>
<Table className="mt-4 border bg-white dark:bg-secondary">
<TableCaption>A list of your managed volumes.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] uppercase">Name</TableHead>
<TableHead className="uppercase text-left">Backend</TableHead>
<TableHead className="uppercase">Mountpoint</TableHead>
<TableHead className="uppercase text-center">Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{filteredVolumes.map((volume) => (
<TableRow
key={volume.name}
className="hover:bg-accent/50 hover:cursor-pointer"
onClick={() => navigate(`/volumes/${volume.name}`)}
>
<TableCell className="font-medium">{volume.name}</TableCell>
<TableCell>
<VolumeIcon backend={volume.type} />
</TableCell>
<TableCell>
<span className="flex items-center gap-2">
<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1">
{volume.path}
</span>
<Copy size={10} />
</span>
</TableCell>
<TableCell className="text-center">
<StatusDot status={volume.status} />
</TableCell>
<div className="mt-4 overflow-x-auto">
<Table className="border bg-white dark:bg-secondary">
<TableCaption>A list of your managed volumes.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px] uppercase">Name</TableHead>
<TableHead className="uppercase text-left">Backend</TableHead>
<TableHead className="uppercase hidden sm:table-cell">Mountpoint</TableHead>
<TableHead className="uppercase text-center">Status</TableHead>
</TableRow>
))}
</TableBody>
</Table>
</TableHeader>
<TableBody>
{filteredVolumes.map((volume) => (
<TableRow
key={volume.name}
className="hover:bg-accent/50 hover:cursor-pointer"
onClick={() => navigate(`/volumes/${volume.name}`)}
>
<TableCell className="font-medium">{volume.name}</TableCell>
<TableCell>
<VolumeIcon backend={volume.type} />
</TableCell>
<TableCell className="hidden sm:table-cell">
<span className="flex items-center gap-2">
<span className="text-muted-foreground text-xs truncate bg-primary/10 rounded-md px-2 py-1 max-w-[200px]">
{volume.path}
</span>
<Copy size={10} />
</span>
</TableCell>
<TableCell className="text-center">
<StatusDot status={volume.status} />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</>
);
}