feat: player info layout

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor

@@ -13,11 +13,19 @@
                               }
     </h1>
     <div style="margin-top: 10px; margin-bottom: 20px;">
-        <div>
+        <div class="data-field">
-            <small>@Localize["Created"]: <b>@AccountInfo.CreatedAt.ToString("d") | @AccountInfo.CreatedAt.SinceTime(Localize)</b></small>
+            <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>
+        <div class="data-field">
-            @Localize["Last battle"]: <b>@AccountInfo.LastBattleTime.ConvertToLocalTime().ToString("g") | @AccountInfo.LastBattleTime.ConvertToLocalTime().SinceTime(Localize)</b>
+            <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 >

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoLayout.razor.css

@@ -1,4 +1,21 @@
 dates-section {
-    margin-top: 10px;
+  margin-top: 10px;
-    margin-bottom: 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;
 }

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">
+        <RadzenCard class="m-3" style="width: 350px;">
-            <table class="table" width="230px">
+            <table class="table" width="100%">
                 <tbody>
                 <tr>
                     <td>@Localize["Battles"]:</td>
@@ -34,37 +33,57 @@
                 </tr>
                 </tbody>
             </table>
-        </div>
+        </RadzenCard>
-        <div class="col-md-3 col-lg-3 align-items-center d-flex">
+        <RadzenCard class="m-3" style="width: 350px;">
-            <div style="width: 120px; margin: 3px;">
+            <h3 class="h5">@Localize["Most effective tank"]</h3>
-                @Localize["Most effective tank"]:
+            <div class="row">
-            </div>
+                <div class="col col-sm col-md col-lg col-xl">
-            @if (MostRelevantTank != null)
+                </div>
-            {
+                <div class="col col-sm col-md col-lg col-xl">
-                <TankCard Tank=@MostRelevantTank></TankCard>
+                    @if (MostRelevantTank != null)
-            }
+                    {
-        </div>
+                        <TankCard Tank=@MostRelevantTank></TankCard>
-        <div class="col-md-3 col-lg-3 align-items-center d-flex">
+                    }
-            <div style="width: 100px; margin: 3px;">
+                </div>
-                @Localize["Tank with Max XP"] (@AccountInfo.MaxXp.ToString("N0")):
+                <div class="col col-sm col-md col-lg col-xl">
-            </div>
+                </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>
 
-            @if (MaxFragsTank != null)
+            </div>
-            {
+        </RadzenCard>
-                <TankCard Tank=@MaxFragsTank></TankCard>
+        <RadzenCard class="m-3" style="width: 350px;">
-            }
+            <h3 class="h5">@Localize["Tank with Max XP"] (@AccountInfo.MaxXp.ToString("N0"))</h3>
-        </div>
+            <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]