fix(templates): resolve iOS & macOS layout issues in Boilerplate #8894 (

#8896)
bitfoundation · Oct 14, 2024 · a039a2b · a039a2b
1 parent 257f034
commit a039a2b
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 12 deletions.
diff --git a/...e/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.scss b/...e/src/Client/Boilerplate.Client.Core/Components/Layout/Identity/IdentityLayout.razor.scss
@@ -4,7 +4,7 @@
 
 main {
     width: 100%;
-    height: 100%
+    min-height: 100%;
 }
 
 .panel {

diff --git a/...ilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.scss b/...ilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/MainLayout.razor.scss
@@ -3,7 +3,7 @@
 
 main {
     width: 100%;
-    height: 100%;
+    min-height: 100%;
 
     @include lt-md {
         height: unset;

diff --git a/...Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.scss b/...Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/Main/NavPanel.razor.scss
@@ -2,11 +2,11 @@
 @import '../../../Styles/abstracts/_bit-css-variables.scss';
 
 section {
-    top: 0;
     height: 100vh;
     padding: 1rem;
     position: sticky;
     overflow: hidden auto;
+    top: var(--app-inset-top);
     min-width: var(--nav-menu-width);
     max-width: var(--nav-menu-width);
 
@@ -17,9 +17,8 @@ section {
     @include lt-md {
         z-index: 3;
         padding: 0;
-        height: unset;
         position: fixed;
-        top: var(--app-inset-top);
+        height: unset !important;
         bottom: var(--app-inset-bottom);
 
         &.closed {
@@ -28,6 +27,12 @@ section {
     }
 }
 
+.bit-macos {
+    section {
+        height: -webkit-fill-available;
+    }
+}
+
 .menu-overlay {
     inset: 0;
     z-index: 2;
@@ -48,6 +53,7 @@ section {
         padding: 0.5rem;
         min-height: 100%;
         flex-direction: column;
+        height: -webkit-fill-available;
         background-color: $bit-color-background-secondary;
 
         @include lt-md {

diff --git a/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor b/...ate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor
@@ -5,14 +5,16 @@
         <CascadingValue Value="currentUrl" Name="@Parameters.CurrentUrl">
             <CascadingValue Value="isAuthenticated" Name="@Parameters.IsAuthenticated">
                 <CascadingValue Value="isAnonymousPage" Name="@Parameters.IsCrossLayoutPage">
-                    <div dir="@currentDir?.ToString().ToLower()" class="layout">
+                    <div class="layout">
                         <div class="inset-top"></div>
-                        <div class="inset-main">
+                        <div class="inset-main" dir="@currentDir?.ToString().ToLower()">
+                            <div class="inset-left"></div>
                             <AppErrorBoundary>
                                 <LayoutView Layout="GetCurrentLayout()">
                                     @Body
                                 </LayoutView>
                             </AppErrorBoundary>
+                            <div class="inset-right"></div>
                         </div>
                         <div class="inset-bottom"></div>
                     </div>

diff --git a/...it.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.scss b/...it.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Layout/RootLayout.razor.scss
@@ -9,6 +9,8 @@
     background-color: $bit-color-background-primary;
     --app-inset-top: env(safe-area-inset-top);
     --app-inset-bottom: env(safe-area-inset-bottom);
+    --app-inset-left: env(safe-area-inset-left);
+    --app-inset-right: env(safe-area-inset-right);
 
     @include lt-md {
         height: 100%;
@@ -19,19 +21,31 @@
     height: var(--app-inset-top);
 }
 
+.inset-left {
+    height: 100%;
+    width: var(--app-inset-left);
+}
+
 .inset-main {
     width: 100%;
-    height: 100%;
+    display: flex;
+    min-height: 100%;
 
     @include lt-md {
         overflow: auto;
         position: relative;
         scroll-behavior: smooth;
         overscroll-behavior: none;
+        width: calc(100% - var(--app-inset-left) - var(--app-inset-right));
         height: calc(100% - var(--app-inset-top) - var(--app-inset-bottom));
     }
 }
 
+.inset-right {
+    height: 100%;
+    width: var(--app-inset-right);
+}
+
 .inset-bottom {
     height: var(--app-inset-bottom);
 }

diff --git a/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/wwwroot/index.html b/...mplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Maui/wwwroot/index.html
@@ -4,7 +4,7 @@
     <base href="/" />
     <meta charset="utf-8" />
     <meta name="theme-color">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
 
     <!--#if (captcha == "reCaptcha")-->
     <link rel="preconnect" href="https://www.google.com">

diff --git a/...emplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/index.html b/...emplates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Web/wwwroot/index.html
@@ -4,13 +4,13 @@
     <base href="/">
     <meta charset="utf-8">
     <meta name="theme-color">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta name="description" content="The Boilerplate is built with ASP.NET Core, Identity, Web API, EF Core and Blazor.">
 
     <script>
         // disable auto-zoom of iOS Safari when focusing an input
         (/iPad|iPhone|iPod/.test(navigator.userAgent)) &&
-            (document.querySelector('meta[name="viewport"]').content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0')
+            (document.querySelector('meta[name="viewport"]').content = 'width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=1.0')
     </script>
 
     <!--#if (captcha == "reCaptcha")-->

diff --git a/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Urls.cs b/src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Urls.cs
@@ -50,5 +50,5 @@ public static partial class Urls
     /// <summary>
     /// The pages that are getting rendered in multiple layouts (identity and main).
     /// </summary>
-    public static readonly string[] CrossLayoutPages = [HomePage, TermsPage];
+    public static readonly string[] CrossLayoutPages = [HomePage, TermsPage, NotFoundPage];
 }