feat: media query added

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>

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

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));
 

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);
+    }
+}

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);
+        }
+    }
+}

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>
 

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;
+};