Adeguamento ui per ios

Template.Shared/wwwroot/css/app.css

@@ -1,4 +1,10 @@
-html, body {
+html { overflow: hidden; }
+
+.page, article, main { height: 100% !important; }
+
+#app { height: 100vh; }
+
+html, body {
     font-family: "Nunito", sans-serif;
     font-size: 14px;
     font-weight: 400;
@@ -111,26 +117,6 @@ h1:focus { outline: none; }
     margin: 1rem 0;
 }
 
-@supports (-webkit-touch-callout: none) {
-    .status-bar-safe-area {
-        display: flex;
-        position: fixed;
-        top: 0;
-        height: env(safe-area-inset-top);
-        background-color: #f7f7f7;
-        width: 100%;
-        z-index: 1;
-    }
-
-
-    #app {
-        padding-top: env(safe-area-inset-top);
-        height: 100vh;
-    }
-
-    .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
-}
-
 /*Spinner*/
 
 .spinner-container {
@@ -167,14 +153,10 @@ h1:focus { outline: none; }
     animation-duration: 2s;
 }
 
-.loader:after {
-    animation-duration: 4s;
-}
+.loader:after { animation-duration: 4s; }
 
 @keyframes l24 {
-    100% {
-        transform: rotate(1turn)
-    }
+    100% { transform: rotate(1turn) }
 }
 
 /*MudBlazor Personalization*/
@@ -194,9 +176,7 @@ h1:focus { outline: none; }
     margin: 0;
 }
 
-.custom-item-select {
-    padding: 6px 16px;
-}
+.custom-item-select { padding: 6px 16px; }
 
 .custom-item-select .mud-typography-body1 {
     font-weight: 600;
@@ -209,27 +189,24 @@ h1:focus { outline: none; }
         position: fixed;
         top: 0;
         height: env(safe-area-inset-top);
-        background-color: #f7f7f7;
         width: 100%;
         z-index: 1;
-        background-color: var(--primary-color);
+        background-color: var(--mud-palette-surface);
     }
 
-    .modal {
-        padding-top: env(safe-area-inset-top);
-    }
+    .modal { padding-top: env(safe-area-inset-top); }
 
-    article {
-        padding-top: 3rem !important;
-        padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important;
-    }
+    .safe-area-bottom { margin-bottom: env(safe-area-inset-bottom) !important; }
+
+    .pb-safe-area { padding-bottom: env(safe-area-inset-bottom) !important; }
 
     #app {
-        padding-top: env(safe-area-inset-top);
-        height: 100vh;
+        margin-top: env(safe-area-inset-top);
+        margin-bottom: env(safe-area-inset-bottom);
+        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     }
 
-    .flex-column, .navbar-brand {
-        padding-left: env(safe-area-inset-left);
-    }
+    .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
+
+    .customDialog-form .mud-dialog-content { margin-top: env(safe-area-inset-top); }
 }

Template.Shared/wwwroot/js/main.js

@@ -1,3 +1,58 @@
-window.goBack = function () {
+// Funzione goBack
+window.goBack = function () {
     history.back();
 };
+
+// Funzione per aggiungere tabindex ai bottoni
+function addTabindexToButtons() {
+    document.querySelectorAll('button.custom-plus-button').forEach(btn => {
+        if (!btn.hasAttribute('tabindex')) {
+            btn.setAttribute('tabindex', '0');
+        }
+    });
+}
+
+// Funzione per monitorare la classe expanded e aggiungere ah-calendar-m
+function monitorExpandedClass(mutations) {
+    mutations.forEach(function (mutation) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            const target = mutation.target;
+
+            if (target.classList.contains('week-slider') && target.classList.contains('expanded')) {
+                const appointments = document.querySelector('.appointments');
+                if (appointments) {
+                    appointments.classList.add('ah-calendar-m');
+                    console.log('Classe "ah-calendar-m" aggiunta a .appointments');
+                }
+            }
+            // Rimuovi la classe quando expanded viene rimossa
+            else if (target.classList.contains('week-slider') && !target.classList.contains('expanded')) {
+                const appointments = document.querySelector('.appointments');
+                if (appointments) {
+                    appointments.classList.remove('ah-calendar-m');
+                    console.log('Classe "ah-calendar-m" rimossa da .appointments');
+                }
+            }
+        }
+    });
+}
+
+// Esegui la funzione tabindex inizialmente
+addTabindexToButtons();
+
+// Observer combinato per entrambe le funzionalità
+const observer = new MutationObserver((mutations) => {
+    // Aggiungi tabindex ai nuovi bottoni
+    addTabindexToButtons();
+
+    // Monitora le classi expanded
+    monitorExpandedClass(mutations);
+});
+
+// Osserva sia i cambiamenti nel DOM che gli attributi
+observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class']
+});