From ec977c490a539c7f858de832a9b9bb5f38d6ba79 Mon Sep 17 00:00:00 2001 From: Mikhail Shabanov Date: Sat, 3 Apr 2021 15:43:31 +0200 Subject: [PATCH] feat: added Radzen layout --- WotBlitzStatisticsPro.Blazor/Program.cs | 7 +- .../Shared/MainLayout.razor | 66 +++++++++++++++--- .../Shared/MainLayout.razor.css | 69 ------------------- .../Shared/NavMenu.razor | 41 ++--------- .../Shared/NavMenu.razor.css | 61 ---------------- .../WotBlitzStatisticsPro.Blazor.csproj | 1 + WotBlitzStatisticsPro.Blazor/_Imports.razor | 2 + .../wwwroot/css/app.css | 30 +------- .../wwwroot/index.html | 2 + 9 files changed, 72 insertions(+), 207 deletions(-) diff --git a/WotBlitzStatisticsPro.Blazor/Program.cs b/WotBlitzStatisticsPro.Blazor/Program.cs index 1ac513b..b13e694 100644 --- a/WotBlitzStatisticsPro.Blazor/Program.cs +++ b/WotBlitzStatisticsPro.Blazor/Program.cs @@ -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(); + await builder.Build().RunAsync(); } } diff --git a/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor b/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor index df597ca..7fd95f2 100644 --- a/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor +++ b/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor @@ -1,13 +1,63 @@ @inherits LayoutComponentBase -
-
- -
+ -
-
- @Body + + +
+
+ + + + +
-
+ + +
+ + + + @Body + + +
+ + + + + + + + + + + + + +@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"); + } +} \ No newline at end of file diff --git a/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor.css b/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor.css index 43c355a..8b13789 100644 --- a/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor.css +++ b/WotBlitzStatisticsPro.Blazor/Shared/MainLayout.razor.css @@ -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; - } -} diff --git a/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor b/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor index 5e1a856..14739c5 100644 --- a/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor +++ b/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor @@ -1,37 +1,6 @@ -
- WotBlitzStatisticsPro.Blazor - +
+ + + +
- -
-
    -
  • - - Home - -
    • -
  • - - Counter - -
    • -
  • - - Fetch data - -
    • -
-
- -@code { - private bool collapseNavMenu = true; - - private string NavMenuCssClass => collapseNavMenu ? "collapse" : null; - - private void ToggleNavMenu() - { - collapseNavMenu = !collapseNavMenu; - } -} diff --git a/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor.css b/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor.css index acc5f9f..8b13789 100644 --- a/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor.css +++ b/WotBlitzStatisticsPro.Blazor/Shared/NavMenu.razor.css @@ -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; - } -} diff --git a/WotBlitzStatisticsPro.Blazor/WotBlitzStatisticsPro.Blazor.csproj b/WotBlitzStatisticsPro.Blazor/WotBlitzStatisticsPro.Blazor.csproj index 7ca1260..3abf995 100644 --- a/WotBlitzStatisticsPro.Blazor/WotBlitzStatisticsPro.Blazor.csproj +++ b/WotBlitzStatisticsPro.Blazor/WotBlitzStatisticsPro.Blazor.csproj @@ -8,6 +8,7 @@ + diff --git a/WotBlitzStatisticsPro.Blazor/_Imports.razor b/WotBlitzStatisticsPro.Blazor/_Imports.razor index be08692..f94f664 100644 --- a/WotBlitzStatisticsPro.Blazor/_Imports.razor +++ b/WotBlitzStatisticsPro.Blazor/_Imports.razor @@ -8,3 +8,5 @@ @using Microsoft.JSInterop @using WotBlitzStatisticsPro.Blazor @using WotBlitzStatisticsPro.Blazor.Shared +@using Radzen +@using Radzen.Blazor diff --git a/WotBlitzStatisticsPro.Blazor/wwwroot/css/app.css b/WotBlitzStatisticsPro.Blazor/wwwroot/css/app.css index 82fc22a..3fe840c 100644 --- a/WotBlitzStatisticsPro.Blazor/wwwroot/css/app.css +++ b/WotBlitzStatisticsPro.Blazor/wwwroot/css/app.css @@ -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; diff --git a/WotBlitzStatisticsPro.Blazor/wwwroot/index.html b/WotBlitzStatisticsPro.Blazor/wwwroot/index.html index 6587382..808e263 100644 --- a/WotBlitzStatisticsPro.Blazor/wwwroot/index.html +++ b/WotBlitzStatisticsPro.Blazor/wwwroot/index.html @@ -6,6 +6,7 @@ WotBlitzStatisticsPro + @@ -21,6 +22,7 @@ 🗙
+