Skip to content

Commit 862a87c

Browse files
Freego1783Freego1783
committed
AddedMudBlazor and some default styling
1 parent 9f6fa94 commit 862a87c

File tree

8 files changed

+36
-104
lines changed

8 files changed

+36
-104
lines changed

‎Components/Layout/MainLayout.razor

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
@inherits LayoutComponentBase
22

3-
<main>
4-
<article>
5-
@Body
6-
</article>
7-
</main>
3+
<MudThemeProvider />
4+
<MudDialogProvider />
5+
<MudSnackbarProvider />
86

7+
<MudLayout>
8+
<MudMainContent class="main-content">
9+
@Body
10+
</MudMainContent>
11+
</MudLayout>

‎Components/Pages/Home.razor

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@page "/"
22

3-
<PageTitle>Home</PageTitle>
3+
<div style="height: 2000px;">
4+
<h1>Hello, world!</h1>
45

5-
<h1>Hello, world!</h1>
6+
Welcome to your new app.
67

7-
Welcome to your new app.
8+
<MudText typo="Typo.h6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, odio eget dapibus porta, sem augue volutpat libero, eget faucibus nisl neque eget velit. Fusce eget cursus nulla. Phasellus malesuada, metus id auctor tempus, augue quam accumsan justo, id scelerisque magna odio non nisl. Proin id orci quis mi volutpat auctor. Phasellus volutpat nisl eget semper laoreet. Vivamus consequat, arcu et interdum tincidunt, nisl nisi porttitor nibh, eget fringilla nibh orci in dui. Sed porta libero et nibh porttitor, ac feugiat velit volutpat. In hac habitasse platea dictumst. Sed consequat, eros ut auctor vestibulum, nisi neque consectetur magna, vel tincidunt quam nibh eget lectus.</MudText>
9+
</div>

‎Components/Pages/Home.razor.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+


‎Components/_Imports.razor

+1
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@
99
@using FightingFantasyCompanion
1010
@using FightingFantasyCompanion.Components
1111
@using FightingFantasyCompanion.Components.Layout
12+
@using MudBlazor

‎FightingFantasyCompanion.csproj

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<ItemGroup>
1010
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0-rc.2.23480.2" />
1111
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0-rc.2.23480.2" PrivateAssets="all" />
12+
<PackageReference Include="MudBlazor" Version="6.17.0" />
1213
</ItemGroup>
1314

1415
</Project>

‎Program.cs

+3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
using Microsoft.AspNetCore.Components.Web;
22
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
33
using FightingFantasyCompanion.Components;
4+
using MudBlazor.Services;
45

56
var builder = WebAssemblyHostBuilder.CreateDefault(args);
67
builder.RootComponents.Add<App>("#app");
@@ -9,4 +10,6 @@
910

1011
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
1112

13+
builder.Services.AddMudServices();
14+
1215
await builder.Build().RunAsync();

‎wwwroot/css/app.css

+14-96
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,21 @@
1-
html, body {
2-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
1+
body, html, #app {
2+
height: 100%;
3+
margin: 0;
4+
padding: 0;
35
}
46

5-
h1:focus {
6-
outline: none;
7+
body {
8+
box-sizing: border-box;
9+
overflow: auto;
710
}
811

9-
a, .btn-link {
10-
color: #0071c1;
12+
#app {
13+
display: flex;
14+
flex-direction: column;
1115
}
1216

13-
.btn-primary {
14-
color: #fff;
15-
background-color: #1b6ec2;
16-
border-color: #1861ac;
17-
}
18-
19-
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
20-
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
21-
}
22-
23-
.content {
24-
padding-top: 1.1rem;
25-
}
26-
27-
.valid.modified:not([type=checkbox]) {
28-
outline: 1px solid #26b050;
29-
}
30-
31-
.invalid {
32-
outline: 1px solid red;
33-
}
34-
35-
.validation-message {
36-
color: red;
37-
}
38-
39-
#blazor-error-ui {
40-
background: lightyellow;
41-
bottom: 0;
42-
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
43-
display: none;
44-
left: 0;
45-
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
46-
position: fixed;
47-
width: 100%;
48-
z-index: 1000;
49-
}
50-
51-
#blazor-error-ui .dismiss {
52-
cursor: pointer;
53-
position: absolute;
54-
right: 0.75rem;
55-
top: 0.5rem;
56-
}
57-
58-
.blazor-error-boundary {
59-
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
60-
padding: 1rem 1rem 1rem 3.7rem;
61-
color: white;
62-
}
63-
64-
.blazor-error-boundary::after {
65-
content: "An error has occurred."
66-
}
67-
68-
.loading-progress {
69-
position: relative;
70-
display: block;
71-
width: 8rem;
72-
height: 8rem;
73-
margin: 20vh auto 1rem auto;
74-
}
75-
76-
.loading-progress circle {
77-
fill: none;
78-
stroke: #e0e0e0;
79-
stroke-width: 0.6rem;
80-
transform-origin: 50% 50%;
81-
transform: rotate(-90deg);
82-
}
83-
84-
.loading-progress circle:last-child {
85-
stroke: #1b6ec2;
86-
stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
87-
transition: stroke-dasharray 0.05s ease-in-out;
88-
}
89-
90-
.loading-progress-text {
91-
position: absolute;
92-
text-align: center;
93-
font-weight: bold;
94-
inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
95-
}
96-
97-
.loading-progress-text:after {
98-
content: var(--blazor-load-percentage-text, "Loading");
99-
}
100-
101-
code {
102-
color: #c02d76;
17+
.main-content {
18+
flex: 1;
19+
overflow: auto;
20+
padding: 5%;
10321
}

‎wwwroot/index.html

+3
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<base href="/" />
99
<link rel="stylesheet" href="css/app.css" />
1010
<link rel="icon" type="image/png" href="favicon.png" />
11+
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
12+
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
1113
<link href="FightingFantasyCompanion.styles.css" rel="stylesheet" />
1214
</head>
1315

@@ -26,6 +28,7 @@
2628
<a class="dismiss">🗙</a>
2729
</div>
2830
<script src="_framework/blazor.webassembly.js"></script>
31+
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
2932
</body>
3033

3134
</html>

0 commit comments

Comments
 (0)