lucie.bedouret
/
blazorCourse
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

align items

Browse Source
master
Lilian BRETON 2 years ago
parent 6d1bbdff48
commit 1c9db4691a
2 changed files with 77 additions and 58 deletions
Show Stats Download Patch File Download Diff File

118
myBlazorApp/myBlazorApp/Pages/Inventory.razor
Unescape View File

@ -5,68 +5,72 @@
<h3>Inventory</h3>
<div class="inventory-items">
<InventoryItem Index="0" Item=@itemsInventory.ElementAt(0)/>
<InventoryItem Index="1" />
<InventoryItem Index="2" />
<InventoryItem Index="3" />
<InventoryItem Index="4" />
<InventoryItem Index="5" />
<InventoryItem Index="6" />
<InventoryItem Index="7" />
<InventoryItem Index="8" />
<InventoryItem Index="9" />
<InventoryItem Index="10" />
<InventoryItem Index="11" />
<InventoryItem Index="12" />
<InventoryItem Index="13" />
<InventoryItem Index="14" />
<InventoryItem Index="15" />
<InventoryItem Index="16" />
<InventoryItem Index="17" />
</div>
<div class="css-grid">
@foreach (var item in itemsInventory)
{
<CraftingItem Item="item" NoDrop="true" />
}
<p>
<b>CurrentCulture</b>: @CultureInfo.CurrentCulture
</p>
</div>
<div class="body">
<div class="align-start">
<div class="inventory-items">
<InventoryItem Index="0" />
<InventoryItem Index="1" />
<InventoryItem Index="2" />
<InventoryItem Index="3" />
<InventoryItem Index="4" />
<InventoryItem Index="5" />
<InventoryItem Index="6" />
<InventoryItem Index="7" />
<InventoryItem Index="8" />
<InventoryItem Index="9" />
<InventoryItem Index="10" />
<InventoryItem Index="11" />
<InventoryItem Index="12" />
<InventoryItem Index="13" />
<InventoryItem Index="14" />
<InventoryItem Index="15" />
<InventoryItem Index="16" />
<InventoryItem Index="17" />
</div>
</div>
<div class="css-grid">
@*@foreach (var item in itemsInventory)
{
<CraftingItem Item="item" NoDrop="true" />
}*@
<div id="ItemList">
<div>
<p>
List of items
</p>
@*SearchBar*@
</div>
<DataGrid TItem="Item"
Data="@items"
ReadData="@OnReadData"
TotalItems="@totalItem"
PageSize="10"
ShowPager
Responsive>
<DataGridColumn TItem="Item" Field=""/>
<DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
<DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
<DisplayTemplate>
@if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
{
<img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
}
else
{
<img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
}
</DisplayTemplate>
</DataGridColumn>
</DataGrid>
<div id="ItemList" class="align-end">
<div>
<p>
List of items
</p>
@*SearchBar*@
</div>
<DataGrid TItem="Item"
Data="@itemsInventory"
ReadData="@OnReadData"
TotalItems="@totalItem"
PageSize="10"
ShowPager
Responsive>
<DataGridColumn TItem="Item" Field=""/>
<DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
<DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
<DisplayTemplate>
@if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
{
<img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
}
else
{
<img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
}
</DisplayTemplate>
</DataGridColumn>
</DataGrid>
</div>
</div>

17
myBlazorApp/myBlazorApp/Pages/Inventory.razor.css
Unescape View File

@ -1,6 +1,21 @@
.inventory-items {
.body {
display: flex;
}
.inventory-items {
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 10px;
display: grid;
width: 40%;
}
.align-start {
align-items: flex-start;
justify-content: start
}
.align-end {
align-content: flex-end;
justify-content: end;
width: 400px;
}
Write Preview
Loading…
Cancel
Save