Improved dashboard user navigation on mobile devices

FlorianLeChat · Feb 23, 2024 · 45813b1 · 45813b1
1 parent 7e2b1cf
commit 45813b1
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 13 deletions.
diff --git a/app/[locale]/dashboard/components/column-toggle.tsx b/app/[locale]/dashboard/components/column-toggle.tsx
@@ -35,12 +35,12 @@ export default function ColumnToggle( {
 			<DropdownMenuTrigger
 				className={merge(
 					buttonVariants( { size: "sm", variant: "outline" } ),
-					"h-10 sm:mr-auto"
+					"h-10 md:mr-auto"
 				)}
 			>
-				<SlidersHorizontal className="inline h-4 w-4 sm:mr-2" />
+				<SlidersHorizontal className="inline h-4 w-4 md:mr-2" />
 
-				<p className="max-sm:hidden">Colonnes</p>
+				<p className="max-md:hidden">Colonnes</p>
 			</DropdownMenuTrigger>
 
 			{/* Menu de sélection des colonnes */}

diff --git a/app/[locale]/dashboard/components/data-table.tsx b/app/[locale]/dashboard/components/data-table.tsx
@@ -115,7 +115,7 @@ export default function DataTable( { data }: { data: FileAttributes[] } )
 			basePath={`${ process.env.__NEXT_ROUTER_BASEPATH }/api/user/auth`}
 		>
 			{/* Filtrage et tri des données */}
-			<div className="flex items-center gap-2 py-4">
+			<div className="mb-4 flex items-center gap-2">
 				{/* Filtrage par nom */}
 				<Input
 					value={

diff --git a/app/[locale]/dashboard/components/file-upload.tsx b/app/[locale]/dashboard/components/file-upload.tsx
@@ -277,12 +277,12 @@ export default function FileUpload( {
 			}}
 		>
 			<DialogTrigger
-				className={buttonVariants( { variant: "default" } )}
+				className={buttonVariants()}
 				aria-controls="file-upload"
 			>
-				<PlusCircleIcon className="inline h-4 w-4 sm:mr-2" />
+				<PlusCircleIcon className="inline h-4 w-4 md:mr-2" />
 
-				<p id="file-upload" className="max-sm:hidden">
+				<p id="file-upload" className="max-md:hidden">
 					Ajouter un fichier
 				</p>
 			</DialogTrigger>

diff --git a/app/[locale]/dashboard/components/pagination.tsx b/app/[locale]/dashboard/components/pagination.tsx
@@ -30,7 +30,7 @@ export default function Pagination<TData>( { table }: PaginationProps<TData> )
 
 	// Affichage du rendu HTML du composant.
 	return (
-		<div className="flex items-center justify-end gap-2 py-4 max-sm:flex-col sm:gap-4 lg:gap-8">
+		<div className="mt-4 flex items-center justify-end gap-2 max-md:flex-col md:gap-4 lg:gap-8">
 			{/* Nombre de lignes sélectionnées */}
 			<p className="flex-1 text-sm text-muted-foreground">
 				{table.getFilteredSelectedRowModel().rows.length} sur{" "}

diff --git a/app/[locale]/dashboard/page.tsx b/app/[locale]/dashboard/page.tsx
@@ -136,9 +136,9 @@ export default async function Page( {
 	// Affichage du rendu HTML de la page.
 	return (
 		<>
-			<header className="flex min-h-[4rem] flex-wrap items-center justify-center gap-y-4 border-b px-4 py-8 sm:gap-x-4 sm:py-4">
+			<header className="flex min-h-[4rem] flex-wrap items-center justify-center gap-y-4 border-b px-4 py-8 md:gap-x-4 md:py-4">
 				{/* Titre du site */}
-				<h1 className="text-2xl font-semibold max-sm:w-full max-sm:max-w-fit max-sm:overflow-hidden max-sm:text-ellipsis max-sm:whitespace-nowrap sm:text-xl">
+				<h1 className="text-center text-2xl font-semibold max-md:w-full max-md:overflow-hidden max-md:text-ellipsis max-md:whitespace-nowrap md:max-w-fit md:text-xl">
 					<Link href="/">💾 {meta.title as string}</Link>
 				</h1>
 
@@ -149,7 +149,7 @@ export default async function Page( {
 				/>
 
 				{/* Éléments latéraux */}
-				<aside className="flex items-center justify-center space-x-4 sm:ml-auto">
+				<aside className="flex items-center justify-center space-x-4 md:ml-auto">
 					{/* Notifications */}
 					<Notification />
 
@@ -158,7 +158,7 @@ export default async function Page( {
 				</aside>
 			</header>
 
-			<main className="p-4 md:p-10">
+			<main className="p-4 md:p-8">
 				{/* Titre et description de la page */}
 				<h2 className="text-2xl font-bold tracking-tight">
 					Tableau de bord
@@ -170,7 +170,7 @@ export default async function Page( {
 				</p>
 
 				{/* Barre verticale de séparation */}
-				<Separator className="my-6" />
+				<Separator className="mb-6 mt-4 sm:mb-8" />
 
 				{/* Tableau des fichiers téléversés */}
 				<DataTable data={await getFiles()} />