From 3c7d8bf4a86b106b642f1f5b1d52ca0510961513 Mon Sep 17 00:00:00 2001
From: Mikhail Shabanov <dr.mboga@yahoo.com>
Date: Wed, 1 Dec 2021 16:06:56 +0100
Subject: [PATCH] feat: mobile tank list item ready

---
 .../Pages/PlayerInfoTanksList.razor           |  2 +-
 .../Pages/PlayerInfoTanksListSmall.razor      |  5 +-
 .../Pages/TankListItem.razor                  | 62 +++++++++++++++
 .../Pages/TankListItem.razor.css              | 79 +++++++++++++++++++
 4 files changed, 145 insertions(+), 3 deletions(-)
 create mode 100644 WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor
 create mode 100644 WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor.css

diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksList.razor b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksList.razor
index 64748b3..ae1c7ac 100644
--- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksList.razor
+++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksList.razor
@@ -52,7 +52,7 @@
 <RadzenDataGrid AllowFiltering="true"
                 AllowColumnResize="true"
                 FilterMode="FilterMode.Simple"
-                PageSize="10"
+                PageSize="20"
                 AllowPaging="true"
                 AllowSorting="true"
                 Data="@FilteredTankList"
diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor
index 3a0c215..484f3e5 100644
--- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor
+++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor
@@ -1,7 +1,8 @@
 @inherits PlayerInfoTanksListBase;
-
-<h3>PlayerInfoTanksListSmall</h3>
 Tanks Count: @TanksList.Count()
+<TankCard Tank=@TanksList.First() ></TankCard>
+<TankListItem Tank=@TanksList.First()></TankListItem>
+<TankListItem Tank=@TanksList.Last()></TankListItem>
 
 @code {
 
diff --git a/WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor b/WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor
new file mode 100644
index 0000000..2f1d207
--- /dev/null
+++ b/WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor
@@ -0,0 +1,62 @@
+@using WotBlitzStatisticsPro.Blazor.Helpers
+@inject IStringLocalizer<App> Localize;
+
+<div class="tank-list-item" >
+    <div class="tank-image" style="background-image: url('@Tank.TankNationId.NationAsset()')">
+        <div class="tank-tier">
+            @if (Tank.IsPremium)
+            {
+
+                <b style="color: @Constants.ClanTagColor; font-size: 16px"> @Tank.Tier.RomanNumber()</b>
+            }
+            else
+            {
+                <b style="font-size: 16px"> @Tank.Tier.RomanNumber()</b>
+            }
+        </div>
+        <img src="@Tank.MarkOfMastery.IconAsset()" class="mastery-image" />
+        <img src=@Tank.PreviewImage class="tank-preview" />
+        <img src="@Tank.TankTypeId.TankTypeAsset(Tank.IsPremium)" class="tank-type" />
+    </div>
+    <div class="tank-info">
+        <div class="tank-info-first-row">
+            <div>
+                @if (Tank.IsPremium)
+                {
+                    <span style="color: @Constants.ClanTagColor; font-size: 14px">
+                        @Tank.Name
+                    </span>
+                }
+                else
+                {
+                    <span style="font-size: 14px">@Tank.Name</span>
+                }
+                </div>
+            <div>
+                Wn7: @Tank.Wn7.ToString("N0")
+                <div style="background-color: @Tank.Wn7.Wn7ScaleColor(); width: 100%; height: 3px; margin-right: 2px;"></div>
+            </div>
+        </div>
+        <div class="tank-info-second-row">
+            <div>
+                <img src="icons/details.battles.scale-200.png" class="icon-scale" /> @Tank.Battles.ToString("N0")
+            </div>
+            <div>
+                <img src="icons/details.wins.scale-200.png" class="icon-scale" /> <b>@Tank.WinRate.ToString("N0")%</b>
+            </div>
+            <div>
+                <img src="icons/damage.scale-200.png" class="icon-scale" /> @Tank.AvgDamage.ToString("N0")
+            </div>
+            <div>
+                <img src="icons/xp.avg.scale-200.png" class="icon-scale" /> @Tank.AvgXp.ToString("N0")
+            </div>
+        </div>
+        <div style="background-color: @Tank.WinRate.ScaleColor(); width: 100%; height: 5px; margin-right: 2px;"></div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public ITank Tank { get; set; }
+
+}
diff --git a/WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor.css b/WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor.css
new file mode 100644
index 0000000..3d384ae
--- /dev/null
+++ b/WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor.css
@@ -0,0 +1,79 @@
+.tank-list-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 100%;
+    background-color: #3a474d;
+    margin-top: 2px;
+    font-size: 12px;
+}
+
+.tank-image {
+    position: relative;
+    width: 120px;
+    min-width: 120px;
+    height: 70px;
+    justify-content: flex-end;
+    display: flex;
+    flex-direction: row;
+}
+
+.tank-tier {
+    position: absolute;
+    left: 5px;
+    top: 0px;
+    width: 24px;
+    height: 24px;
+}
+
+.tank-preview {
+    position: absolute;
+    left: 25px;
+    top: 0px;
+    width: 95px;
+    height: 70px;
+}
+
+.tank-type {
+    position: absolute;
+    left: 0px;
+    top: 46px;
+    width: 24px;
+    height: 24px;
+}
+
+.mastery-image {
+    position: absolute;
+    left: 96px;
+    top: 46px;
+    width: 24px;
+    height: 24px;
+}
+
+.tank-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
+.tank-info-first-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.tank-info-second-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    justify-content: space-between;
+}
+
+.icon-scale {
+    width: 20px;
+    height: 20px;
+}
\ No newline at end of file