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 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,
body {
@apply bg-white dark:bg-[#0D0D0D];
overflow-x: hidden;
width: 100%;
position: relative;
@media (prefers-color-scheme: dark) {
color-scheme: dark;

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

@@ -6,14 +6,14 @@ export default function Layout() {
return (
<div
className={cn(
"relative min-h-dvh w-full",
"[background-size:40px_40px]",
"relative min-h-dvh w-full overflow-x-hidden",
"[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)]",
"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>
<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 />
<Outlet />
</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">
<head>
<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 />
<Links />
</head>

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>
</>
);
}