Skip to content

Commit 3b4f5f8

Browse files
isc30isc30
authored
Merge pull request #33 from isc30/feature/demo
Merging to get the style changes in master
2 parents 0f84df6 + d29af9a commit 3b4f5f8

File tree

9 files changed

+84
-44
lines changed

9 files changed

+84
-44
lines changed

‎demo/WasmHost/App.razor

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<LazyRouter AppAssembly="@typeof(Program).Assembly">
22
<Loading Context="moduleName">
33
<LayoutView Layout="@typeof(MainLayout)">
4-
<p>Loading... please wait</p>
4+
<div class="pureCenter full light">
5+
<div class="loader light"></div>
6+
</div>
57
</LayoutView>
68
</Loading>
79
<Found Context="routeData">

‎demo/WasmHost/Pages/Counter.razor

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
88

99
<Lazy Name="SimpleComponent">
10-
<div>LOADING SIMPLECOMPONENT...</div>
10+
<div class="loader light"></div>
1111
</Lazy>
1212

1313
<Lazy Name="NamedComponent" />

‎demo/WasmHost/Shared/MainLayout.razor

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@
55
</div>
66

77
<div class="main">
8-
<div class="top-row px-4">
9-
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
10-
</div>
11-
128
<div class="content px-4">
139
@Body
1410
</div>

‎demo/WasmHost/Shared/NavMenu.razor

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,32 +7,32 @@
77

88
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
99
<ul class="nav flex-column">
10-
<li class="nav-item px-3">
10+
<li class="nav-item">
1111
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
1212
<span class="oi oi-home" aria-hidden="true"></span> Home
1313
</NavLink>
1414
</li>
15-
<li class="nav-item px-3">
15+
<li class="nav-item">
1616
<NavLink class="nav-link" href="counter">
1717
<span class="oi oi-plus" aria-hidden="true"></span> Counter
1818
</NavLink>
1919
</li>
20-
<li class="nav-item px-3">
20+
<li class="nav-item">
2121
<NavLink class="nav-link" href="fetchdata">
2222
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch Data
2323
</NavLink>
2424
</li>
25-
<li class="nav-item px-3">
25+
<li class="nav-item">
2626
<NavLink class="nav-link" href="simple-page">
2727
<span class="oi oi-list-rich" aria-hidden="true"></span> (Lazy) Simple Page
2828
</NavLink>
2929
</li>
30-
<li class="nav-item px-3">
30+
<li class="nav-item">
3131
<NavLink class="nav-link" href="page-with-param/hello">
3232
<span class="oi oi-list-rich" aria-hidden="true"></span> (Lazy) Page with Param
3333
</NavLink>
3434
</li>
35-
<li class="nav-item px-3">
35+
<li class="nav-item">
3636
<NavLink class="nav-link" href="@Guid.NewGuid()">
3737
<span class="oi oi-list-rich" aria-hidden="true"></span> (404) Error Page
3838
</NavLink>

‎demo/WasmHost/wwwroot/404.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,20 +26,19 @@
2626

2727
<body>
2828
<app>
29-
<div class="pureCenter">
30-
<div class="loader"></div>
29+
<div class="pureCenter overlay light">
30+
<div class="loader light"></div>
3131
</div>
3232
</app>
3333

34-
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
35-
<link href="css/site.css" rel="stylesheet" />
36-
3734
<div id="blazor-error-ui">
3835
An unhandled error has occurred.
3936
<a href="" class="reload">Reload</a>
4037
<a class="dismiss">🗙</a>
4138
</div>
4239

40+
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
41+
<link href="css/site.css" rel="stylesheet" />
4342
<script src="_framework/blazor.webassembly.js"></script>
4443
</body>
4544

‎demo/WasmHost/wwwroot/css/global.css

Lines changed: 38 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,46 @@
33
}
44

55
.pureCenter {
6-
width: 100vw;
7-
height: 100vh;
8-
position:relative;
96
display: flex;
107
justify-content: center;
118
align-items: center;
129
flex-direction: column;
13-
background-color: #000000;
14-
color: #ffffff;
1510
}
11+
12+
.overlay {
13+
width: 100vw;
14+
height: 100vh;
15+
position: fixed;
16+
top: 0;
17+
left: 0;
18+
}
19+
20+
.overlay.dark {
21+
background-color: black;
22+
color: white;
23+
}
24+
25+
.overlay.light {
26+
background-color: white;
27+
color: black;
28+
}
29+
30+
.full {
31+
position: absolute;
32+
top:0; left:0;
33+
width: 100%;
34+
height: 100%;
35+
position: absolute;
36+
background-color: black;
37+
color: white;
38+
}
39+
40+
.full.dark {
41+
background-color: black;
42+
color: white;
43+
}
44+
45+
.full.light {
46+
background-color: white;
47+
color: black;
48+
}

‎demo/WasmHost/wwwroot/css/loader.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
.loader {
2-
border: 3px solid #ffffff;
2+
border: 3px solid;
33
border-radius: 50%;
4-
border-top: 1.5em solid white;
4+
border-top: 1.5em solid;
55
width: 3em;
66
height: 3em;
77

88
-webkit-animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite; /* Safari */
99
animation: spin 1.5s cubic-bezier(.68,-0.55,.27,1.55) infinite;
1010
}
1111

12+
.loader.light {
13+
color: black;
14+
}
15+
16+
.loader.dark {
17+
color: white;
18+
}
19+
1220
/* Safari */
1321
@-webkit-keyframes spin {
1422
0% {

‎demo/WasmHost/wwwroot/css/site.css

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
22

33
html, body {
4-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
4+
font-family: Roboto, sans-serif;
55
}
66

77
a, .btn-link {
@@ -21,17 +21,18 @@ app {
2121
}
2222

2323
.top-row {
24-
height: 3.5rem;
24+
height: 5rem;
2525
display: flex;
2626
align-items: center;
2727
}
2828

2929
.main {
3030
flex: 1;
31+
position: relative;
3132
}
3233

3334
.main .top-row {
34-
background-color: #f7f7f7;
35+
background-color: rgb(109, 94, 172);
3536
border-bottom: 1px solid #d6d5d5;
3637
justify-content: flex-end;
3738
}
@@ -47,58 +48,59 @@ app {
4748
}
4849

4950
.sidebar {
50-
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
51+
background-color: #3f4a59;
52+
color: rgb(255, 255, 255);
5153
}
5254

5355
.sidebar .top-row {
54-
background-color: rgba(0,0,0,0.4);
56+
background-color: #6d5eac;
5557
}
5658

5759
.sidebar .navbar-brand {
58-
font-size: 1.1rem;
60+
font-size: 1.25rem;
5961
}
6062

6163
.sidebar .oi {
62-
width: 2rem;
6364
font-size: 1.1rem;
6465
vertical-align: text-top;
6566
top: -2px;
67+
margin-right: 1rem;
6668
}
6769

6870
.sidebar .nav-item {
6971
font-size: 0.9rem;
70-
padding-bottom: 0.5rem;
7172
}
7273

73-
.sidebar .nav-item:first-of-type {
74+
/*.sidebar .nav-item:first-of-type {
7475
padding-top: 1rem;
7576
}
7677
7778
.sidebar .nav-item:last-of-type {
7879
padding-bottom: 1rem;
79-
}
80+
}*/
8081

8182
.sidebar .nav-item a {
82-
color: #d7d7d7;
83-
border-radius: 4px;
84-
height: 3rem;
83+
color: rgb(255, 255, 255);
84+
height: 4rem;
8585
display: flex;
8686
align-items: center;
8787
line-height: 3rem;
8888
}
8989

9090
.sidebar .nav-item a.active {
91-
background-color: rgba(255,255,255,0.25);
92-
color: white;
91+
background-color: #239b8f;
9392
}
9493

9594
.sidebar .nav-item a:hover {
96-
background-color: rgba(255,255,255,0.1);
97-
color: white;
95+
background-color: rgba(0,0,0,0.1);
96+
}
97+
98+
.sidebar .nav-item a.active:hover {
99+
background-color: #239b8f;
98100
}
99101

100102
.content {
101-
padding-top: 1.1rem;
103+
padding-top: 1.5rem;
102104
}
103105

104106
.navbar-toggler {

‎demo/WasmHost/wwwroot/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626

2727
<body>
2828
<app>
29-
<div class="pureCenter">
30-
<div class="loader"></div>
29+
<div class="pureCenter overlay light">
30+
<div class="loader light"></div>
3131
</div>
3232
</app>
3333

0 commit comments

Comments
 (0)