diff --git a/resources/js/Pages/Album/Show.vue b/resources/js/Pages/Album/Show.vue index bb5ec44..44343f4 100644 --- a/resources/js/Pages/Album/Show.vue +++ b/resources/js/Pages/Album/Show.vue @@ -26,15 +26,16 @@ const props = defineProps({ const form = useForm({ uuids: [] }); const create = reactive({ active: false }); -const fullScreenState = reactive({ photo: {}, active: false }); +const fullScreenState = reactive({ photo: {}, active: false , prev: { square: true, list: false, } }); const photoState = reactive({ square: true, list: false, pageCount: 1, photos: props.photos }); const fullScreen = (photo) => { fullScreenState.photo = photo; fullScreenState.active = true; + fullScreenState.prev.square = photoState.square; + fullScreenState.prev.list = photoState.list; photoState.square = false; photoState.list = false; - toggle(); } const gridState = reactive({ columns: 3 }); @@ -44,7 +45,6 @@ const squareView = () => { fullScreenState.active = false; photoState.square = true; photoState.list = false; - toggle(); } const listView = () => { @@ -52,7 +52,13 @@ const listView = () => { fullScreenState.active = false; photoState.square = false; photoState.list = true; - toggle(); +} + +const backView = () => { + fullScreenState.photo = {}; + fullScreenState.active = false; + photoState.square = fullScreenState.prev.square; + photoState.list = fullScreenState.prev.list; } const addPhotos = (uuids) => { @@ -89,15 +95,9 @@ const deletePhoto = (uuid) => { } } -const toggle = () => { - document.querySelector('#affichage').classList.toggle('hidden'); - document.querySelector('#affichage').classList.toggle('flex'); -} - onMounted(() => { if(Platform.detect() == "mobile") { listView(); - toggle(); } }); @@ -156,7 +156,7 @@ onMounted(() => { class="bg-gray-100 p-2 font-medium text-gray-700 rounded shadow hover:scale-[1.01]">Afficher plus de photos diff --git a/resources/js/Pages/Photo/Index.vue b/resources/js/Pages/Photo/Index.vue index f47e69d..8e8b320 100644 --- a/resources/js/Pages/Photo/Index.vue +++ b/resources/js/Pages/Photo/Index.vue @@ -22,16 +22,17 @@ const create = reactive({ active: false }); const form = useForm(); -const fullScreenState = reactive({ photo: {}, active: false }); +const fullScreenState = reactive({ photo: {}, active: false, prev: { square: true, list: false, } }); const photoState = reactive({ square: true, list: false, pageCount: 1, photos: props.photos }); const fullScreen = (photo) => { fullScreenState.photo = photo; fullScreenState.active = true; + fullScreenState.prev.square = photoState.square; + fullScreenState.prev.list = photoState.list; photoState.square = false; photoState.list = false; - toggle(); } const gridState = reactive({ columns: 3 }); @@ -41,7 +42,6 @@ const squareView = () => { fullScreenState.active = false; photoState.square = true; photoState.list = false; - toggle(); } const listView = () => { @@ -49,7 +49,13 @@ const listView = () => { fullScreenState.active = false; photoState.square = false; photoState.list = true; - toggle(); +} + +const backView = () => { + fullScreenState.photo = {}; + fullScreenState.active = false; + photoState.square = fullScreenState.prev.square; + photoState.list = fullScreenState.prev.list; } const loadPhotos = async () => { @@ -72,15 +78,9 @@ const deletePhoto = (uuid) => { } } -const toggle = () => { - document.querySelector('#affichage').classList.toggle('hidden'); - document.querySelector('#affichage').classList.toggle('flex'); -} - onMounted(() => { if(Platform.detect() == "mobile") { listView(); - toggle(); } }); @@ -132,7 +132,7 @@ onMounted(() => { class="bg-gray-100 p-2 font-medium text-gray-700 rounded shadow hover:scale-[1.01]">Afficher plus de photos