GonnaHetzMe/WotBlitzStatisticsBlazor
0
0 Fork 0
mirror of https://github.com/DrMboga/WotBlitzStatisticsBlazor.git synced 2026-10-21 10:27:18 +02:00
Code Issues Projects Releases Wiki Activity

feat: mobile tank list item ready

Browse Source
This commit is contained in:
Mikhail Shabanov committed 2021-12-01 16:06:56 +01:00
1 parent 0a73003005
commit 3c7d8bf4a8
4 files changed
+145 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksList.razor
+1 -1
View File
@@ -52,7 +52,7 @@
<RadzenDataGrid AllowFiltering="true"
AllowColumnResize="true"
FilterMode="FilterMode.Simple"
PageSize="10"
PageSize="20"
AllowPaging="true"
AllowSorting="true"
Data="@FilteredTankList"
WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksListSmall.razor
+3 -2
View File
@@ -1,7 +1,8 @@
@inherits PlayerInfoTanksListBase;
<h3>PlayerInfoTanksListSmall</h3>
Tanks Count: @TanksList.Count()
<TankCard [email protected]() ></TankCard>
<TankListItem [email protected]()></TankListItem>
<TankListItem [email protected]()></TankListItem>
@code {
WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor
+62
View File
@@ -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 [email protected] 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; }
}
WotBlitzStatisticsPro.Blazor/Pages/TankListItem.razor.css
+79
View File
@@ -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;
}