Adaptation mobile

resources/js/Pages/Admin/User/Index.vue

@@ -18,17 +18,17 @@ const props = defineProps({
     <Layout>
         <template #header>
             <div class="w-full flex justify-between items-center py-1">
-                <button class="bg-gray-300 p-2 py-1 rounded shadow text-gray-800">Utilisateurs</button>
+                <button class="bg-gray-300 p-2 py-1 rounded shadow text-gray-800 ml-1 laptop:text-lg text-sm">Utilisateurs</button>
-                <Link :href="route('admin.user.create')" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
+                <Link :href="route('admin.user.create')" class="flex items-center hover:bg-black/10 rounded-md px-1 py-1">
-                        <p class="font-medium mr-4">Ajouter un utilisateur</p>
+                        <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter un utilisateur</p>
                         <img src="/icons/add.svg" class="h-8">
                 </Link>
             </div>
         </template>
         <template #content>
-            <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2  h-screen">
+            <div class="laptop:w-full desktop:px-[17.5%] laptop:px-[12.5%]  overflow-x-auto px-2  h-screen">
-                <div class="w-full flex flex-col mt-10">
+                <div class="tablet:w-full flex flex-col mt-10 w-[800px]">
-                    <div class="w-full grid grid-cols-6 p-4 border-b boder text-center text-lg font-medium">
+                    <div class="w-full grid grid-cols-6 p-4 border-b boder text-center laptop:text-lg text-sm font-medium">
                         <p>Nom</p>
                         <p>Totem</p>
                         <p>Email</p>
@@ -36,7 +36,7 @@ const props = defineProps({
                         <p>Contactable</p>
                         <p>Créer le</p>
                     </div>
-                    <div v-for="(user, index) in users" class="w-full grid grid-cols-6 p-4 border-b boder text-center">
+                    <div v-for="(user, index) in users" class="w-full grid grid-cols-6 p-4 border-b laptop:text-md text-xs boder text-center">
                         <p>{{ user.name }}</p>
                         <p>{{ user.totem }}</p>
                         <p>{{ user.email }}</p>

resources/js/Pages/Album/Index.vue

@@ -36,7 +36,7 @@ const gridState = reactive({ columns: 3 });
         <template #header>
             <div class="w-full flex justify-between items-center py-1">
                 <div class="relative flex items-center">
-                    <p class="font-semibold mr-4">Affichage</p>
+                    <p class="font-semibold laptop:mr-4 ml-1 laptop:text-lg text-sm">Affichage</p>
                     <div class="flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
                         <button @click="squareView" :class="{'bg-black/5': viewState.square}" class="flex items-center h-full border-r border-gray-400 p-1
                         hover:bg-black/5">
@@ -50,8 +50,8 @@ const gridState = reactive({ columns: 3 });
                 </div>
                 <div class="relative flex items-center">
                     
-                    <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
+                    <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-1 py-1">
-                        <p class="font-medium mr-4">Ajouter un album</p>
+                        <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter un album</p>
                         <img src="/icons/add.svg" class="h-8">
                     </button>
                     <Create @close="create.active = !create.active" v-if="create.active" class="absolute -right-0 top-[110%] z-10 mt-4" />

resources/js/Pages/Album/Partials/Create.vue

@@ -47,12 +47,12 @@ const submit = () => {
 </script>
 
 <template>
-    <div class="text-left text-black w-[30rem] shadow-xl rounded-lg bg-gray-50 overflow-hidden
+    <div class="text-left text-black laptop:w-[30rem] w-screen shadow-xl rounded-lg bg-gray-50 overflow-hidden
     border border-gray-300">
         <div v-if="imageState.url" class="max-h-72 overflow-hidden flex items-center">
             <img  :src="imageState.url">
         </div>
-        <div class="px-10 pb-5 pt-5">
+        <div class="Laptop:px-10 px-2 pb-5 pt-5">
             <div @click="() => emits('close')" class="w-full flex justify-end ">
                 <img src="/icons/cancel.svg" class="h-7 hover:bg-black/10 rounded-md p-1"> 
             </div>

resources/js/Pages/Album/Partials/Show.vue

@@ -64,8 +64,8 @@ const deletePhoto = async () => {
             </div>
         </div>
         <div class="absolute left-0 right-0 bottom-0 p-2 flex justify-between flex-wrap items-end">
-            <p class="text-sm text-white bg-black/30 p-1 px-3 rounded">{{ props.album.name }}</p>
+            <p class="laptop:text-sm text-xs text-white bg-black/30 p-1 px-3 rounded">{{ props.album.name }}</p>
-            <p class="text-sm text-white bg-black/30 p-1 px-3 rounded">publier par {{ props.album.user.name }}</p>
+            <p class="laptop:text-sm text-xs text-white bg-black/30 p-1 px-3 rounded">publier par {{ props.album.user.name }}</p>
         </div>
         <img :src="props.album.image" class="w-full bg-white">
     </Link>

resources/js/Pages/Photo/Partials/Create.vue

@@ -19,12 +19,12 @@ const imageRemoved = (file) => {
 </script>
 
 <template>
-    <div class="text-left text-black w-[30rem] shadow-2xl rounded-lg bg-gray-50 overflow-hidden
+    <div class="text-left text-black laptop:w-[30rem] w-screen shadow-2xl rounded-lg bg-gray-50 overflow-hidden
     border border-gray-300">
         <div v-if="imageState.url" class="max-h-72 overflow-hidden flex items-center">
             <img  :src="imageState.url">
         </div>
-        <div class="px-10 pb-5 pt-5">
+        <div class="laptop:px-10 px-2 pb-5 pt-5">
             <div @click="() => emits('close')" class="w-full flex justify-end ">
                 <img src="/icons/cancel.svg" class="h-7 hover:bg-black/10 rounded-md p-1"> 
             </div>

resources/js/Pages/Photo/Partials/Show.vue

@@ -59,9 +59,9 @@ const emits = defineEmits(["full-screen", "delete-photo"]);
         </div>
         <div class="hidden absolute left-0 right-0 bottom-0 p-2 group-hover:flex justify-between flex-wrap items-end">
             <a :href="props.photo.path" target="_blank" class="bg-black/50 p-1 rounded-md mt-1 h-fit"><img src="/icons/download.png" class="h-6 invert"></a>
-            <div class="text-right bg-black/30 p-1 px-3 rounded-md mt-1">
+            <div class="text-right bg-black/30 p-1 laptop:px-3 px-1 rounded-md mt-1">
-                <p class="text-sm text-white">{{ props.photo.name }}</p>
+                <p class="laptop:text-sm text-xs text-white">{{ props.photo.name }}</p>
-                <p class="text-sm text-white">publier par {{ props.photo.user.name }}</p>
+                <p class="laptop:text-sm text-xs text-white">publier par {{ props.photo.user.name }}</p>
             </div>
         </div>
         <img :src="props.photo.path" class="w-full bg-white">