Skip to content

Commit 5b19d30

Browse files
gvreddy04gvreddy04
committed
Add compatibility matrix and update loading UI in documentation
1 parent dba3f16 commit 5b19d30

4 files changed

Lines changed: 214 additions & 5 deletions

File tree

‎BlazorExpress.ChartJS.Demo.RCL/Pages/Docs/GettingStarted/GettingStartedDocumentation.razor‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@
1010
</SubTitleTemplate>
1111
</PageHero>
1212

13+
<section class="be-release-spotlight">
14+
<p class="be-release-kicker">Compatibility Matrix</p>
15+
<h2 class="be-release-title">Supported Tech Stack by Release</h2>
16+
<p class="be-release-copy">
17+
Pick the top row for new projects. Older rows are retained for teams upgrading from previous releases.
18+
</p>
19+
</section>
20+
1321
<div class="table-container">
1422
<table class="table is-bordered is-striped is-fullwidth">
1523
<thead>
@@ -43,6 +51,14 @@
4351
</table>
4452
</div>
4553

54+
<section class="be-release-spotlight be-release-spotlight--compact">
55+
<p class="be-release-kicker">Guides</p>
56+
<h3 class="be-release-title">Project Setup Documentation</h3>
57+
<p class="be-release-copy">
58+
Choose the setup guide that matches your hosting model and runtime.
59+
</p>
60+
</section>
61+
4662
<div class="table-container">
4763
<table class="table">
4864
<thead>

‎BlazorExpress.ChartJS.Demo.RCL/wwwroot/css/blazorexpress.chartjs.demo.rcl.css‎

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
--be-bulma-accent-rgb: 255, 228, 132;
99
--be-bulma-violet-rgb: 112.520718, 44.062154, 249.437846;
1010
--be-bulma-pink-rgb: 214, 51, 132;
11+
--be-premium-ink: #0f172a;
12+
--be-premium-mint: #0ea5a4;
13+
--be-premium-gold: #f59e0b;
14+
--be-premium-canvas: #f7fafc;
1115
}
1216

1317
[data-theme=light] {
@@ -121,3 +125,187 @@ h1:focus-visible {
121125
margin-top: .75rem;
122126
color: var(--bs-body-color) !important
123127
}
128+
129+
.be-loader-shell {
130+
min-height: 100vh;
131+
display: grid;
132+
place-items: center;
133+
padding: 1.5rem;
134+
background: radial-gradient(circle at 10% 15%, rgba(14, 165, 164, 0.16), transparent 36%), radial-gradient(circle at 85% 12%, rgba(245, 158, 11, 0.2), transparent 30%), linear-gradient(160deg, #f8fafc 0%, #e7eef8 55%, #f8fafc 100%);
135+
}
136+
137+
.be-loader-card {
138+
width: min(420px, 92vw);
139+
border: 1px solid rgba(15, 23, 42, 0.09);
140+
border-radius: 1.1rem;
141+
background: rgba(255, 255, 255, 0.75);
142+
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
143+
backdrop-filter: blur(10px);
144+
text-align: center;
145+
padding: 2rem 1.5rem;
146+
}
147+
148+
.be-loader-ring {
149+
width: 62px;
150+
height: 62px;
151+
margin: 0 auto 1rem auto;
152+
border: 3px solid rgba(15, 23, 42, 0.12);
153+
border-top-color: var(--be-premium-mint);
154+
border-right-color: var(--be-premium-gold);
155+
border-radius: 50%;
156+
animation: be-loader-spin 1s linear infinite;
157+
}
158+
159+
.be-loader-orbit {
160+
display: none;
161+
}
162+
163+
.be-loader-logo {
164+
filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.22));
165+
margin-bottom: 0.8rem;
166+
}
167+
168+
.be-loader-title {
169+
font-family: "Sora", "Segoe UI", sans-serif;
170+
font-size: 1.15rem;
171+
font-weight: 700;
172+
letter-spacing: 0.01em;
173+
color: var(--be-premium-ink);
174+
}
175+
176+
.be-loader-subtitle {
177+
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
178+
margin-top: 0.35rem;
179+
color: #344054;
180+
font-size: 0.96rem;
181+
display: inline-flex;
182+
align-items: center;
183+
gap: 0.5rem;
184+
}
185+
186+
.be-loader-inline-spinner {
187+
width: 0.9rem;
188+
height: 0.9rem;
189+
border-radius: 50%;
190+
border: 2px solid rgba(15, 23, 42, 0.2);
191+
border-top-color: var(--be-premium-mint);
192+
border-right-color: var(--be-premium-gold);
193+
animation: be-loader-spin 0.9s linear infinite;
194+
}
195+
196+
.be-loader-shell--option-b {
197+
background: radial-gradient(circle at 14% 18%, rgba(14, 165, 164, 0.2), transparent 34%), radial-gradient(circle at 86% 14%, rgba(245, 158, 11, 0.25), transparent 35%), linear-gradient(150deg, #f4f8ff 0%, #e6eefb 50%, #f8fbff 100%);
198+
}
199+
200+
.be-loader-card--option-b {
201+
position: relative;
202+
border-color: rgba(15, 23, 42, 0.11);
203+
box-shadow: 0 26px 70px rgba(2, 6, 23, 0.17);
204+
overflow: hidden;
205+
}
206+
207+
.be-loader-card--option-b::before {
208+
content: "";
209+
position: absolute;
210+
inset: 0;
211+
background: linear-gradient(120deg, rgba(14, 165, 164, 0.08), rgba(245, 158, 11, 0.08));
212+
pointer-events: none;
213+
}
214+
215+
.be-loader-card--option-b .be-loader-ring {
216+
display: none;
217+
}
218+
219+
.be-loader-card--option-b .be-loader-orbit {
220+
width: 122px;
221+
height: 122px;
222+
margin: 0 auto 0.95rem auto;
223+
display: grid;
224+
place-items: center;
225+
position: relative;
226+
border-radius: 50%;
227+
border: 1px solid rgba(15, 23, 42, 0.12);
228+
animation: be-loader-orbit 7s linear infinite;
229+
}
230+
231+
.be-loader-card--option-b .be-loader-logo {
232+
margin-bottom: 0;
233+
}
234+
235+
.be-loader-dot {
236+
position: absolute;
237+
width: 11px;
238+
height: 11px;
239+
border-radius: 50%;
240+
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.65);
241+
}
242+
243+
.be-loader-dot--a {
244+
top: 6px;
245+
left: 50%;
246+
transform: translateX(-50%);
247+
background: #0ea5a4;
248+
}
249+
250+
.be-loader-dot--b {
251+
bottom: 14px;
252+
left: 14px;
253+
background: #f59e0b;
254+
}
255+
256+
.be-loader-dot--c {
257+
bottom: 14px;
258+
right: 14px;
259+
background: #2563eb;
260+
}
261+
262+
.be-release-spotlight {
263+
margin: 0.25rem 0 1rem 0;
264+
padding: 1.1rem 1rem;
265+
border: 1px solid rgba(15, 23, 42, 0.08);
266+
border-radius: 0.9rem;
267+
background: linear-gradient(125deg, rgba(255, 255, 255, 0.95), rgba(246, 252, 255, 0.95));
268+
}
269+
270+
.be-release-spotlight--compact {
271+
margin-top: 1.4rem;
272+
}
273+
274+
.be-release-kicker {
275+
margin: 0;
276+
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
277+
font-size: 0.78rem;
278+
letter-spacing: 0.08em;
279+
text-transform: uppercase;
280+
color: #0f766e;
281+
font-weight: 600;
282+
}
283+
284+
.be-release-title {
285+
margin: 0.3rem 0 0.4rem 0;
286+
font-family: "Sora", "Segoe UI", sans-serif;
287+
color: #111827;
288+
font-size: clamp(1.05rem, 1.6vw, 1.28rem);
289+
}
290+
291+
.be-release-copy {
292+
margin: 0;
293+
color: #334155;
294+
line-height: 1.5;
295+
}
296+
297+
@keyframes be-loader-spin {
298+
to {
299+
transform: rotate(360deg);
300+
}
301+
}
302+
303+
@keyframes be-loader-orbit {
304+
from {
305+
transform: rotate(0deg);
306+
}
307+
308+
to {
309+
transform: rotate(360deg);
310+
}
311+
}

‎BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/appsettings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@
2020
"github_discussions": "//github.com/BlazorExpress/BlazorExpress.ChartJS/discussions",
2121
"stackoverflow": "//stackoverflow.com/questions/tagged/blazorexpress-chartjs"
2222
},
23-
"dotNetVersion": "10.0.0"
23+
"dotNetVersion": "9.0.0"
2424
}

‎BlazorExpress.ChartJS.Demo.WebAssembly/wwwroot/index.html‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-vs.min.css" integrity="sha512-Jn4HzkCnzA7Bc+lbSQHAMeen0EhSTy71o9yJbXZtQx9VvozKVBV/2zfR3VyuDFIxGvHgbOMMNvb80l+jxFBC1Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
2929
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
3030
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
31+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap" />
3132
<link rel="stylesheet" href="_content/BlazorExpress.Bulma/css/blazorexpress.bulma.css" asp-append-version="true" />
3233

3334
<link href="_content/BlazorExpress.ChartJS.Demo.RCL/css/blazorexpress.chartjs.demo.rcl.css" rel="stylesheet" asp-append-version="true" />
@@ -46,10 +47,14 @@
4647

4748
<body>
4849
<div id="app">
49-
<div class="bd-splash-icon">
50-
<div class="has-text-centered">
51-
<img src="logo.png" width="64" alt="Blazor Bootstrap - The BlazorExpress.ChartJs component library is a production-ready library built with Blazor and the Chart.js JavaScript library." />
52-
<div class="mt-2">Loading...</div>
50+
<div class="be-loader-shell" role="status" aria-live="polite" aria-label="Loading BlazorExpress.ChartJS demos">
51+
<div class="be-loader-card">
52+
<img class="be-loader-logo" src="logo.png" width="72" height="72" alt="BlazorExpress.ChartJS logo" />
53+
<div class="be-loader-title">BlazorExpress.ChartJS</div>
54+
<div class="be-loader-subtitle">
55+
<span class="be-loader-inline-spinner" aria-hidden="true"></span>
56+
<span>Loading premium chart demos...</span>
57+
</div>
5358
</div>
5459
</div>
5560
</div>

0 commit comments

Comments
 (0)