feat: tanks list for small screens approvements

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor

@@ -1,9 +1,33 @@
 @inherits PlayerInfoTanksListBase;
-Tanks Count: @TanksList.Count()
+@if (TanksList != null && TanksList.Count() > 0)
-<TankCard [email protected]() ></TankCard>
+{
-<TankListItem [email protected]()></TankListItem>
+    <div class="filters">
-<TankListItem [email protected]()></TankListItem>
+        <div @onclick="@(e => OnFilterClick(e, "last battle"))">
+            <img class="filter-button" src="/icons/calendar.scale-200.png" />
+        </div>
+        <div @onclick="@(e => OnFilterClick(e, "winrate"))">
+            <img class="filter-button" src="/icons/details.wins.scale-200.png" />
+        </div>
+        <div @onclick="@(e => OnFilterClick(e, "battles"))">
+            <img class="filter-button" src="/icons/details.battles.scale-200.png" />
+        </div>
+    </div>
+    @filter
+    <div class="tanks-list">
+        @foreach (var tank in TanksList)
+        {
+        <TankListItem Tank=@tank></TankListItem>
+        }
+    </div>
+}
+
 
 @code {
 
+    private string filter;
+
+    private void OnFilterClick(MouseEventArgs e, string filterToApply)
+    {
+        filter = filterToApply;
+    }
 }

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor.css

@@ -0,0 +1,17 @@
+.tanks-list {
+    height: 350px;
+    overflow-y: scroll;
+}
+
+.filters {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.filter-button {
+    min-height: 24px;
+    min-width: 24px;
+    width: 24px;
+    height: 24px;
+}

WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor

@@ -2,7 +2,8 @@
 @inject IStringLocalizer<App> Localize;
 
 <div class="tank-list-item" >
-    <div class="tank-image" style="background-image: url('@Tank.TankNationId.NationAsset()')">
+    <div class="tank-image" >
+        <div class="tank-flag-background" style="background-image: url('@Tank.TankNationId.NationAsset()')"></div>
         <div class="tank-tier">
             @if (Tank.IsPremium)
             {

WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor.css

@@ -4,10 +4,11 @@
     justify-content: flex-start;
     width: 100%;
     background-color: #3a474d;
-    margin-top: 2px;
+    margin-top: 5px;
     font-size: 12px;
 }
 
+
 .tank-image {
     position: relative;
     width: 120px;
@@ -18,6 +19,15 @@
     flex-direction: row;
 }
 
+.tank-flag-background {
+    /*filter: grayscale(60%);*/
+    filter: blur(1.5px);
+    position: absolute;
+    width: 120px;
+    min-width: 120px;
+    height: 70px;
+}
+
 .tank-tier {
     position: absolute;
     left: 5px;