Mobile adjustements

resources/js/Pages/Album/Index.vue

@@ -3,7 +3,8 @@ import { Head } from '@inertiajs/vue3';
 import Layout from '@/Layouts/Layout.vue';
 import Create from './Partials/Create.vue';
 import Show from'./Partials/Show.vue';
-import { reactive } from 'vue';
+import { onMounted, reactive } from 'vue';
+import Platform from '@/platform';
 
 const props = defineProps({
     albums: {
@@ -27,6 +28,11 @@ const listView = () => {
     viewState.list = true;
 }
 
+onMounted(() => {
+    if(Platform.detect() == "mobile") {
+        listView(); 
+    }
+});
 const gridState = reactive({ columns: 3 });
 </script>
 

resources/js/Pages/Album/Show.vue

@@ -4,8 +4,9 @@ import Layout from '@/Layouts/Layout.vue';
 import Create from '@/Pages/Photo/Partials/Create.vue';
 import Show from'@/Pages/Photo/Partials/Show.vue';
 import Modal from '@/Pages/Photo/Partials/Modal.vue';
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import Panel from '../Photo/Partials/Panel.vue';
+import Platform from '@/platform';
 
 const props = defineProps({
     album: {
@@ -92,6 +93,13 @@ const toggle = () => {
     document.querySelector('#affichage').classList.toggle('hidden');
     document.querySelector('#affichage').classList.toggle('flex');
 }
+
+onMounted(() => {
+    if(Platform.detect() == "mobile") {
+        listView(); 
+        toggle();
+    }
+});
 </script>
 
 <template>

resources/js/Pages/Photo/Index.vue

@@ -5,7 +5,8 @@ import Dropzone from '@/Components/Dropzone.vue';
 import Create from './Partials/Create.vue';
 import Show from'./Partials/Show.vue';
 import Modal from './Partials/Modal.vue';
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
+import Platform from '@/platform';
 
 const props = defineProps({
     photos: {
@@ -30,6 +31,7 @@ const fullScreen = (photo) => {
     fullScreenState.active = true;
     photoState.square = false; 
     photoState.list = false;
+    toggle();
 }
 
 const gridState = reactive({ columns: 3 });
@@ -39,6 +41,7 @@ const squareView = () => {
     fullScreenState.active = false;
     photoState.square = true; 
     photoState.list = false;
+    toggle();
 }
 
 const listView = () => {
@@ -46,6 +49,7 @@ const listView = () => {
     fullScreenState.active = false;
     photoState.square = false; 
     photoState.list = true;
+    toggle();
 }
 
 const loadPhotos = async () => {
@@ -72,6 +76,13 @@ const toggle = () => {
     document.querySelector('#affichage').classList.toggle('hidden');
     document.querySelector('#affichage').classList.toggle('flex');
 }
+
+onMounted(() => {
+    if(Platform.detect() == "mobile") {
+        listView(); 
+        toggle();
+    }
+});
 </script>
 
 <template>

resources/js/platform.js

@@ -0,0 +1,38 @@
+export default class Platform {
+    static currentPlatform = "";
+
+    static asChanged() {
+        let result = Platform.currentPlatform != Platform.detect();
+        Platform.currentPlatform = Platform.detect();
+        return result;
+    }
+
+    static detect() {
+        if(window.innerWidth < 640) return "mobile";
+        else if (window.innerWidth < 1150) return "tablet";
+        else if(window.innerWidth < 1450) return "laptop";
+        else return "desktop";
+    }
+
+    static getLower(platform) {
+        switch(platform) {
+            case "mobile": return "mobile";
+            case "tablet": return "mobile";
+            case "laptop": return "tablet";
+            case "desktop": return "laptop"; 
+        }
+    }
+
+    static superiorTo(platform) {
+        let pf = Platform.detect();
+        while(Platform.asLower(pf)) {
+            pf = Platform.getLower(pf);
+            if(platform == pf) return true;
+        }
+        return false;
+    }
+
+    static asLower(platform) {
+        return platform != "mobile";
+    }
+}