chore: small screen tanks list sorting new stuff

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor

@@ -1,9 +1,54 @@
 @inherits PlayerInfoTanksListBase;
-Tanks Count: @TanksList.Count()
-<TankCard [email protected]() ></TankCard>
-<TankListItem [email protected]()></TankListItem>
-<TankListItem [email protected]()></TankListItem>
+@if (TanksList != null && TanksList.Count() > 0)
+{
+    <div class="filters">
+        <div @onclick="@(e => OnFilterClick(e, TanksSorting.LastBattle))">
+            <img class="filter-button" src="/icons/calendar.scale-200.png" />
+        </div>
+        <div @onclick="@(e => OnFilterClick(e, TanksSorting.Winrate))">
+            <img class="filter-button" src="/icons/details.wins.scale-200.png" />
+        </div>
+        <div @onclick="@(e => OnFilterClick(e, TanksSorting.Battles))">
+            <img class="filter-button" src="/icons/details.battles.scale-200.png" />
+        </div>
+    </div>
+    @sorting <span>ascending: @isSortAscending</span>
+    
+    <div class="tanks-list">
+        @foreach (var tank in TanksList)
+        {
+        <TankListItem Tank=@tank></TankListItem>
+        }
+    </div>
+}
+
 
 @code {
 
+    private enum TanksSorting
+    {
+        LastBattle,
+        Winrate,
+        Battles,
+        Damage,
+        Wn7,
+        Tier
+    }
+
+    private TanksSorting sorting = TanksSorting.LastBattle;
+
+    private bool isSortAscending = false;
+
+    private void OnFilterClick(MouseEventArgs e, TanksSorting sortingToApply)
+    {
+        if (sortingToApply != sorting)
+        {
+            sorting = sortingToApply;
+            isSortAscending = false;
+        }
+        else
+        {
+            isSortAscending = !isSortAscending;
+        }
+    }
 }

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;