GonnaHetzMe/WotBlitzStatisticsBlazor
0
0 Fork 0
mirror of https://github.com/DrMboga/WotBlitzStatisticsBlazor.git synced 2026-10-21 02:17:20 +02:00
Code Issues Projects Releases Wiki Activity

feat: added Radzen layout

Browse Source
This commit is contained in:
Mikhail Shabanov committed 2021-04-03 15:43:31 +02:00
1 parent c7347e32f0
commit ec977c490a
9 files changed
+72 -207
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WotBlitzStatisticsPro.Blazor/Program.cs
+3 -4
View File
@@ -1,12 +1,9 @@
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using System;
using System.Collections.Generic;
using System.Net.Http;
using System.Text;
using System.Threading.Tasks;
using Radzen;
namespace WotBlitzStatisticsPro.Blazor
{
@@ -19,6 +16,8 @@ namespace WotBlitzStatisticsPro.Blazor
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<DialogService>();
await builder.Build().RunAsync();
}
}
WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor
+58 -8
View File
@@ -1,13 +1,63 @@
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<RadzenDialog />
<div class="main">
<div class="content px-4">
@Body
<RadzenHeader>
<ChildContent>
<div class="row justify-content-start align-items-center">
<div class="col-6 d-flex align-items-center">
<RadzenSidebarToggle Click="@(args => { sidebarExpanded = !sidebarExpanded; bodyExpanded = !bodyExpanded; })">
</RadzenSidebarToggle>
<RadzenLabel Text="WOT Blitz statistics">
</RadzenLabel>
</div>
</div>
</div>
</ChildContent>
</RadzenHeader>
<div style="width:100%">
<RadzenBody @ref="@body0" @bind-Expanded="@bodyExpanded">
<ChildContent>
<RadzenContentContainer Name="main">
@Body
</RadzenContentContainer>
</ChildContent>
</RadzenBody>
</div>
<RadzenSidebar @ref="@sidebar0" @bind-Expanded="@sidebarExpanded">
<ChildContent>
<NavMenu />
</ChildContent>
</RadzenSidebar>
<RadzenFooter>
<ChildContent>
<RadzenLabel Text="WOT Blitz statistics, Copyright &copy; 2021">
</RadzenLabel>
<RadzenLink Text="[source]" Path="https://github.com/DrMboga/WotBlitzStatisticsBlazor" Target="_blank" Style="margin-left:5px;vertical-align:bottom;" />
</ChildContent>
</RadzenFooter>
@code {
RadzenSidebar sidebar0;
RadzenBody body0;
bool sidebarExpanded = false;
bool bodyExpanded = true;
protected override void OnInitialized()
{
@*if (httpContextAccessor != null && httpContextAccessor.HttpContext != null &&
httpContextAccessor.HttpContext.Request != null && httpContextAccessor.HttpContext.Request.Headers.ContainsKey("User-Agent"))
{
var userAgent = httpContextAccessor.HttpContext.Request.Headers["User-Agent"].FirstOrDefault();
if (!string.IsNullOrEmpty(userAgent))
{
if (userAgent.Contains("iPhone") || userAgent.Contains("Android") || userAgent.Contains("Googlebot"))
{
sidebarExpanded = false;
bodyExpanded = true;
}
}
}*@
System.Threading.Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo("en-US");
}
}
WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor.css
-69
View File
@@ -1,70 +1 @@
.page {
position: relative;
display: flex;
flex-direction: column;
}
.main {
flex: 1;
}
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row ::deep a, .top-row .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
}
.top-row a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row:not(.auth) {
display: none;
}
.top-row.auth {
justify-content: space-between;
}
.top-row a, .top-row .btn-link {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.sidebar {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
}
.main > div {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor
+5 -36
View File
@@ -1,37 +1,6 @@
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href="">WotBlitzStatisticsPro.Blazor</a>
<button class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div>
<RadzenPanelMenu >
<RadzenPanelMenuItem Text="Home" Icon="home" Path="/"></RadzenPanelMenuItem>
<RadzenPanelMenuItem Text="Counter" Icon="add_circle" Path="counter"></RadzenPanelMenuItem>
</RadzenPanelMenu>
</div>
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
<ul class="nav flex-column">
<li class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
</li>
<li class="nav-item px-3">
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</li>
</ul>
</div>
@code {
private bool collapseNavMenu = true;
private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor.css
-61
View File
@@ -1,62 +1 @@
.navbar-toggler {
background-color: rgba(255, 255, 255, 0.1);
}
.top-row {
height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand {
font-size: 1.1rem;
}
.oi {
width: 2rem;
font-size: 1.1rem;
vertical-align: text-top;
top: -2px;
}
.nav-item {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type {
padding-top: 1rem;
}
.nav-item:last-of-type {
padding-bottom: 1rem;
}
.nav-item ::deep a {
color: #d7d7d7;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
}
.nav-item ::deep a.active {
background-color: rgba(255,255,255,0.25);
color: white;
}
.nav-item ::deep a:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
@media (min-width: 641px) {
.navbar-toggler {
display: none;
}
.collapse {
/* Never collapse the sidebar for wide screens */
display: block;
}
}
WotBlitzStatisticsPro.Blazor/WotBlitzStatisticsPro.Blazor.csproj
+1
View File
@@ -8,6 +8,7 @@
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.4" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.4" PrivateAssets="all" />
<PackageReference Include="Radzen.Blazor" Version="3.2.0" />
<PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
</ItemGroup>
WotBlitzStatisticsPro.Blazor/_Imports.razor
+2
View File
@@ -8,3 +8,5 @@
@using Microsoft.JSInterop
@using WotBlitzStatisticsPro.Blazor
@using WotBlitzStatisticsPro.Blazor.Shared
@using Radzen
@using Radzen.Blazor
WotBlitzStatisticsPro.Blazor/wwwroot/css/app.css
+1 -29
View File
@@ -1,35 +1,7 @@
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a, .btn-link {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
WotBlitzStatisticsPro.Blazor/wwwroot/index.html
+2
View File
@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>WotBlitzStatisticsPro</title>
<base href="/" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/dark.css">
<link href="css/app.css" rel="stylesheet" />
<link href="WotBlitzStatisticsPro.Blazor.styles.css" rel="stylesheet" />
<link href="manifest.json" rel="manifest" />
@@ -21,6 +22,7 @@
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<script>navigator.serviceWorker.register('service-worker.js');</script>
</body>