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> <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> <p>
<b>CurrentCulture</b>: @CultureInfo.CurrentCulture <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
</p> </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> </div>
<DataGrid TItem="Item" <div id="ItemList" class="align-end">
Data="@items" <div>
ReadData="@OnReadData" <p>
TotalItems="@totalItem" List of items
PageSize="10" </p>
ShowPager @*SearchBar*@
Responsive>
<DataGridColumn TItem="Item" Field=""/> </div>
<DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
<DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image"> <DataGrid TItem="Item"
<DisplayTemplate> Data="@itemsInventory"
@if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png")) ReadData="@OnReadData"
{ TotalItems="@totalItem"
<img src="images/@(context.Name).png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/> PageSize="10"
} ShowPager
else Responsive>
{ <DataGridColumn TItem="Item" Field=""/>
<img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/> <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
} <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Image">
</DisplayTemplate> <DisplayTemplate>
</DataGridColumn> @if (File.Exists($"{WebHostEnvironment.WebRootPath}/images/{context.Name}.png"))
</DataGrid> {
<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> </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)); grid-template-columns: repeat(6,minmax(0,1fr));
gap: 10px; gap: 10px;
display: grid; display: grid;
width: 40%; 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