From 17dd2c833c2d18b8ed4e0d99cb855b3810194a47 Mon Sep 17 00:00:00 2001
From: Mikhail Shabanov <dr.mboga@yahoo.com>
Date: Wed, 4 May 2022 16:29:29 +0200
Subject: [PATCH] feat: player info layout

---
 .../Pages/PlayerInfoLayout.razor              | 16 +++-
 .../Pages/PlayerInfoLayout.razor.css          | 21 ++++-
 .../Pages/PlayerInfoOverview.razor            | 83 ++++++++++++-------
 3 files changed, 82 insertions(+), 38 deletions(-)

diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor
index 68080cc..de5da6b 100644
--- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor
+++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor
@@ -13,11 +13,19 @@
                               }
     </h1>
     <div style="margin-top: 10px; margin-bottom: 20px;">
-        <div>
-            <small>@Localize["Created"]: <b>@AccountInfo.CreatedAt.ToString("d") | @AccountInfo.CreatedAt.SinceTime(Localize)</b></small>
+        <div class="data-field">
+            <div class="data-label">@Localize["Created"]:</div>
+            <div class="data-value">
+                <div> <b>@AccountInfo.CreatedAt.ToString("d")</b></div>
+                <div class="data-label">@AccountInfo.CreatedAt.SinceTime(Localize)</div>
+            </div>
         </div>
-        <div>
-            @Localize["Last battle"]: <b>@AccountInfo.LastBattleTime.ConvertToLocalTime().ToString("g") | @AccountInfo.LastBattleTime.ConvertToLocalTime().SinceTime(Localize)</b>
+        <div class="data-field">
+            <div class="data-label">@Localize["Last battle"]:</div>
+            <div class="data-value">
+                <div> <b>@AccountInfo.LastBattleTime.ConvertToLocalTime().ToString("g")</b></div>
+                <div class="data-label">@AccountInfo.LastBattleTime.ConvertToLocalTime().SinceTime(Localize)</div>
+            </div>
         </div>
     </div>
     <RadzenTabs >
diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor.css b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor.css
index af80559..08e7ab0 100644
--- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor.css
+++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor.css
@@ -1,4 +1,21 @@
 dates-section {
-    margin-top: 10px;
-    margin-bottom: 10px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+.data-field {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.data-label {
+  color: #b3b1ad;
+  font-size: small;
+}
+
+.data-value {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoOverview.razor b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoOverview.razor
index 1c89bdf..a1c452e 100644
--- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoOverview.razor
+++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoOverview.razor
@@ -1,10 +1,9 @@
 @using WotBlitzStatisticsPro.Blazor.Helpers
 @inject IStringLocalizer<App> Localize;
 
-<RadzenCard>
     <div class="row">
-        <div class="col-md-3 col-lg-3">
-            <table class="table" width="230px">
+        <RadzenCard class="m-3" style="width: 350px;">
+            <table class="table" width="100%">
                 <tbody>
                 <tr>
                     <td>@Localize["Battles"]:</td>
@@ -34,37 +33,57 @@
                 </tr>
                 </tbody>
             </table>
-        </div>
-        <div class="col-md-3 col-lg-3 align-items-center d-flex">
-            <div style="width: 120px; margin: 3px;">
-                @Localize["Most effective tank"]:
-            </div>
-            @if (MostRelevantTank != null)
-            {
-                <TankCard Tank=@MostRelevantTank></TankCard>
-            }
-        </div>
-        <div class="col-md-3 col-lg-3 align-items-center d-flex">
-            <div style="width: 100px; margin: 3px;">
-                @Localize["Tank with Max XP"] (@AccountInfo.MaxXp.ToString("N0")):
-            </div>
-            @if (MaxXpTank != null)
-            {
-                <TankCard Tank=@MaxXpTank></TankCard>
-            }
-        </div>
-        <div class="col-md-3 col-lg-3 align-items-center d-flex">
-            <div style="width: 100px; margin: 3px;">
-                @Localize["Tank with Max frags"] (@AccountInfo.MaxFrags):
-            </div>
+        </RadzenCard>
+        <RadzenCard class="m-3" style="width: 350px;">
+            <h3 class="h5">@Localize["Most effective tank"]</h3>
+            <div class="row">
+                <div class="col col-sm col-md col-lg col-xl">
+                </div>
+                <div class="col col-sm col-md col-lg col-xl">
+                    @if (MostRelevantTank != null)
+                    {
+                        <TankCard Tank=@MostRelevantTank></TankCard>
+                    }
+                </div>
+                <div class="col col-sm col-md col-lg col-xl">
+                </div>
 
-            @if (MaxFragsTank != null)
-            {
-                <TankCard Tank=@MaxFragsTank></TankCard>
-            }
-        </div>
+            </div>
+        </RadzenCard>
+        <RadzenCard class="m-3" style="width: 350px;">
+            <h3 class="h5">@Localize["Tank with Max XP"] (@AccountInfo.MaxXp.ToString("N0"))</h3>
+            <div class="row">
+                <div class="col col-sm col-md col-lg col-xl">
+                </div>
+                <div class="col col-sm col-md col-lg col-xl">
+                    @if (MaxXpTank != null)
+                    {
+                        <TankCard Tank=@MaxXpTank></TankCard>
+                    }
+                </div>
+                <div class="col col-sm col-md col-lg col-xl">
+                </div>
+
+            </div>
+        </RadzenCard>
+        <RadzenCard class="m-3" style="width: 350px;">
+            <h3 class="h5">@Localize["Tank with Max frags"] (@AccountInfo.MaxFrags)</h3>
+            <div class="row">
+                <div class="col col-sm col-md col-lg col-xl">
+                </div>
+                <div class="col col-sm col-md col-lg col-xl">
+                    @if (MaxFragsTank != null)
+                    {
+                        <TankCard Tank=@MaxFragsTank></TankCard>
+                    }
+                </div>
+                <div class="col col-sm col-md col-lg col-xl">
+                </div>
+
+            </div>
+        </RadzenCard>
     </div>
-</RadzenCard>
+
 
 @code {
     [Parameter]