refactor(Layout): adjust z-index value for Modal (#4686)

dotnetcore · Nov 17, 2024 · 313ccb7 · 313ccb7
1 parent 07233a7
commit 313ccb7
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 91 deletions.
diff --git a/src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs b/src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs
@@ -10,8 +10,6 @@ namespace BootstrapBlazor.Server.Components.Layout;
 /// </summary>
 public sealed partial class PageLayout
 {
-    private bool IsOpen { get; set; }
-
     private string? Theme { get; set; }
 
     private string? LayoutClassString => CssBuilder.Default("layout-demo")

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Menus.razor b/src/BootstrapBlazor.Server/Components/Samples/Menus.razor
@@ -64,7 +64,7 @@
     <div class="layout-menu-demo">
         <Layout IsFullSide="true" ShowFooter="true" ShowCollapseBar="true" Menus="IconSideMenuItems">
             <Header>
-                <div class="menu-demo-header">
+                <div class="ms-3">
                     @Localizer["MenusClickShrinkSpanSpan"]
                 </div>
             </Header>
@@ -80,7 +80,9 @@
                 <div style="padding: 10rem 1rem;">Main</div>
             </Main>
             <Footer>
-                <a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
+                <div class="text-center flex-fill">
+                    <a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
+                </div>
             </Footer>
         </Layout>
     </div>

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css
@@ -1,66 +1,3 @@
-.layout-menu-demo ::deep .layout-side {
-    background-color: var(--bs-body-bg);
-    color: var(--bs-body-color);
-    height: 100%;
-    border-right: 1px solid var(--bs-border-color);
+.layout-menu-demo {
+    border: 1px solid var(--bs-border-color);
 }
-
-.layout-menu-demo ::deep .menu.is-vertical:not(.is-collapsed) {
-    width: 156px;
-}
-
-.layout-menu-demo ::deep .menu-demo-header {
-    background-color: rgba(var(--bs-body-color-rgb), .12);
-    line-height: 50px;
-    color: var(--bs-body-color);
-    flex: 1;
-    padding-left: 80px;
-}
-
-.layout-menu-demo ::deep .layout-banner {
-    display: flex;
-    align-items: center;
-    padding: 0 .625rem;
-    background-color: rgba(var(--bs-body-color-rgb), .12);
-    height: 50px;
-    font-size: 1.5rem;
-}
-
-    .layout-menu-demo ::deep .layout-banner img {
-        width: 38px;
-        border-radius: var(--bs-border-radius);
-        margin-inline-end: .5rem;
-        border: 1px solid #c0c4cc;
-        background-color: #787878;
-    }
-
-.layout-menu-demo ::deep .layout-side.is-collapsed .layout-banner .layout-title {
-    width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-.layout-menu-demo ::deep .layout-menu {
-    height: 371px;
-    padding: 6px 0;
-    color: var(--bs-body-color);
-}
-
-.layout-menu-demo ::deep .layout-title {
-    color: var(--bs-body-color);
-}
-
-.layout-menu-demo ::deep .layout-header .layout-header-bar {
-    position: absolute;
-    margin: 9px 14px;
-}
-
-.layout-menu-demo ::deep .layout-footer {
-    background-color: rgba(var(--bs-body-color-rgb), .12);
-    text-align: center;
-}
-
-    .layout-menu-demo ::deep .layout-footer > a {
-        color: #000;
-        line-height: 30px;
-    }
diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -274,20 +274,9 @@ code {
 
 .layout-demo {
     --bb-layout-sidebar-banner-background: var(--bb-primary-color);
-    --bb-layout-title-color: #fff;
     --bb-layout-header-background: var(--bb-primary-color);
-    --bb-layout-header-color: #fff;
 }
 
-    .layout-demo .widget {
-        --bb-widget-toggle-color: #fff;
-        margin-inline-end: 1rem;
-    }
-
-    .layout-demo .layout-avatar-right {
-        border-radius: 50%;
-    }
-
 .card-body > section:not(:first-child) {
     margin-top: 1rem;
 }

diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.cs b/src/BootstrapBlazor/Components/Layout/Layout.razor.cs
@@ -241,13 +241,13 @@ public partial class Layout : IHandlerException
         .AddClass("has-footer", ShowFooter && Footer != null)
         .AddClass("is-collapsed", IsCollapsed)
         .AddClass("is-fixed-tab", IsFixedTabHeader && UseTabSet)
+        .AddClass("is-page", IsPage)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
     private string? StyleString => CssBuilder.Default()
         .AddClass("--bb-layout-header-height: 0px;", Header == null)
         .AddClass("--bb-layout-footer-height: 0px;", ShowFooter == false || Footer == null)
-        .AddClass("--bb-layout-height: 100vh;", IsPage && UseTabSet && IsFixedTabHeader)
         .AddStyleFromAttributes(AdditionalAttributes)
         .Build();
 

diff --git a/src/BootstrapBlazor/Components/Layout/Layout.razor.scss b/src/BootstrapBlazor/Components/Layout/Layout.razor.scss
@@ -39,11 +39,19 @@
     --bb-layout-menu-user-border-color: #{$bb-layout-menu-user-border-color};
     --bb-layout-menu-item-hover-bg: #{$bb-layout-menu-item-hover-bg};
     display: flex;
-    height: var(--bb-layout-height, 100%);
+    min-height: var(--bb-layout-height, 100%);
     width: 100%;
     flex-direction: column;
     position: relative;
 
+    &.is-page {
+        --bb-layout-height: 100vh;
+
+        .layout-main {
+            min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height))
+        }
+    }
+
     .layout-banner {
         display: flex;
         align-items: center;
@@ -139,7 +147,7 @@
         align-items: center;
         padding: 0 1rem;
         position: sticky;
-        z-index: 1090;
+        z-index: 1035;
         border-bottom: 1px solid var(--bb-layout-header-border-color);
 
         &.is-fixed {
@@ -197,7 +205,7 @@
 
         .layout-right {
             overflow: hidden;
-            height: 100vh;
+            height: var(--bb-layout-height);
         }
 
         .layout-footer {
@@ -207,7 +215,7 @@
         .has-sidebar {
             .layout-main {
                 overflow: hidden;
-                height: calc(100vh - var(--bb-layout-header-height));
+                height: calc(var(--bb-layout-height) - var(--bb-layout-header-height));
             }
         }
     }
@@ -222,15 +230,15 @@
         border-top: 1px solid var(--bs-border-color);
 
         &.is-fixed {
-            z-index: 1090;
+            z-index: 1035;
             position: sticky;
             bottom: 0;
         }
     }
 
     &.is-fixed-tab {
         .layout-main {
-            height: calc(100% - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
+            height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
         }
 
         .tabs-body {
@@ -278,7 +286,7 @@
                 &.is-fixed-header {
                     position: sticky;
                     top: 0;
-                    height: 100vh;
+                    height: var(--bb-layout-height);
                 }
             }
         }

diff --git a/test/UnitTest/Components/LayoutTest.cs b/test/UnitTest/Components/LayoutTest.cs
@@ -68,10 +68,14 @@ public void IsPage_OK()
         var cut = Context.RenderComponent<Layout>(pb =>
         {
             pb.Add(a => a.IsPage, true);
-            pb.Add(a => a.UseTabSet, true);
-            pb.Add(a => a.IsFixedTabHeader, true);
         });
-        Assert.Contains("--bb-layout-height: 100vh;", cut.Markup);
+        Assert.Contains("is-page", cut.Markup);
+
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.IsPage, false);
+        });
+        Assert.DoesNotContain("is-page", cut.Markup);
     }
 
     [Fact]