From d3e1e52e199f687cc7f15498bb05d3faea8b831d Mon Sep 17 00:00:00 2001
From: Michael Shabanov <shabanov.mikhail@gmail.com>
Date: Mon, 25 Oct 2021 18:34:55 +0300
Subject: [PATCH] feat: media query added

---
 .../Pages/PlayerInfoLayout.razor              |  1 +
 .../Pages/PlayerInfoLayoutBase.cs             |  7 +++++++
 WotBlitzStatisticsPro.Blazor/Program.cs       |  1 +
 .../Services/IMediaQueriesService.cs          |  9 +++++++++
 .../Services/MediaQueriesService.cs           | 20 +++++++++++++++++++
 .../wwwroot/index.html                        |  1 +
 .../wwwroot/media-queries.js                  |  6 ++++++
 7 files changed, 45 insertions(+)
 create mode 100644 WotBlitzStatisticsPro.Blazor/Services/IMediaQueriesService.cs
 create mode 100644 WotBlitzStatisticsPro.Blazor/Services/MediaQueriesService.cs
 create mode 100644 WotBlitzStatisticsPro.Blazor/wwwroot/media-queries.js

diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor
index dfaa1a4..1225187 100644
--- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor
+++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor
@@ -4,6 +4,7 @@
 <RadzenProgressBar Value="100" ShowValue="false" Mode="ProgressBarMode.Indeterminate"
                    Visible="@(AccountInfo == null)"
                    Style="width: 100%; margin-top: 10px;" />
+SmallScreen = @SmallScreen
 @if (AccountInfo != null)
 {
     <h1>
diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayoutBase.cs b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayoutBase.cs
index bc965eb..9fe4ff3 100644
--- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayoutBase.cs
+++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayoutBase.cs
@@ -22,6 +22,9 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
         [Inject]
         public INotificationsService Notifications { get; set; }
 
+        [Inject]
+        public IMediaQueriesService MediaQueriesService { get; set; }
+
 
         [Parameter]
         public long AccountId { get; set; }
@@ -32,12 +35,16 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
 
         public IReadOnlyList<ISection> AchievementsBySection { get; set; }
 
+        public bool SmallScreen { get; set; }   
+
         protected override async Task OnInitializedAsync()
         {
             var loggedInInfo = await LocalStorageService.GetItemAsync<LoginInfo>(Constants.LoginInfoLocalStorageKey);
             var settings = await LocalStorageService.ReadSettings();
             CurrentRealmType = settings.RealmType;
 
+            SmallScreen = await MediaQueriesService.IsScreenWidthLessThen(1000);
+
             try
             {
                 // Maybe add refresh button instead of calling mutation each time
diff --git a/WotBlitzStatisticsPro.Blazor/Program.cs b/WotBlitzStatisticsPro.Blazor/Program.cs
index e9d8343..a815dd6 100644
--- a/WotBlitzStatisticsPro.Blazor/Program.cs
+++ b/WotBlitzStatisticsPro.Blazor/Program.cs
@@ -30,6 +30,7 @@ namespace WotBlitzStatisticsPro.Blazor
             builder.Services.AddScoped<TooltipService>();
             builder.Services.AddScoped<ISearchDialogService, SearchDialogService>();
             builder.Services.AddScoped<IChartsService, ChartService>();
+            builder.Services.AddScoped<IMediaQueriesService, MediaQueriesService>();
 
             builder.Services.AddMediatR(typeof(Program));
 
diff --git a/WotBlitzStatisticsPro.Blazor/Services/IMediaQueriesService.cs b/WotBlitzStatisticsPro.Blazor/Services/IMediaQueriesService.cs
new file mode 100644
index 0000000..58c4dd2
--- /dev/null
+++ b/WotBlitzStatisticsPro.Blazor/Services/IMediaQueriesService.cs
@@ -0,0 +1,9 @@
+using System.Threading.Tasks;
+
+namespace WotBlitzStatisticsPro.Blazor.Services
+{
+    public interface IMediaQueriesService
+    {
+        ValueTask<bool> IsScreenWidthLessThen(long widthInPx);
+    }
+}
diff --git a/WotBlitzStatisticsPro.Blazor/Services/MediaQueriesService.cs b/WotBlitzStatisticsPro.Blazor/Services/MediaQueriesService.cs
new file mode 100644
index 0000000..47eb2d9
--- /dev/null
+++ b/WotBlitzStatisticsPro.Blazor/Services/MediaQueriesService.cs
@@ -0,0 +1,20 @@
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+
+namespace WotBlitzStatisticsPro.Blazor.Services
+{
+    public class MediaQueriesService : IMediaQueriesService
+    {
+        private readonly IJSRuntime _jsRuntime;
+
+        public MediaQueriesService(IJSRuntime jsRuntime)
+        {
+            _jsRuntime = jsRuntime;
+        }
+
+        public ValueTask<bool> IsScreenWidthLessThen(long widthInPx)
+        {
+            return _jsRuntime.InvokeAsync<bool>("mediaQueries.IsScreenWidthLessThen", widthInPx);
+        }
+    }
+}
diff --git a/WotBlitzStatisticsPro.Blazor/wwwroot/index.html b/WotBlitzStatisticsPro.Blazor/wwwroot/index.html
index c461187..d70d6e4 100644
--- a/WotBlitzStatisticsPro.Blazor/wwwroot/index.html
+++ b/WotBlitzStatisticsPro.Blazor/wwwroot/index.html
@@ -26,6 +26,7 @@
     <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
     <script src="echarts/echarts.js"></script>
     <script src="echarts/echarts-interop.js"></script>
+    <script src="media-queries.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
 </body>
 
diff --git a/WotBlitzStatisticsPro.Blazor/wwwroot/media-queries.js b/WotBlitzStatisticsPro.Blazor/wwwroot/media-queries.js
new file mode 100644
index 0000000..77458b7
--- /dev/null
+++ b/WotBlitzStatisticsPro.Blazor/wwwroot/media-queries.js
@@ -0,0 +1,6 @@
+var mediaQueries = mediaQueries || {};
+
+mediaQueries.IsScreenWidthLessThen = function (width) {
+    let mql = window.matchMedia(`(max-width: ${width}px)`);
+    return mql.matches;
+};
\ No newline at end of file