Skip to content

Commit 313ccb7

Browse files
ArgoZhangArgoZhang
authored
refactor(Layout): adjust z-index value for Modal (#4686)
1 parent 07233a7 commit 313ccb7

File tree

7 files changed

+29
-91
lines changed

7 files changed

+29
-91
lines changed

‎src/BootstrapBlazor.Server/Components/Layout/PageLayout.razor.cs‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@ namespace BootstrapBlazor.Server.Components.Layout;
1010
/// </summary>
1111
public sealed partial class PageLayout
1212
{
13-
private bool IsOpen { get; set; }
14-
1513
private string? Theme { get; set; }
1614

1715
private string? LayoutClassString => CssBuilder.Default("layout-demo")

‎src/BootstrapBlazor.Server/Components/Samples/Menus.razor‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
<div class="layout-menu-demo">
6565
<Layout IsFullSide="true" ShowFooter="true" ShowCollapseBar="true" Menus="IconSideMenuItems">
6666
<Header>
67-
<div class="menu-demo-header">
67+
<div class="ms-3">
6868
@Localizer["MenusClickShrinkSpanSpan"]
6969
</div>
7070
</Header>
@@ -80,7 +80,9 @@
8080
<div style="padding: 10rem 1rem;">Main</div>
8181
</Main>
8282
<Footer>
83-
<a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
83+
<div class="text-center flex-fill">
84+
<a href="@WebsiteOption.CurrentValue.BootstrapAdminLink" target="_blank">Bootstrap Admin</a>
85+
</div>
8486
</Footer>
8587
</Layout>
8688
</div>

‎src/BootstrapBlazor.Server/Components/Samples/Menus.razor.css‎

Lines changed: 2 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,3 @@
1-
.layout-menu-demo ::deep .layout-side {
2-
background-color: var(--bs-body-bg);
3-
color: var(--bs-body-color);
4-
height: 100%;
5-
border-right: 1px solid var(--bs-border-color);
1+
.layout-menu-demo {
2+
border: 1px solid var(--bs-border-color);
63
}
7-
8-
.layout-menu-demo ::deep .menu.is-vertical:not(.is-collapsed) {
9-
width: 156px;
10-
}
11-
12-
.layout-menu-demo ::deep .menu-demo-header {
13-
background-color: rgba(var(--bs-body-color-rgb), .12);
14-
line-height: 50px;
15-
color: var(--bs-body-color);
16-
flex: 1;
17-
padding-left: 80px;
18-
}
19-
20-
.layout-menu-demo ::deep .layout-banner {
21-
display: flex;
22-
align-items: center;
23-
padding: 0 .625rem;
24-
background-color: rgba(var(--bs-body-color-rgb), .12);
25-
height: 50px;
26-
font-size: 1.5rem;
27-
}
28-
29-
.layout-menu-demo ::deep .layout-banner img {
30-
width: 38px;
31-
border-radius: var(--bs-border-radius);
32-
margin-inline-end: .5rem;
33-
border: 1px solid #c0c4cc;
34-
background-color: #787878;
35-
}
36-
37-
.layout-menu-demo ::deep .layout-side.is-collapsed .layout-banner .layout-title {
38-
width: 0;
39-
overflow: hidden;
40-
white-space: nowrap;
41-
}
42-
43-
.layout-menu-demo ::deep .layout-menu {
44-
height: 371px;
45-
padding: 6px 0;
46-
color: var(--bs-body-color);
47-
}
48-
49-
.layout-menu-demo ::deep .layout-title {
50-
color: var(--bs-body-color);
51-
}
52-
53-
.layout-menu-demo ::deep .layout-header .layout-header-bar {
54-
position: absolute;
55-
margin: 9px 14px;
56-
}
57-
58-
.layout-menu-demo ::deep .layout-footer {
59-
background-color: rgba(var(--bs-body-color-rgb), .12);
60-
text-align: center;
61-
}
62-
63-
.layout-menu-demo ::deep .layout-footer > a {
64-
color: #000;
65-
line-height: 30px;
66-
}

‎src/BootstrapBlazor.Server/wwwroot/css/site.css‎

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -274,20 +274,9 @@ code {
274274

275275
.layout-demo {
276276
--bb-layout-sidebar-banner-background: var(--bb-primary-color);
277-
--bb-layout-title-color: #fff;
278277
--bb-layout-header-background: var(--bb-primary-color);
279-
--bb-layout-header-color: #fff;
280278
}
281279

282-
.layout-demo .widget {
283-
--bb-widget-toggle-color: #fff;
284-
margin-inline-end: 1rem;
285-
}
286-
287-
.layout-demo .layout-avatar-right {
288-
border-radius: 50%;
289-
}
290-
291280
.card-body > section:not(:first-child) {
292281
margin-top: 1rem;
293282
}

‎src/BootstrapBlazor/Components/Layout/Layout.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -241,13 +241,13 @@ public partial class Layout : IHandlerException
241241
.AddClass("has-footer", ShowFooter && Footer != null)
242242
.AddClass("is-collapsed", IsCollapsed)
243243
.AddClass("is-fixed-tab", IsFixedTabHeader && UseTabSet)
244+
.AddClass("is-page", IsPage)
244245
.AddClassFromAttributes(AdditionalAttributes)
245246
.Build();
246247

247248
private string? StyleString => CssBuilder.Default()
248249
.AddClass("--bb-layout-header-height: 0px;", Header == null)
249250
.AddClass("--bb-layout-footer-height: 0px;", ShowFooter == false || Footer == null)
250-
.AddClass("--bb-layout-height: 100vh;", IsPage && UseTabSet && IsFixedTabHeader)
251251
.AddStyleFromAttributes(AdditionalAttributes)
252252
.Build();
253253

‎src/BootstrapBlazor/Components/Layout/Layout.razor.scss‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,19 @@
3939
--bb-layout-menu-user-border-color: #{$bb-layout-menu-user-border-color};
4040
--bb-layout-menu-item-hover-bg: #{$bb-layout-menu-item-hover-bg};
4141
display: flex;
42-
height: var(--bb-layout-height, 100%);
42+
min-height: var(--bb-layout-height, 100%);
4343
width: 100%;
4444
flex-direction: column;
4545
position: relative;
4646

47+
&.is-page {
48+
--bb-layout-height: 100vh;
49+
50+
.layout-main {
51+
min-height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height))
52+
}
53+
}
54+
4755
.layout-banner {
4856
display: flex;
4957
align-items: center;
@@ -139,7 +147,7 @@
139147
align-items: center;
140148
padding: 0 1rem;
141149
position: sticky;
142-
z-index: 1090;
150+
z-index: 1035;
143151
border-bottom: 1px solid var(--bb-layout-header-border-color);
144152

145153
&.is-fixed {
@@ -197,7 +205,7 @@
197205

198206
.layout-right {
199207
overflow: hidden;
200-
height: 100vh;
208+
height: var(--bb-layout-height);
201209
}
202210

203211
.layout-footer {
@@ -207,7 +215,7 @@
207215
.has-sidebar {
208216
.layout-main {
209217
overflow: hidden;
210-
height: calc(100vh - var(--bb-layout-header-height));
218+
height: calc(var(--bb-layout-height) - var(--bb-layout-header-height));
211219
}
212220
}
213221
}
@@ -222,15 +230,15 @@
222230
border-top: 1px solid var(--bs-border-color);
223231

224232
&.is-fixed {
225-
z-index: 1090;
233+
z-index: 1035;
226234
position: sticky;
227235
bottom: 0;
228236
}
229237
}
230238

231239
&.is-fixed-tab {
232240
.layout-main {
233-
height: calc(100% - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
241+
height: calc(var(--bb-layout-height) - var(--bb-layout-header-height) - var(--bb-layout-footer-height));
234242
}
235243

236244
.tabs-body {
@@ -278,7 +286,7 @@
278286
&.is-fixed-header {
279287
position: sticky;
280288
top: 0;
281-
height: 100vh;
289+
height: var(--bb-layout-height);
282290
}
283291
}
284292
}

‎test/UnitTest/Components/LayoutTest.cs‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,14 @@ public void IsPage_OK()
6868
var cut = Context.RenderComponent<Layout>(pb =>
6969
{
7070
pb.Add(a => a.IsPage, true);
71-
pb.Add(a => a.UseTabSet, true);
72-
pb.Add(a => a.IsFixedTabHeader, true);
7371
});
74-
Assert.Contains("--bb-layout-height: 100vh;", cut.Markup);
72+
Assert.Contains("is-page", cut.Markup);
73+
74+
cut.SetParametersAndRender(pb =>
75+
{
76+
pb.Add(a => a.IsPage, false);
77+
});
78+
Assert.DoesNotContain("is-page", cut.Markup);
7579
}
7680

7781
[Fact]

0 commit comments

Comments
 (0)