Skip to content

Commit 4242aee

Browse files
parsapanahpoorparsapanahpoor
committed
Refactor: Focus on JSON Viewer Component
Removed `Counter` and `FetchData` components, along with their associated styles and data files, to streamline the application. Updated `Index.razor` to emphasize the JSON Viewer demo with improved layout. Simplified `MainLayout` and `NavMenu` by removing navigation elements and focusing on main content. Removed `SurveyPrompt.razor` as it is no longer relevant. #3 Refactored `ExportButton.razor` for better readability, maintainability, and functionality, including support for large file downloads and improved notifications. Updated `_Imports.razor` to include `Component.Core`. Adjusted styles in `MainLayout.razor.css` and `NavMenu.razor.css` to reflect layout changes. Updated `index.html` to use the correct stylesheet. Removed `weather.json` as it is no longer needed.
1 parent bda61ad commit 4242aee

File tree

12 files changed

+40
-337
lines changed

12 files changed

+40
-337
lines changed

‎src/Blazor.Demo/Pages/Counter.razor‎

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎src/Blazor.Demo/Pages/FetchData.razor‎

Lines changed: 0 additions & 57 deletions
This file was deleted.

‎src/Blazor.Demo/Pages/Index.razor‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
@page "/"
2-
@using Component.Core
32

4-
<PageTitle>JSON Viewer Demo</PageTitle>
3+
<PageTitle>JSON Viewer Component - Demo</PageTitle>
54

65
<div class="container-fluid mt-4">
76
<div class="row">
87
<div class="col-12">
98
<h1 class="text-center mb-4">
10-
🚀 JSON Viewer Component Demo
9+
🚀 JSON Viewer Component
1110
</h1>
1211
<p class="text-center text-muted mb-4">
1312
A powerful JSON viewer for Blazor with search, statistics, and more!
1413
</p>
1514
</div>
1615
</div>
1716

18-
<JsonViewer JsonData="@sampleJson"
19-
IsEditable="true" />
17+
<div class="row">
18+
<div class="col-12">
19+
<JsonViewer JsonData="@sampleJson" IsEditable="true" />
20+
</div>
21+
</div>
2022

2123
<div class="row mt-4">
2224
<div class="col-12">

‎src/Blazor.Demo/Shared/MainLayout.razor‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
@inherits LayoutComponentBase
22

33
<div class="page">
4-
<div class="sidebar">
5-
<NavMenu />
6-
</div>
7-
84
<main>
9-
<div class="top-row px-4">
10-
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
11-
</div>
12-
135
<article class="content px-4">
146
@Body
157
</article>

‎src/Blazor.Demo/Shared/MainLayout.razor.css‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -8,74 +8,6 @@ main {
88
flex: 1;
99
}
1010

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

‎src/Blazor.Demo/Shared/NavMenu.razor‎

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,5 @@
11
<div class="top-row ps-3 navbar navbar-dark">
22
<div class="container-fluid">
3-
<a class="navbar-brand" href="">Blazor.Demo</a>
4-
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
5-
<span class="navbar-toggler-icon"></span>
6-
</button>
3+
<a class="navbar-brand" href="/">JSON Viewer Component</a>
74
</div>
85
</div>
9-
10-
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
11-
<nav class="flex-column">
12-
<div class="nav-item px-3">
13-
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
14-
<span class="oi oi-home" aria-hidden="true"></span> Home
15-
</NavLink>
16-
</div>
17-
<div class="nav-item px-3">
18-
<NavLink class="nav-link" href="counter">
19-
<span class="oi oi-plus" aria-hidden="true"></span> Counter
20-
</NavLink>
21-
</div>
22-
<div class="nav-item px-3">
23-
<NavLink class="nav-link" href="fetchdata">
24-
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
25-
</NavLink>
26-
</div>
27-
</nav>
28-
</div>
29-
30-
@code {
31-
private bool collapseNavMenu = true;
32-
33-
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
34-
35-
private void ToggleNavMenu()
36-
{
37-
collapseNavMenu = !collapseNavMenu;
38-
}
39-
}

‎src/Blazor.Demo/Shared/NavMenu.razor.css‎

Lines changed: 7 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,15 @@
1-
.navbar-toggler {
2-
background-color: rgba(255, 255, 255, 0.1);
3-
}
4-
5-
.top-row {
6-
height: 3.5rem;
7-
background-color: rgba(0,0,0,0.4);
8-
}
9-
101
.navbar-brand {
112
font-size: 1.1rem;
12-
}
13-
14-
.oi {
15-
width: 2rem;
16-
font-size: 1.1rem;
17-
vertical-align: text-top;
18-
top: -2px;
19-
}
20-
21-
.nav-item {
22-
font-size: 0.9rem;
23-
padding-bottom: 0.5rem;
24-
}
25-
26-
.nav-item:first-of-type {
27-
padding-top: 1rem;
28-
}
29-
30-
.nav-item:last-of-type {
31-
padding-bottom: 1rem;
32-
}
33-
34-
.nav-item ::deep a {
35-
color: #d7d7d7;
36-
border-radius: 4px;
37-
height: 3rem;
38-
display: flex;
39-
align-items: center;
40-
line-height: 3rem;
41-
}
42-
43-
.nav-item ::deep a.active {
44-
background-color: rgba(255,255,255,0.25);
3+
font-weight: 600;
454
color: white;
5+
text-decoration: none;
466
}
477

48-
.nav-item ::deep a:hover {
49-
background-color: rgba(255,255,255,0.1);
50-
color: white;
8+
.navbar-brand:hover {
9+
color: rgba(255, 255, 255, 0.8);
5110
}
5211

53-
@media (min-width: 641px) {
54-
.navbar-toggler {
55-
display: none;
56-
}
57-
58-
.collapse {
59-
/* Never collapse the sidebar for wide screens */
60-
display: block;
61-
}
62-
63-
.nav-scrollable {
64-
/* Allow sidebar to scroll for tall menus */
65-
height: calc(100vh - 3.5rem);
66-
overflow-y: auto;
67-
}
12+
.navbar-dark {
13+
background-color: rgba(0, 0, 0, 0.4);
14+
padding: 1rem;
6815
}

‎src/Blazor.Demo/Shared/SurveyPrompt.razor‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/Blazor.Demo/_Imports.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
@using Microsoft.JSInterop
99
@using Blazor.Demo
1010
@using Blazor.Demo.Shared
11+
@using Component.Core

‎src/Blazor.Demo/wwwroot/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<base href="/" />
99
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
1010
<link href="css/app.css" rel="stylesheet" />
11-
<link href="JsonViewerComponent.Demo.styles.css" rel="stylesheet" />
11+
<link href="Blazor.Demo.styles.css" rel="stylesheet" />
1212

1313
<!-- Bootstrap Icons -->
1414
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

0 commit comments

Comments
 (0)