mirror of
https://gitee.com/LongbowEnterprise/BootstrapBlazor.git
synced 2024-11-29 18:49:08 +08:00
refactor(Layout): adjust z-index value for Modal (#4686)
Some checks are pending
Build project / build (push) Waiting to run
Some checks are pending
Build project / build (push) Waiting to run
This commit is contained in:
Argo Zhang
GitHub
parent
07233a798a
commit
313ccb7e99
@ -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")
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -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,7 +230,7 @@
|
||||
border-top: 1px solid var(--bs-border-color);
|
||||
|
||||
&.is-fixed {
|
||||
z-index: 1090;
|
||||
z-index: 1035;
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
}
|
||||
@ -230,7 +238,7 @@
|
||||
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,10 +68,14 @@ public class LayoutTest : BootstrapBlazorTestBase
|
||||
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]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user