Skip to content

Commit e30512e

Browse files
gvreddy04gvreddy04
authored
Split Grid demos to improve the page performance (vikramlearning#720)
Split Grid demos to improve the page performance.
1 parent 15541be commit e30512e

File tree

67 files changed

+716
-322
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+716
-322
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor

+18-52
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,40 @@
11
@namespace BlazorBootstrap.Demo.RCL
22

3-
@inherits LayoutComponentBase
3+
@inherits MainLayoutBase
44

55
<div class="bb-page">
66

7-
<Sidebar @ref="sidebar"
7+
<Sidebar2 @ref="sidebar2"
88
ImageSrc="https://demos.blazorbootstrap.com/images/logo/logo-white.svg"
99
Title="Blazor Bootstrap"
10-
BadgeText="@version"
11-
DataProvider="SidebarDataProvider" />
10+
BadgeText="@Version"
11+
DataProvider="Sidebar2DataProvider" />
1212

1313
<main class="bb-scrollbar">
1414
<div class="content my-4 my-md-4 px-4">
1515
@Body
1616

1717
<Callout Class="text-center text-bold skippy border-0" HideHeading="true">
18-
<a href="@githubUrl" class="text-decoration-none" b-09pcjsuuk4="">
18+
<a href="@GithubUrl" class="text-decoration-none" b-09pcjsuuk4="">
1919
<i class="bi bi-star-fill" b-09pcjsuuk4=""></i>
2020
<span b-09pcjsuuk4="">If you like Blazor Bootstrap, give it a star on GitHub!</span>
2121
<i class="bi bi-star-fill" b-09pcjsuuk4=""></i>
2222
</a>
2323
</Callout>
2424
</div>
25-
<div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-light">
26-
<div class="container px-4 px-md-3">
27-
<div class="row">
28-
<div class="col-lg-4 mb-3">
29-
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
30-
<img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap">
31-
<span class="fs-5">Blazor Bootstrap</span>
32-
</a>
33-
<ul class="list-unstyled small text-muted">
34-
<li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li>
35-
<li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
36-
<li class="mb-2">Currently @version.</li>
37-
</ul>
38-
</div>
39-
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
40-
<h5>Links</h5>
41-
<ul class="list-unstyled">
42-
<li class="mb-2"><a href="/">Home</a></li>
43-
<li class="mb-2"><a href="@docsUrl" target="_blank" rel="noopener">Docs</a></li><!--!-->
44-
<li class="mb-2"><a href="@blogUrl" target="_blank" rel="noopener">Blog</a></li>
45-
<li class="mb-2"><a href="@githubUrl" target="_blank" rel="noopener">GitHub</a></li>
46-
</ul>
47-
</div>
48-
<div class="col-6 col-lg-2 mb-3">
49-
<h5>Guides</h5>
50-
<ul class="list-unstyled">
51-
<li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li>
52-
<li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li>
53-
<li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li>
54-
</ul>
55-
</div>
56-
<div class="col-6 col-lg-2 mb-3">
57-
<h5>Community</h5>
58-
<ul class="list-unstyled">
59-
<li class="mb-2"><a href="@githubIssuesUrl" target="_blank" rel="noopener">Issues</a></li>
60-
<li class="mb-2"><a href="@githubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li>
61-
<li class="mb-2"><a href="@openCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li>
62-
<li class="mb-2"><a href="@stackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
63-
</ul>
64-
</div>
65-
<div class="col-6 col-lg-2 mb-3"></div>
66-
</div>
67-
</div>
68-
</div>
25+
26+
<MainLayoutBaseFooter Version="@Version"
27+
DocsUrl="@DocsUrl"
28+
BlogUrl="@BlogUrl"
29+
GithubUrl="@GithubUrl"
30+
TwitterUrl="@TwitterUrl"
31+
LinkedInUrl="@LinkedInUrl"
32+
OpenCollectiveUrl="@OpenCollectiveUrl"
33+
GithubIssuesUrl="@GithubIssuesUrl"
34+
GithubDiscussionsUrl="@GithubDiscussionsUrl"
35+
StackoverflowUrl="@StackoverflowUrl" />
36+
6937
</main>
7038
</div>
7139

72-
<Modal IsServiceModal="true" />
73-
<Preload LoadingText="Loading..." />
74-
<Toasts class="p-3" AutoHide="true" Delay="4000" Placement="ToastsPlacement.TopRight" />
40+
<MainLayoutBaseServices />

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor.cs

+24-43
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,10 @@
11
namespace BlazorBootstrap.Demo.RCL;
22

3-
public partial class MainLayout : LayoutComponentBase
3+
public partial class MainLayout : MainLayoutBase
44
{
5-
private string version = default!;
6-
private string docsUrl = default!;
7-
private string blogUrl = default!;
8-
private string githubUrl = default!;
9-
private string twitterUrl = default!;
10-
private string linkedInUrl = default!;
11-
private string openCollectiveUrl = default!;
12-
private string githubIssuesUrl = default!;
13-
private string githubDiscussionsUrl = default!;
14-
private string stackoverflowUrl = default!;
15-
16-
private Sidebar sidebar = default!;
17-
private IEnumerable<NavItem> navItems = default!;
18-
19-
[Inject] public IConfiguration Configuration { get; set; } = default!;
20-
21-
protected override void OnInitialized()
22-
{
23-
version = $"v{Configuration["version"]}"; // example: v0.6.1
24-
docsUrl = $"{Configuration["urls:docs"]}";
25-
blogUrl = $"{Configuration["urls:blog"]}";
26-
githubUrl = $"{Configuration["urls:github"]}";
27-
twitterUrl = $"{Configuration["urls:twitter"]}";
28-
linkedInUrl = $"{Configuration["urls:linkedin"]}";
29-
openCollectiveUrl = $"{Configuration["urls:opencollective"]}";
30-
githubIssuesUrl = $"{Configuration["urls:github_issues"]}";
31-
githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
32-
stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
33-
base.OnInitialized();
34-
}
35-
36-
private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
37-
{
38-
if (navItems is null)
39-
navItems = GetNavItems();
40-
41-
return await Task.FromResult(request.ApplyTo(navItems));
42-
}
43-
44-
private IEnumerable<NavItem> GetNavItems()
5+
internal override IEnumerable<NavItem> GetNavItems()
456
{
46-
navItems = new List<NavItem>
7+
navItems ??= new List<NavItem>
478
{
489
new (){ Id = "1", Text = "Getting Started", Href = "/getting-started", IconName = IconName.HouseDoorFill },
4910

@@ -75,7 +36,27 @@ private IEnumerable<NavItem> GetNavItems()
7536
new (){ Id = "508", Text = "Collapse", Href = "/collapse", IconName = IconName.ArrowsCollapse, ParentId = "5" },
7637
new (){ Id = "509", Text = "Confirm Dialog", Href = "/confirm-dialog", IconName = IconName.QuestionDiamondFill, ParentId = "5" },
7738
new (){ Id = "510", Text = "Dropdown", Href = "/dropdown", IconName = IconName.MenuButtonWideFill, ParentId = "5" },
78-
new (){ Id = "511", Text = "Grid", Href = "/grid", IconName = IconName.Grid, ParentId = "5" },
39+
40+
#region Grid
41+
42+
new (){ Id = "511", Text = "Grid", IconName = IconName.Grid, ParentId = "5" },
43+
new (){ Id = "51101", Text = "Overview", Href = "/grid/overview", IconName = IconName.Grid, ParentId = "511" },
44+
new (){ Id = "51102", Text = "Data Binding", Href = "/grid/data-binding", IconName = IconName.GridFill, ParentId = "511" },
45+
new (){ Id = "51103", Text = "Filters", Href = "/grid/filters", IconName = IconName.FunnelFill, ParentId = "511" },
46+
new (){ Id = "51104", Text = "Paging", Href = "/grid/paging", IconName = IconName.ChevronBarRight, ParentId = "511" },
47+
new (){ Id = "51105", Text = "Sorting", Href = "/grid/sorting", IconName = IconName.ArrowDownUp, ParentId = "511" },
48+
new (){ Id = "51106", Text = "Selection", Href = "/grid/selection", IconName = IconName.CheckSquareFill, ParentId = "511" },
49+
new (){ Id = "51107", Text = "Alignment", Href = "/grid/alignment", IconName = IconName.Justify, ParentId = "511" },
50+
new (){ Id = "51108", Text = "Grid Settings", Href = "/grid/settings", IconName = IconName.GearFill, ParentId = "511" },
51+
new (){ Id = "51109", Text = "Custom CSS Class", Href = "/grid/custom-css-class", IconName = IconName.FileTypeCss, ParentId = "511" },
52+
new (){ Id = "51110", Text = "Events", Href = "/grid/events", IconName = IconName.Fire, ParentId = "511" },
53+
new (){ Id = "51111", Text = "Translations", Href = "/grid/translations", IconName = IconName.Translate, ParentId = "511" },
54+
new (){ Id = "51112", Text = "Fixed Header", Href = "/grid/fixed-header", IconName = IconName.Table, ParentId = "511" },
55+
new (){ Id = "51113", Text = "Freeze Columns", Href = "/grid/freeze-columns", IconName = IconName.LayoutThreeColumns, ParentId = "511" },
56+
new (){ Id = "51114", Text = "Other", Href = "/grid/other", IconName = IconName.PlusSquareFill, ParentId = "511" },
57+
58+
#endregion Grid
59+
7960
new (){ Id = "512", Text = "Modals", Href = "/modals", IconName = IconName.WindowStack, ParentId = "5" },
8061
new (){ Id = "513", Text = "Offcanvas", Href = "/offcanvas", IconName = IconName.LayoutSidebarReverse, ParentId = "5" },
8162
new (){ Id = "514", Text = "Pagination", Href = "/pagination", IconName = IconName.ThreeDots, ParentId = "5" },

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
namespace BlazorBootstrap.Demo.RCL;
2+
3+
public class MainLayoutBase : LayoutComponentBase
4+
{
5+
private string version = default!;
6+
private string docsUrl = default!;
7+
private string blogUrl = default!;
8+
private string githubUrl = default!;
9+
private string twitterUrl = default!;
10+
private string linkedInUrl = default!;
11+
private string openCollectiveUrl = default!;
12+
private string githubIssuesUrl = default!;
13+
private string githubDiscussionsUrl = default!;
14+
private string stackoverflowUrl = default!;
15+
16+
internal Sidebar2 sidebar2 = default!;
17+
internal IEnumerable<NavItem> navItems = default!;
18+
19+
[Inject] public IConfiguration Configuration { get; set; } = default!;
20+
21+
protected override void OnInitialized()
22+
{
23+
version = $"v{Configuration["version"]}"; // example: v0.6.1
24+
docsUrl = $"{Configuration["urls:docs"]}";
25+
blogUrl = $"{Configuration["urls:blog"]}";
26+
githubUrl = $"{Configuration["urls:github"]}";
27+
twitterUrl = $"{Configuration["urls:twitter"]}";
28+
linkedInUrl = $"{Configuration["urls:linkedin"]}";
29+
openCollectiveUrl = $"{Configuration["urls:opencollective"]}";
30+
githubIssuesUrl = $"{Configuration["urls:github_issues"]}";
31+
githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
32+
stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
33+
base.OnInitialized();
34+
}
35+
36+
internal virtual async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
37+
{
38+
if (navItems is null)
39+
navItems = GetNavItems();
40+
41+
return await Task.FromResult(request.ApplyTo(navItems));
42+
}
43+
44+
internal virtual IEnumerable<NavItem> GetNavItems() => new List<NavItem>();
45+
46+
public string Version => version;
47+
public string DocsUrl => docsUrl;
48+
public string BlogUrl => blogUrl;
49+
public string GithubUrl => githubUrl;
50+
public string TwitterUrl => twitterUrl;
51+
public string LinkedInUrl => linkedInUrl;
52+
public string OpenCollectiveUrl => openCollectiveUrl;
53+
public string GithubIssuesUrl => githubIssuesUrl;
54+
public string GithubDiscussionsUrl => githubDiscussionsUrl;
55+
public string StackoverflowUrl => stackoverflowUrl;
56+
}

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.css

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.page {
2+
position: relative;
3+
display: flex;
4+
flex-direction: column;
5+
}
6+
7+
.main {
8+
flex: 1;
9+
overflow-x: hidden;
10+
/*width: 100%;*/
11+
}
12+
13+
.sidebar {
14+
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
15+
}
16+
17+
.top-row {
18+
background-color: #f7f7f7;
19+
border-bottom: 1px solid #d6d5d5;
20+
justify-content: flex-end;
21+
height: 3.5rem;
22+
display: flex;
23+
align-items: center;
24+
}
25+
26+
.top-row ::deep a, .top-row .btn-link {
27+
white-space: nowrap;
28+
margin-left: 1.5rem;
29+
}
30+
31+
.top-row a:first-child {
32+
overflow: hidden;
33+
text-overflow: ellipsis;
34+
}
35+
36+
@media (max-width: 640.98px) {
37+
.top-row:not(.auth) {
38+
display: none;
39+
}
40+
41+
.top-row.auth {
42+
justify-content: space-between;
43+
}
44+
45+
.top-row a, .top-row .btn-link {
46+
margin-left: 0;
47+
}
48+
}
49+
50+
@media (min-width: 641px) {
51+
.page {
52+
flex-direction: row;
53+
}
54+
55+
.sidebar {
56+
width: 260px !important;
57+
height: 100vh !important;
58+
overflow-y: auto !important;
59+
position: sticky !important;
60+
top: 0 !important;
61+
}
62+
63+
.top-row {
64+
position: sticky;
65+
top: 0;
66+
z-index: 1;
67+
}
68+
69+
.main > div {
70+
padding-left: 2rem !important;
71+
padding-right: 1.5rem !important;
72+
}
73+
}

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@namespace BlazorBootstrap.Demo.RCL
2+
@inherits ComponentBase
3+
4+
<div class="bd-footer pt-4 pt-md-5 mt-5 pb-2 pb-md-3 bg-light">
5+
<div class="container px-4 px-md-3">
6+
<div class="row">
7+
<div class="col-lg-4 mb-3">
8+
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
9+
<img src="/images/logo/logo-color.svg" width="40" height="32" class="d-block me-2" alt="Blazor Bootstrap">
10+
<span class="fs-5">Blazor Bootstrap</span>
11+
</a>
12+
<ul class="list-unstyled small text-muted">
13+
<li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li>
14+
<li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
15+
<li class="mb-2">Currently @Version.</li>
16+
</ul>
17+
</div>
18+
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
19+
<h5>Links</h5>
20+
<ul class="list-unstyled">
21+
<li class="mb-2"><a href="/">Home</a></li>
22+
<li class="mb-2"><a href="@DocsUrl" target="_blank" rel="noopener">Docs</a></li><!--!-->
23+
<li class="mb-2"><a href="@BlogUrl" target="_blank" rel="noopener">Blog</a></li>
24+
<li class="mb-2"><a href="@GithubUrl" target="_blank" rel="noopener">GitHub</a></li>
25+
</ul>
26+
</div>
27+
<div class="col-6 col-lg-2 mb-3">
28+
<h5>Guides</h5>
29+
<ul class="list-unstyled">
30+
<li class="mb-2"><a href="/getting-started/blazor-webassembly">Getting started</a></li>
31+
<li class="mb-2"><a href="/getting-started#install-nuget-package">Install Nuget</a></li>
32+
<li class="mb-2"><a href="https://github.com/vikramlearning/blazorbootstrap-starter-templates" target="_blank">Starter templates</a></li>
33+
</ul>
34+
</div>
35+
<div class="col-6 col-lg-2 mb-3">
36+
<h5>Community</h5>
37+
<ul class="list-unstyled">
38+
<li class="mb-2"><a href="@GithubIssuesUrl" target="_blank" rel="noopener">Issues</a></li>
39+
<li class="mb-2"><a href="@GithubDiscussionsUrl" target="_blank" rel="noopener">Discussions</a></li>
40+
<li class="mb-2"><a href="@OpenCollectiveUrl" target="_blank" rel="noopener">Open Collective</a></li>
41+
<li class="mb-2"><a href="@StackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
42+
</ul>
43+
</div>
44+
<div class="col-6 col-lg-2 mb-3"></div>
45+
</div>
46+
</div>
47+
</div>
48+

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor.cs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace BlazorBootstrap.Demo.RCL;
2+
3+
public partial class MainLayoutBaseFooter : ComponentBase
4+
{
5+
[Parameter] public string? Version { get; set; }
6+
[Parameter] public string? DocsUrl { get; set; }
7+
[Parameter] public string? BlogUrl { get; set; }
8+
[Parameter] public string? GithubUrl { get; set; }
9+
[Parameter] public string? TwitterUrl { get; set; }
10+
[Parameter] public string? LinkedInUrl { get; set; }
11+
[Parameter] public string? OpenCollectiveUrl { get; set; }
12+
[Parameter] public string? GithubIssuesUrl { get; set; }
13+
[Parameter] public string? GithubDiscussionsUrl { get; set; }
14+
[Parameter] public string? StackoverflowUrl { get; set; }
15+
}

‎BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseServices.razor

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@namespace BlazorBootstrap.Demo.RCL
2+
@inherits ComponentBase
3+
4+
<Modal IsServiceModal="true" />
5+
<Preload LoadingText="Loading..." />
6+
<Toasts class="p-3" AutoHide="true" Delay="4000" Placement="ToastsPlacement.TopRight" />

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/Grid_Demo_04_Client_Side_Filtering_Paging_And_Sorting.razor ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_04_Client_Side_Filtering_Paging_And_Sorting.razor

File renamed without changes.

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/Grid_Demo_07_Server_Side_Filtering_Paging_And_Sorting.razor ‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_07_Server_Side_Filtering_Paging_And_Sorting.razor

File renamed without changes.

0 commit comments

Comments
 (0)