Adeguamento ui per ios

Template.Maui/wwwroot/index.html

@@ -51,7 +51,6 @@
 <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
 <script src="_content/Template.Shared/js/main.js"></script>
 <script src="_content/Template.Shared/js/calendar.js"></script>
-<script src="_content/Template.Shared/js/bottomSheet.js"></script>
 
 </body>
 

Template.Shared/Components/Layout/BottomSheet/FilterActivity.razor

@@ -7,7 +7,7 @@
 <div class="bottom-sheet-backdrop @(IsSheetVisible ? "show" : "")" @onclick="CloseBottomSheet"></div>
 
 <div class="bottom-sheet-container @(IsSheetVisible ? "show" : "")">
-    <div class="bottom-sheet">
+    <div class="bottom-sheet pb-safe-area">
         <div class="title">
             <MudText Typo="Typo.h6">
                 <b>Filtri</b>

Template.Shared/Components/Layout/NavMenu.razor

@@ -37,7 +37,7 @@
                 </li>
 
                 <li class="nav-item">
-                    <NavLink class="nav-link" href="Notification" Match="NavLinkMatch.All">
+                    <NavLink class="nav-link" href="Notifications" Match="NavLinkMatch.All">
                         <div class="d-flex flex-column">
                             <i class="ri-notification-4-line"></i>
                         </div>
@@ -66,7 +66,7 @@
         {
             var location = args.Location.Remove(0, NavigationManager.BaseUri.Length);
 
-            IsVisible = new List<string> { "Calendar", "Users", "PersonalInfo" }
+            IsVisible = new List<string> { "Calendar", "Users", "PersonalInfo", "Notifications" }
                 .Contains(location);
             StateHasChanged();
         };

Template.Shared/Components/Layout/NavMenu.razor.css

@@ -22,7 +22,7 @@
 }
 
 .nav-item ::deep .custom-plus-button .mud-icon-root {
-    transition: .513s;
+    transition: .5s;
     transform: rotate(0);
     font-size: 2rem;
 }
@@ -55,9 +55,7 @@
 
 .nav-item ::deep a.active > div > span { font-weight: 800; }
 
-    .nav-item ::deep a:not(.active) > div {
-        color: var(--mud-palette-text-primary);
-    }
+.nav-item ::deep a:not(.active) > div { color: var(--mud-palette-text-primary); }
 
 .nav-item ::deep a i { font-size: 1.65rem; }
 
@@ -66,8 +64,4 @@
     font-weight: 500;
 }
 
-@supports (-webkit-touch-callout: none) {
-    .nav-item { padding-bottom: env(safe-area-inset-bottom) !important; }
-
-    .nav-item ::deep > .nav-link { padding-bottom: 0 !important; }
-}
+@supports (-webkit-touch-callout: none) { .navbar { padding-bottom: env(safe-area-inset-bottom); } }

Template.Shared/Components/Pages/Calendar.razor

@@ -8,6 +8,7 @@
 @inject IManageDataService ManageData
 @inject IJSRuntime JS
 
+
 <HeaderLayout Title="@CurrentMonth.ToString("MMMM yyyy", new System.Globalization.CultureInfo("it-IT")).FirstCharToUpper()"
                   ShowFilter="true"
                   ShowCalendarToggle="true"

Template.Shared/Components/Pages/Calendar.razor.css

@@ -119,12 +119,14 @@
     gap: 1rem;
     overflow-y: auto;
     flex-direction: column;
-    height: 75vh;
     -ms-overflow-style: none;
     scrollbar-width: none;
-    padding-bottom: 45px;
+    padding-bottom: 60px;
+    height: calc(100% - 130px);
 }
 
+.appointments.ah-calendar-m { height: calc(100% - 315px) !important; }
+
 .appointments::-webkit-scrollbar { display: none; }
 
 .appointment {
@@ -160,3 +162,5 @@
 .event-dot.interna { background-color: var(--mud-palette-success-darken); }
 
 .event-dot.commessa { background-color: var(--mud-palette-warning); }
+
+@supports (-webkit-touch-callout: none) { .appointments { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; } }

Template.Shared/Components/Pages/Notifications.razor

@@ -0,0 +1,9 @@
+@page "/Notifications"
+@attribute [Authorize]
+@using Template.Shared.Components.Layout
+
+<HeaderLayout Title="Notifiche" />
+
+@code {
+
+}

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']
+});