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,14 +22,14 @@
 }
 
 .nav-item ::deep .custom-plus-button .mud-icon-root {
-    transition: .513s;
+    transition: .5s;
     transform: rotate(0);
     font-size: 2rem;
 }
 
     .nav-item ::deep .custom-plus-button:focus .mud-icon-root {
-        transform: rotate(225deg);
-    }
+    transform: rotate(225deg);
+}
 
 .nav-item ::deep a {
     display: flex;
@@ -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,97 +8,98 @@
 @inject IManageDataService ManageData
 @inject IJSRuntime JS
 
+
 <HeaderLayout Title="@CurrentMonth.ToString("MMMM yyyy", new System.Globalization.CultureInfo("it-IT")).FirstCharToUpper()"
-              ShowFilter="true"
-              ShowCalendarToggle="true"
-              OnFilterToggle="ToggleFilter"
-              OnCalendarToggle="ToggleExpanded"/>
+                  ShowFilter="true"
+                  ShowCalendarToggle="true"
+                  OnFilterToggle="ToggleFilter"
+                  OnCalendarToggle="ToggleExpanded" />
 
-<div @ref="weekSliderRef" class="container week-slider @(Expanded ? "expanded" : "") @(SliderAnimation)">
-    @if (Expanded)
-    {
-        <!-- Vista mensile -->
-        @foreach (var nomeGiorno in GiorniSettimana)
+    <div @ref="weekSliderRef" class="container week-slider @(Expanded ? "expanded" : "") @(SliderAnimation)">
+        @if (Expanded)
         {
-            <div class="week-day">
-                <div>@nomeGiorno</div>
-            </div>
-        }
+            <!-- Vista mensile -->
+            @foreach (var nomeGiorno in GiorniSettimana)
+            {
+                <div class="week-day">
+                    <div>@nomeGiorno</div>
+                </div>
+            }
 
-        @foreach (var unused in Enumerable.Range(0, StartOffset))
-        {
-            <div class="day" style="visibility: hidden"></div>
-        }
+            @foreach (var unused in Enumerable.Range(0, StartOffset))
+            {
+                <div class="day" style="visibility: hidden"></div>
+            }
 
-        @for (var d = 1; d <= DaysInMonth; d++)
-        {
-            var day = new DateTime(CurrentMonth.Year, CurrentMonth.Month, d);
-            var isSelected = IsSameDay(day, SelectedDate);
-            var isToday = IsSameDay(day, DateTime.Today);
-            var events = ReturnFilteredActivity(day);
+            @for (var d = 1; d <= DaysInMonth; d++)
+            {
+                var day = new DateTime(CurrentMonth.Year, CurrentMonth.Month, d);
+                var isSelected = IsSameDay(day, SelectedDate);
+                var isToday = IsSameDay(day, DateTime.Today);
+                var events = ReturnFilteredActivity(day);
 
-            <div class="day @(isSelected ? "selected" : (isToday ? "today" : ""))"
-                 @onclick="() => SelezionaDataDalMese(day)">
-                <div>@d</div>
-                @if (events.Any())
-                {
-                    <div class="event-dot-container" style="margin-top: 2px;">
-                        @foreach (var cat in events.Select(x => x.Category).Distinct())
-                        {
-                            <div class="event-dot @cat.ConvertToHumanReadable()" title="@cat.ConvertToHumanReadable()"></div>
-                        }
-                    </div>
-                }
-            </div>
-        }
-
-        @foreach (var unused in Enumerable.Range(0, EndOffset))
-        {
-            <div class="day" style="visibility: hidden"></div>
-        }
-    }
-    else
-    {
-        <!-- Vista settimanale -->
-        @foreach (var day in DaysOfWeek)
-        {
-            var isSelected = IsSameDay(day, SelectedDate);
-            var isToday = IsSameDay(day, DateTime.Today);
-
-            <div class="week-day">
-                <div>@day.ToString("ddd", new System.Globalization.CultureInfo("it-IT"))</div>
                 <div class="day @(isSelected ? "selected" : (isToday ? "today" : ""))"
-                     @onclick="() => SelezionaData(day)">
-                    <div>@day.Day</div>
-                    @if (ReturnFilteredActivity(day).Any())
+                     @onclick="() => SelezionaDataDalMese(day)">
+                    <div>@d</div>
+                    @if (events.Any())
                     {
                         <div class="event-dot-container" style="margin-top: 2px;">
-                            @foreach (var cat in ReturnFilteredActivity(day).Select(x => x.Category).Distinct())
+                            @foreach (var cat in events.Select(x => x.Category).Distinct())
                             {
                                 <div class="event-dot @cat.ConvertToHumanReadable()" title="@cat.ConvertToHumanReadable()"></div>
                             }
                         </div>
                     }
                 </div>
-            </div>
+            }
+
+            @foreach (var unused in Enumerable.Range(0, EndOffset))
+            {
+                <div class="day" style="visibility: hidden"></div>
+            }
         }
-    }
-</div>
+        else
+        {
+            <!-- Vista settimanale -->
+            @foreach (var day in DaysOfWeek)
+            {
+                var isSelected = IsSameDay(day, SelectedDate);
+                var isToday = IsSameDay(day, DateTime.Today);
+
+                <div class="week-day">
+                    <div>@day.ToString("ddd", new System.Globalization.CultureInfo("it-IT"))</div>
+                    <div class="day @(isSelected ? "selected" : (isToday ? "today" : ""))"
+                         @onclick="() => SelezionaData(day)">
+                        <div>@day.Day</div>
+                        @if (ReturnFilteredActivity(day).Any())
+                        {
+                            <div class="event-dot-container" style="margin-top: 2px;">
+                                @foreach (var cat in ReturnFilteredActivity(day).Select(x => x.Category).Distinct())
+                                {
+                                    <div class="event-dot @cat.ConvertToHumanReadable()" title="@cat.ConvertToHumanReadable()"></div>
+                                }
+                            </div>
+                        }
+                    </div>
+                </div>
+            }
+        }
+    </div>
 
 <div class="container appointments">
     @if (IsLoading)
     {
-        <SpinnerLayout FullScreen="false"/>
+        <SpinnerLayout FullScreen="false" />
     }
     else if (FilteredActivities is { Count: > 0 })
     {
         <Virtualize Items="FilteredActivities" Context="activity">
-            <ActivityCard Activity="activity" ActivityChanged="OnActivityChanged"/>
+            <ActivityCard Activity="activity" ActivityChanged="OnActivityChanged" />
         </Virtualize>
     }
     else
     {
-        <NoDataAvailable Text="Nessuna attività trovata" ImageSource="_content/Template.Shared/images/undraw_file-search_cbur.svg"/>
+        <NoDataAvailable Text="Nessuna attività trovata" ImageSource="_content/Template.Shared/images/undraw_file-search_cbur.svg" />
     }
 </div>
 

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 {
@@ -159,4 +161,6 @@
 
 .event-dot.interna { background-color: var(--mud-palette-success-darken); }
 
-.event-dot.commessa { background-color: var(--mud-palette-warning); }
+.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']
+});