Skip to content

Commit eb0606a

Browse files
msynkmsynk
committed
fix issues of small screen in BitNavPanel bitfoundation#10202 
1 parent d549874 commit eb0606a

File tree

6 files changed

+71
-290
lines changed

6 files changed

+71
-290
lines changed

‎src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.razor

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@
5959
OnClick="ToggleNavPanel"
6060
Variant="BitVariant.Text"
6161
Style="@Styles?.ToggleButton"
62-
Class="@Classes?.ToggleButton"
6362
IconName="ColumnRightTwoThirds"
63+
Class="@($"bit-npn-tbn {Classes?.ToggleButton}".Trim())"
6464
Classes="@(new() { Icon = "bit-icon-ex bit-icon-ex--ColumnRightTwoThirds" })" />
6565
}
6666
</div>

‎src/BlazorUI/Bit.BlazorUI.Extras/Components/NavPanel/BitNavPanel.scss

+34-36
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,37 @@
1010
background-color: $clr-bg-pri;
1111
height: $bit-env-height-available;
1212

13+
&.bit-npn-tgl {
14+
min-width: spacing(12);
15+
max-width: spacing(12);
16+
17+
.bit-npn-cnt {
18+
align-items: center;
19+
}
20+
}
21+
22+
&.bit-npn-npd {
23+
padding: 0;
24+
25+
&.bit-npn-tgl {
26+
min-width: spacing(6);
27+
max-width: spacing(6);
28+
}
29+
30+
.bit-npn-cnt {
31+
padding: 0;
32+
}
33+
}
34+
35+
&::-webkit-scrollbar {
36+
width: 0;
37+
}
38+
39+
.bit-srb,
40+
.bit-srb-cnt {
41+
width: 100%;
42+
}
43+
1344
@include lt-md {
1445
left: 0;
1546
padding: 0;
@@ -39,48 +70,15 @@
3970
min-width: spacing(8);
4071
max-width: spacing(8);
4172
}
42-
}
4373

44-
&.bit-npn-tgl {
45-
min-width: spacing(12);
46-
max-width: spacing(12);
47-
48-
.bit-npn-cnt {
49-
align-items: center;
50-
}
51-
52-
&.bit-npn-npd {
74+
&.bit-npn-npd.bit-npn-tgl {
5375
min-width: spacing(6);
5476
max-width: spacing(6);
5577
}
56-
}
57-
58-
&.bit-npn-npd {
59-
padding: 0;
6078

61-
&.bit-npn-tgl {
62-
min-width: spacing(6);
63-
max-width: spacing(6);
79+
.bit-npn-tbn {
80+
display: none;
6481
}
65-
66-
.bit-npn-cnt {
67-
padding: 0;
68-
}
69-
70-
@include lt-md {
71-
&.bit-npn-tgl {
72-
min-width: spacing(6);
73-
max-width: spacing(6);
74-
}
75-
}
76-
}
77-
78-
&::-webkit-scrollbar {
79-
width: 0;
80-
}
81-
82-
.bit-srb, .bit-srb-cnt {
83-
width: 100%;
8482
}
8583
}
8684

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor

+18-48
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,7 @@
3434
<div class="open-btn">
3535
<BitToggleButton @bind-IsChecked="fullWidthIsOpen" OnText="Close" OffText="Open" />
3636
</div>
37-
<div style="width:333px">
38-
<BitNavPanel @bind-IsOpen="fullWidthIsOpen" Items="basicNavItems" FullWidth />
39-
</div>
37+
<BitNavPanel @bind-IsOpen="fullWidthIsOpen" Items="basicNavItems" FullWidth />
4038
</DemoSection>
4139

4240
<DemoSection Title="NoToggle" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
@@ -48,7 +46,7 @@
4846
</div>
4947
</DemoSection>
5048

51-
<DemoSection Title="IconUrl & IconNavUrl" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
49+
<DemoSection Title="Icon" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
5250
<div class="open-btn">
5351
<BitToggleButton @bind-IsChecked="iconUrlIsOpen" OnText="Close" OffText="Open" />
5452
</div>
@@ -57,61 +55,31 @@
5755
</div>
5856
</DemoSection>
5957

60-
<DemoSection Title="ChevronDownIcon" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
61-
<div class="open-btn">
62-
<BitToggleButton @bind-IsChecked="chevronDownIconIsOpen" OnText="Close" OffText="Open" />
63-
</div>
64-
<div style="width:222px">
65-
<BitNavPanel @bind-IsOpen="chevronDownIconIsOpen" Items="basicNavItems" ChevronDownIcon="@BitIconName.ColumnList" />
66-
</div>
67-
</DemoSection>
68-
69-
<DemoSection Title="ReversedChevron" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
70-
<div class="open-btn">
71-
<BitToggleButton @bind-IsChecked="reversedChevronIsOpen" OnText="Close" OffText="Open" />
72-
</div>
73-
<div style="width:222px">
74-
<BitNavPanel @bind-IsOpen="reversedChevronIsOpen" Items="basicNavItems" ReversedChevron />
75-
</div>
76-
</DemoSection>
77-
78-
<DemoSection Title="SearchBoxPlaceholder" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
58+
<DemoSection Title="SearchBoxPlaceholder" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
7959
<div class="open-btn">
8060
<BitToggleButton @bind-IsChecked="searchBoxPlaceholderIsOpen" OnText="Close" OffText="Open" />
8161
</div>
82-
<div style="width:300px">
62+
<div style="width:240px">
8363
<BitNavPanel @bind-IsOpen="searchBoxPlaceholderIsOpen" Items="basicNavItems" SearchBoxPlaceholder="Search in menu items..." />
8464
</div>
8565
</DemoSection>
8666

87-
<DemoSection Title="EmptyListMessage" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
67+
<DemoSection Title="EmptyListMessage" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
8868
<div class="open-btn">
8969
<BitToggleButton @bind-IsChecked="emptyListMessageIsOpen" OnText="Close" OffText="Open" />
9070
</div>
9171
<div style="width:222px">
92-
<BitNavPanel @bind-IsOpen="emptyListMessageIsOpen" Items="basicNavItems" EmptyListMessage="There is no such item." />
93-
</div>
94-
</DemoSection>
95-
96-
<DemoSection Title="SingleExpand" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
97-
<div class="open-btn">
98-
<BitToggleButton @bind-IsChecked="singleExpandIsOpen" OnText="Close" OffText="Open" />
99-
</div>
100-
<div>
101-
<BitToggleButton @bind-IsChecked="isSingleExpand" OnText="Single expand" OffText="Multi expand" />
102-
</div>
103-
<div style="width:222px">
104-
<BitNavPanel @bind-IsOpen="singleExpandIsOpen" Items="singleExpandNavItems" SingleExpand="isSingleExpand" />
72+
<BitNavPanel @bind-IsOpen="emptyListMessageIsOpen" Items="basicNavItems" EmptyListMessage="There is no item found." />
10573
</div>
10674
</DemoSection>
10775

108-
<DemoSection Title="Template" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
76+
<DemoSection Title="Templates" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
10977
<div class="open-btn">
11078
<BitToggleButton @bind-IsChecked="templateIsOpen" OnText="Close" OffText="Open" />
11179
</div>
11280
<BitNavPanel @bind-IsOpen="templateIsOpen" Items="basicNavItems" FitWidth NoToggle>
11381
<Header>
114-
<BitText Typography="BitTypography.H4" Color="BitColor.Info">Bit Menu</BitText>
82+
<BitText Typography="BitTypography.H5"><b>NavPanel</b> header</BitText>
11583
</Header>
11684
<ItemTemplate Context="item">
11785
<BitText><i><b>@item.Text</b></i></BitText>
@@ -127,7 +95,7 @@
12795
</BitNavPanel>
12896
</DemoSection>
12997

130-
<DemoSection Title="Event" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
98+
<DemoSection Title="Event" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
13199
<div class="open-btn">
132100
<BitToggleButton @bind-IsChecked="eventIsOpen" OnText="Close" OffText="Open" />
133101
</div>
@@ -144,7 +112,7 @@
144112
</div>
145113
</DemoSection>
146114

147-
<DemoSection Title="Color" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
115+
<DemoSection Title="Color" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
148116
<div class="open-btn">
149117
<BitToggleButton @bind-IsChecked="colorIsOpen" OnText="Close" OffText="Open" />
150118
</div>
@@ -153,24 +121,26 @@
153121
</div>
154122
</DemoSection>
155123

156-
<DemoSection Title="Style & Class" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
124+
<DemoSection Title="Style & Class" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
157125
<div class="open-btn">
158126
<BitToggleButton @bind-IsChecked="classStyleIsOpen" OnText="Close" OffText="Open" />
159127
</div>
160128
<div style="width:222px">
161129
<BitNavPanel @bind-IsOpen="classStyleIsOpen"
162130
Items="basicNavItems"
163131
Styles="@(new() { Container = "background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);" })"
164-
NavClasses="@(new() { ItemContainer = "custom-nav-item", ItemIcon = "custom-nav-item-ico", ItemText = "custom-nav-item-txt" })"
132+
NavClasses="@(new() { ItemContainer = "custom-nav-item",
133+
ItemIcon = "custom-nav-item-ico",
134+
ItemText = "custom-nav-item-txt" })"
165135
SearchBoxClasses="@(new() { Icon = "custom-icon-searchbox",
166136
Focused = "custom-focused-searchbox",
167-
ClearButton = "custom-clear-searchbox",
168-
IconWrapper = "custom-icon-wrapper-searchbox",
169-
InputContainer = "custom-input-container-searchbox" })" />
137+
ClearButton = "custom-clear-searchbox",
138+
IconWrapper = "custom-icon-wrapper-searchbox",
139+
InputContainer = "custom-input-container-searchbox" })" />
170140
</div>
171141
</DemoSection>
172142

173-
<DemoSection Title="RTL" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
143+
<DemoSection Title="RTL" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
174144
<div class="open-btn">
175145
<BitToggleButton @bind-IsChecked="rtlIsOpen" OnText="Close" OffText="Open" />
176146
</div>

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/NavPanel/BitNavPanelDemo.razor.cs

-3
Original file line numberDiff line numberDiff line change
@@ -530,8 +530,6 @@ public partial class BitNavPanelDemo
530530
private bool fullWidthIsOpen;
531531
private bool noToggleIsOpen;
532532
private bool iconUrlIsOpen;
533-
private bool chevronDownIconIsOpen;
534-
private bool reversedChevronIsOpen;
535533
private bool searchBoxPlaceholderIsOpen;
536534
private bool emptyListMessageIsOpen;
537535
private bool singleExpandIsOpen;
@@ -540,7 +538,6 @@ public partial class BitNavPanelDemo
540538
private bool colorIsOpen;
541539
private bool classStyleIsOpen;
542540
private bool rtlIsOpen;
543-
private bool isSingleExpand = true;
544541

545542
private BitNavItem? onItemClick;
546543
private BitNavItem? onItemToggle;

0 commit comments

Comments
 (0)