Photo and album

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

@@ -27,9 +27,7 @@ const props = defineProps({
 
 const form = useForm();
 
-const photoState = reactive({ edit: false });
-
-const emits = defineEmits(["full-screen"]);
+const albumState = reactive({ edit: false });
 
 const deleteAlbum = async (e) => {
     Utils.Prevent(e);
@@ -54,10 +52,10 @@ const deleteAlbum = async (e) => {
         <div class="hidden absolute left-0 right-0 top-0 p-2 group-hover:flex justify-between">
             <div class="flex items-center">
                 <div class="relative">
-                    <button @click="(e) => { Utils.Prevent(e); photoState.edit = !photoState.edit; }" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/modify.svg" class="h-6 invert"></button>
-                    <!-- <Edit v-if="photoState.edit"
-                    @close="() => photoState.edit = false"
-                    :photo="props.album"
+                    <button @click="(e) => { Utils.Prevent(e); albumState.edit = !albumState.edit; }" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/modify.svg" class="h-6 invert"></button>
+                    <!-- <Edit v-if="albumState.edit"
+                    @close="() => albumState.edit = false"
+                    :album="props.album"
                     :class="'absolute left-0 top-full mt-2'"
                     /> -->
                 </div>

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

@@ -29,7 +29,7 @@ const submit = () => {
 
 <template>
     <div class="text-left text-black shadow-md shadow-gray-500 rounded-lg 
-    bg-gray-50 overflow-hidden border border-gray-300 p-2 w-72" >
+    bg-gray-50 overflow-hidden border border-gray-300 p-2 laptop:w-72 w-full" >
     <form @submit.prevent="submit">
         <TextInput :placeholder="'Changer le nom de la photo'" :class="'w-full'" v-model="form.name"/>
         <div class="w-full flex mt-3">

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

@@ -46,12 +46,12 @@ const emits = defineEmits(["full-screen", "delete-photo"]);
         <div class="hidden absolute left-0 right-0 top-0 p-2 group-hover:flex justify-between">
             <div class="flex items-center">
                 <button @click="() => emits('full-screen', props.photo.uuid)" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/full-screen.svg" class="h-6 invert"></button>
-                <div class="relative">
+                <div class="laptop:relative">
                     <button v-if="!props.noEdit"@click="photoState.edit = !photoState.edit" class="bg-black/50 p-1 rounded-md mr-2"><img src="/icons/modify.svg" class="h-6 invert"></button>
                     <Edit v-if="photoState.edit && !props.noEdit"
                     @close="() => photoState.edit = false"
                     :photo="props.photo"
-                    :class="'absolute left-0 top-full mt-2'"
+                    :class="'absolute left-0 right-0 top-full mt-2'"
                     />
                 </div>
                 <button @click="emits('delete-photo', props.photo.uuid)" class="bg-red-600 p-1 rounded-md"><img src="/icons/delete.png" class="h-6 invert"></button>
@@ -59,7 +59,7 @@ 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 laptop:px-3 px-1 rounded-md mt-1">
+            <div class="laptop:block hidden text-right bg-black/30 p-1 laptop:px-3 px-1 rounded-md mt-1">
                 <p class="laptop:text-sm text-xs text-white">{{ props.photo.name }}</p>
                 <p class="laptop:text-sm text-xs text-white">publier par {{ props.photo.user.name }}</p>
             </div>