From c63e48188dcf6091f27597385b34cbf242a1ba64 Mon Sep 17 00:00:00 2001
From: anulax1225 <anulax1225@icloud.com>
Date: Tue, 28 Jan 2025 19:30:38 +0100
Subject: [PATCH] Changed affichage btns designe

---
 resources/js/Pages/Album/Index.vue |  3 +--
 resources/js/Pages/Album/Show.vue  | 12 ++++--------
 resources/js/Pages/Photo/Index.vue |  9 +++------
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/resources/js/Pages/Album/Index.vue b/resources/js/Pages/Album/Index.vue
index f632523..7060c09 100644
--- a/resources/js/Pages/Album/Index.vue
+++ b/resources/js/Pages/Album/Index.vue
@@ -42,8 +42,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 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">
+                    <div class="flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
                         <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">
                             <img src="/icons/block-content.svg" class="h-7">
diff --git a/resources/js/Pages/Album/Show.vue b/resources/js/Pages/Album/Show.vue
index b75327b..bb5ec44 100644
--- a/resources/js/Pages/Album/Show.vue
+++ b/resources/js/Pages/Album/Show.vue
@@ -108,16 +108,12 @@ onMounted(() => {
         <template #header>
             <div class="w-full flex justify-between items-center py-1">
                 <div class="relative flex items-center">
-                    <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
+                    <div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
+                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r 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 laptop:border-r laptop:border-b-0  border-b border-gray-400 p-1
+                        <button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1
                         hover:bg-black/5">
                             <img src="/icons/list.svg" class="h-7">
                         </button>
@@ -128,7 +124,7 @@ onMounted(() => {
                     </div>
                 </div>
                 <div class="relative flex items-center">
-                    <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md laptop:px-2 py-1">
+                    <button @click="create.active = !create.active" class="flex items-center hover:bg-black/10 rounded-md px-2 py-1">
                         <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>
diff --git a/resources/js/Pages/Photo/Index.vue b/resources/js/Pages/Photo/Index.vue
index d5d936c..f47e69d 100644
--- a/resources/js/Pages/Photo/Index.vue
+++ b/resources/js/Pages/Photo/Index.vue
@@ -91,15 +91,12 @@ onMounted(() => {
         <template #header>
             <div class="w-full flex justify-between items-center py-1">
                 <div class="relative flex items-center">
-                    <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
+                    <div id="affichage" class="static flex items-center bg-white rounded-md shadow-sm shadow-gray-300 overflow-hidden mx-2">
+                        <button @click="squareView" :class="{'bg-black/5': photoState.square}" class="flex items-center h-full border-r 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 laptop:border-r laptop:border-b-0  border-b border-gray-400 p-1
+                        <button @click="listView" :class="{'bg-black/5': photoState.list}" class="flex items-center h-full border-r border-gray-400 p-1
                         hover:bg-black/5">
                             <img src="/icons/list.svg" class="h-7">
                         </button>