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

3
apps/client/app/app.css
View File

@@ -12,6 +12,9 @@
html, html,
body { body {
@apply bg-white dark:bg-[#0D0D0D]; @apply bg-white dark:bg-[#0D0D0D];
overflow-x: hidden;
width: 100%;
position: relative;
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
color-scheme: dark; color-scheme: dark;

6
apps/client/app/components/layout.tsx
View File

@@ -6,14 +6,14 @@ export default function Layout() {
return ( return (
<div <div
className={cn( className={cn(
"relative min-h-dvh w-full", "relative min-h-dvh w-full overflow-x-hidden",
"[background-size:40px_40px]", "[background-size:20px_20px] sm:[background-size:40px_40px]",
"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]", "[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]", "dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
)} )}
> >
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div> <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
<main className="relative flex flex-col pt-8 p-4 container mx-auto"> <main className="relative flex flex-col pt-4 sm:pt-8 px-2 sm:px-4 pb-4 container mx-auto max-w-full">
<AppBreadcrumb /> <AppBreadcrumb />
<Outlet /> <Outlet />
</main> </main>

2
apps/client/app/root.tsx
View File

@@ -40,7 +40,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
<html lang="en" style={{ colorScheme: "dark" }} className="dark"> <html lang="en" style={{ colorScheme: "dark" }} className="dark">
<head> <head>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<Meta /> <Meta />
<Links /> <Links />
</head> </head>

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

@@ -60,20 +60,20 @@ export default function Home({ loaderData }: Route.ComponentProps) {
return ( return (
<> <>
<h1 className="text-3xl font-bold mb-0 uppercase">Ironmount</h1> <h1 className="text-2xl sm:text-3xl font-bold mb-0 uppercase">Ironmount</h1>
<h2 className="text-sm font-semibold mb-2 text-muted-foreground"> <h2 className="text-xs sm:text-sm font-semibold mb-2 text-muted-foreground">
Create, manage, monitor, and automate your volumes with ease. Create, manage, monitor, and automate your volumes with ease.
</h2> </h2>
<div className="flex items-center gap-2 mt-4 justify-between"> <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-4 sm:justify-between">
<span className="flex items-center gap-2"> <span className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<Input <Input
className="w-[180px]" className="w-full sm:w-[180px]"
placeholder="Search volumes…" placeholder="Search volumes…"
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
/> />
<Select value={statusFilter} onValueChange={setStatusFilter}> <Select value={statusFilter} onValueChange={setStatusFilter}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full sm:w-[180px]">
<SelectValue placeholder="All status" /> <SelectValue placeholder="All status" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -83,7 +83,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
</SelectContent> </SelectContent>
</Select> </Select>
<Select value={backendFilter} onValueChange={setBackendFilter}> <Select value={backendFilter} onValueChange={setBackendFilter}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-full sm:w-[180px]">
<SelectValue placeholder="All backends" /> <SelectValue placeholder="All backends" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -93,7 +93,7 @@ export default function Home({ loaderData }: Route.ComponentProps) {
</SelectContent> </SelectContent>
</Select> </Select>
{(searchQuery || statusFilter || backendFilter) && ( {(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" /> <RotateCcw className="h-4 w-4 mr-2" />
Clear filters Clear filters
</Button> </Button>
@@ -101,42 +101,44 @@ export default function Home({ loaderData }: Route.ComponentProps) {
</span> </span>
<CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} /> <CreateVolumeDialog open={createVolumeOpen} setOpen={setCreateVolumeOpen} />
</div> </div>
<Table className="mt-4 border bg-white dark:bg-secondary"> <div className="mt-4 overflow-x-auto">
<TableCaption>A list of your managed volumes.</TableCaption> <Table className="border bg-white dark:bg-secondary">
<TableHeader> <TableCaption>A list of your managed volumes.</TableCaption>
<TableRow> <TableHeader>
<TableHead className="w-[100px] uppercase">Name</TableHead> <TableRow>
<TableHead className="uppercase text-left">Backend</TableHead> <TableHead className="w-[100px] uppercase">Name</TableHead>
<TableHead className="uppercase">Mountpoint</TableHead> <TableHead className="uppercase text-left">Backend</TableHead>
<TableHead className="uppercase text-center">Status</TableHead> <TableHead className="uppercase hidden sm:table-cell">Mountpoint</TableHead>
</TableRow> <TableHead className="uppercase text-center">Status</TableHead>
</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>
</TableRow> </TableRow>
))} </TableHeader>
</TableBody> <TableBody>
</Table> {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>
</> </>
); );
} }