Mobile test

resources/js/Layouts/Layout.vue

@@ -8,16 +8,20 @@ const slots = useSlots();
 const pic = usePage().props.user ? usePage().props.user.pic : "";
 usePage().props.user, usePage().props;
 const user = usePage().props.auth.user;
+
+const toggleMenu = () => {
+    document.querySelector("#menu-content").classList.toggle("hidden");
+}
 </script>
 
 <template>
     <nav class="sticky w-full z-30 top-0 right-0 left-0">
-        <div class="w-full h-16 flex px-[17.5%] justify-between border-b border-gray-300 bg-gray-100 text-gray-900">
+        <div class="w-full h-16 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2  justify-between border-b border-gray-300 bg-gray-100 text-gray-900">
             <div :class="{ 'w-full': !user }" class="flex h-full justify-between">
                 <Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 w-fit'">
-                    <img src="/img/logo.png" class="h-full py-1.5">
+                    <img src="/img/logo.png" class="h-full laptop:py-1.5 py-3">
                 </Link>
-                <div class="flex text-black/80">
+                <div class="laptop:flex hidden text-black/80">
                     <NavLink v-if="!user" :href="route('home')" :active="route().current('home')">
                         Home
                     </NavLink>
@@ -44,7 +48,7 @@ const user = usePage().props.auth.user;
                     </NavLink>
                 </div>
             </div>
-            <div v-if="user" class="relative flex items-center z-40">
+            <div v-if="user" class="laptop:flex hidden relative items-center z-40">
                 <Dropdown align="right" width="48">
                     <template #trigger>
                         <span class="flex rounded-md hover:cursor-pointer focus:cursor-pointer">
@@ -65,28 +69,34 @@ const user = usePage().props.auth.user;
                     </template>
                 </Dropdown>
             </div>
+            <div class="h-full flex items-center">
+                <button @click="toggleMenu"><img src="/icons/menu.svg" class="h-10"></button>
+            </div>
         </div>
-        <div v-if="slots.header" class="w-full max-h-[3.5rem] px-[17.5%] py-auto bg-gray-50 border-b border-gray-300 text-gray-900">
+        <div v-if="slots.header" class="w-full max-h-[3.5rem] desktop:px-[17.5%] laptop:px-[12.5%] px-2  py-auto bg-gray-50 border-b border-gray-300 text-gray-900">
             <slot name="header"/>
         </div>
     </nav>
+    <div id="menu-content" class="laptop:hidden hidden fixed z-10 top-0 bottom-0 right-0 left-0 bg-gray-100">
+        
+    </div>
     <slot name="content"/>
-    <footer class="w-full px-[17.5%] bg-gray-50 text-gray-900 flex items-center justify-between">
-        <p class="italic text-gray-600">&copy; 2024 Propriété de l'association Scout Bas-Lac</p>
+    <footer class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2  bg-gray-50 text-gray-900 flex items-center justify-between">
+        <p class="italic text-gray-600 laptop:text-lg text-xs">&copy; 2024 Propriété de l'association Scout Bas-Lac</p>
         <div class="flex my-8">
-            <div class="group mx-2">
+            <div class="group laptop:mx-2 mx-1">
                 <div class="group-hover:social-icon-in social-icon-out p-2 border border-gray-600 rounded-lg">
                     <img src="/icons/facebook.svg" class="w-[2rem] group-hover:icon-in icon-out dark:invert">
                 </div>
             </div>
-            <div class="group mx-2">
+            <div class="group laptop:mx-2 mx-1">
                 <a target="_blank" href="https://www.instagram.com/scouts_baslac/">
                     <div class="group group-hover:social-icon-in social-icon-out p-2 border border-gray-600 rounded-lg">
                         <img src="/icons/instagram.svg" class="w-[2rem] group-hover:icon-in icon-out dark:invert">
                     </div> 
                 </a>
             </div>
-            <div class="group mx-2">
+            <div class="group laptop:mx-2 mx-1">
                 <a target="_blank" href="mailto:groupe-baslac@gmail.com">
                     <div class="group group-hover:social-icon-in social-icon-out p-2 border border-gray-600 rounded-lg">
                         <img src="/icons/mail.svg" class="w-[2rem] group-hover:icon-in icon-out dark:invert">

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

@@ -36,7 +36,7 @@ const submit = () => {
             </div>
         </template>
         <template #content>
-            <div class="w-full px-[17.5%] h-screen">
+            <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2  h-screen">
                 <div class="w-full bg-white shadow rounded-lg px-8 py-8 mt-10">
                     <form @submit.prevent="submit" class="max-w-2xl">
                         <div class="">

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

@@ -26,7 +26,7 @@ const props = defineProps({
             </div>
         </template>
         <template #content>
-            <div class="w-full px-[17.5%] h-screen">
+            <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2  h-screen">
                 <div class="w-full flex flex-col mt-10">
                     <div class="w-full grid grid-cols-6 p-4 border-b boder text-center text-lg font-medium">
                         <p>Nom</p>

resources/js/Pages/Album/Index.vue

@@ -59,7 +59,7 @@ const gridState = reactive({ columns: 3 });
             </div>
         </template>
         <template #content>
-            <div class="w-full px-[17.5%] h-full min-h-screen">
+            <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] h-full min-h-screen">
                 <div class="w-full h-full pb-5 px-1 bg-black/5">
                     <div :class="{'grid-cols-3':  gridState.columns === 3}" 
                     class="w-full grid pt-10">

resources/js/Pages/Album/Show.vue

@@ -33,6 +33,7 @@ const fullScreen = (photo) => {
     fullScreenState.active = true;
     photoState.square = false; 
     photoState.list = false;
+    toggle();
 }
 
 const gridState = reactive({ columns: 3 });
@@ -42,6 +43,7 @@ const squareView = () => {
     fullScreenState.active = false;
     photoState.square = true; 
     photoState.list = false;
+    toggle();
 }
 
 const listView = () => {
@@ -49,6 +51,7 @@ const listView = () => {
     fullScreenState.active = false;
     photoState.square = false; 
     photoState.list = true;
+    toggle();
 }
 
 const addPhotos = (uuids) => {
@@ -84,6 +87,11 @@ const deletePhoto = (uuid) => {
         });
     }
 }
+
+const toggle = () => {
+    document.querySelector('#affichage').classList.toggle('hidden');
+    document.querySelector('#affichage').classList.toggle('flex');
+}
 </script>
 
 <template>
@@ -92,13 +100,15 @@ const deletePhoto = (uuid) => {
         <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>
-                    <div class="flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
-                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r border-gray-400 p-1
+                    <p class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm hidden laptop:block">Affichage</p>
+                    <p @click="toggle"
+                    class="font-semibold laptop:mr-4 mr-1 laptop:text-lg text-sm laptop:hidden">Affichage</p>
+                    <div id="affichage" class="absolute laptop:static hidden top-full mt-1 laptop:flex laptop:flex-row flex-col items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden">
+                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full laptop:border-r laptop:border-b-0 border-b border-gray-400 p-1
                         hover:bg-black/5">
                             <img src="/icons/block-content.svg" class="h-7">
                         </button>
-                        <button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1
+                        <button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full laptop:border-r laptop:border-b-0  border-b border-gray-400 p-1
                         hover:bg-black/5">
                             <img src="/icons/list.svg" class="h-7">
                         </button>
@@ -111,24 +121,24 @@ const deletePhoto = (uuid) => {
                 <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">
-                        <p class="font-medium mr-4">Ajouter une photo</p>
+                        <p class="font-medium laptop:mr-4 mr-1 laptop:text-lg text-sm">Ajouter une photo</p>
                         <img src="/icons/add.svg" class="h-8">
                     </button>
                     <Panel @data="(uuids) => addPhotos(uuids)" @close="create.active = !create.active" v-if="create.active" :album="props.album"
-                    class="absolute -right-0 top-[110%] z-10 mt-4" />
+                    class="absolute laptop:-right-0 top-[110%] z-10 mt-4" />
                 </div>
             </div>
         </template>
         <template #content>
-            <div class="w-full px-[17.5%] h-full">
-                <div v-if="!fullScreenState.active" class="w-full h-96 flex items-stretch justify-stretch overflow-hidden">
+            <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] h-full">
+                <div v-if="!fullScreenState.active" class="w-full laptop:h-96 flex laptop:flex-row flex-col items-stretch justify-stretch overflow-hidden">
                     <img :src="album.image">
-                    <div class="w-full h-full px-10 py-6">
+                    <div class="w-full h-full laptop:px-10 px-3 py-6">
                         <p class="text-7xl font-extrabold text-black/90">{{ album.name }}</p>
                         <p class="pt-1 pl-2 text-2xl font-extrabold text-black/90">publiée le {{ album.created_at }}</p>
                     </div>
                 </div>
-                <div class="w-full h-full pb-20 px-1 bg-black/5">
+                <div class="w-full h-full pb-20 bg-black/5">
                     <div v-if="!fullScreenState.active" :class="{'grid-cols-3':  gridState.columns === 3}" 
                     class="w-full grid pt-10">
                         <Show v-for="(photo, index) in photoState.photos" 

resources/js/Pages/Home.vue

@@ -12,7 +12,7 @@ import Layout from '@/Layouts/Layout.vue';
                 <img src="/img/sarasin.png" class="w-full pb-96">
                 <p class="text-center absolute text-white/65 text-[180px] leading-[180px] font-bold left-0 right-0">Scout Baslac</p>
             </div>
-            <div class="w-full px-[17.5%] flex flex-col">
+            <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-2  flex flex-col">
                 <div class="my-5">
                     <p class="w-full text-5xl border-b border-gray-300 pb-2 mb-2 font-semibold">Qui sommes-nous?</p>
                     <p class="mb-2">

resources/js/Pages/Photo/Index.vue

@@ -102,7 +102,7 @@ const deletePhoto = (uuid) => {
             </div>
         </template>
         <template #content>
-            <div class="w-full px-[17.5%] h-full">
+            <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] h-full">
                 <div class="w-full h-full pb-20 bg-black/5">
                     <div v-if="!fullScreenState.active" :class="{'grid-cols-3':  gridState.columns === 3}" 
                     class="w-full grid pt-10">

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

@@ -64,12 +64,12 @@ const closeOnEscape = (e) => {
             <img src="/icons/cancel.svg" class="h-8 invert pointer-events-none">
         </button>
     </div>
-    <div class="w-full h-[600px] flex items-center justify-between">
+    <div class="laptop:w-full h-[600px] flex items-center justify-between">
         <button @click="previousPhoto" class="pr-3 hover:scale-105">
             <img src="/icons/next.svg" class="h-16 rotate-180">
         </button>
-        <div class="relative h-full">
-            <img :src="photo.path" class="h-full">
+        <div class="relative h-full laptop:w-full w-[300px] flex items-center justify-center">
+            <img :src="photo.path" class="laptop:h-full">
         </div>
         <button @click="nextPhoto" class="pl-3 hover:scale-105">
             <img src="/icons/next.svg" class="h-16">

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

@@ -39,7 +39,7 @@ const emits = defineEmits(["full-screen", "delete-photo"]);
     <div :class="{ 
         'border-r': (props.index + 1) % props.columns  != 0, 
         'border-b': props.index < props.length - props.columns, 
-        'h-96': props.columns === 3,
+        'laptop:h-96 h-44': props.columns === 3,
         'h-[25rem]': props.columns !== 3, 
     }" 
     class="group relative w-full overflow-hidden border-white hover:scale-[1.003] flex items-center bg-black/90">

resources/views/app.blade.php

@@ -17,7 +17,7 @@
         @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
         @inertiaHead
     </head>
-    <body class="font-roboto antialiased w-screen h-screen">
+    <body class="relative font-roboto antialiased w-screen h-screen">
         @csrf
         @inertia
     </body>

tailwind.config.js

@@ -11,6 +11,17 @@ export default {
     ],
 
     theme: {
+        screens: {
+            'tablet': '740px',
+            // => @media (min-width: 640px) { ... }
+      
+            'laptop': '1150px',
+            // => @media (min-width: 1024px) { ... }
+      
+            'desktop': '1450px',
+            // => @media (min-width: 1280px) { ... }
+          },
+    
         extend: {
             fontFamily: {
                 sans: ['Figtree', ...defaultTheme.fontFamily.sans],