diff --git a/blazor_lab/Components/InventoryItem.razor b/blazor_lab/Components/InventoryItem.razor
index 3f61346..27c0028 100644
--- a/blazor_lab/Components/InventoryItem.razor
+++ b/blazor_lab/Components/InventoryItem.razor
@@ -4,7 +4,7 @@
@ondrop="@OnDrop">
@if (Item is not null && IsInList)
{
-
+
@Item.DisplayName
@@ -17,8 +17,8 @@
+
@InventoryModel.NumberItem
}
-
@InventoryModel.NumberItem
}
diff --git a/blazor_lab/Components/InventoryItem.razor.css b/blazor_lab/Components/InventoryItem.razor.css
index e393170..43cae0e 100644
--- a/blazor_lab/Components/InventoryItem.razor.css
+++ b/blazor_lab/Components/InventoryItem.razor.css
@@ -1,4 +1,6 @@
.inventory-list-item {
+ display: flex;
+ flex-direction: row;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
@@ -12,20 +14,26 @@
margin-right: 10px;
}
-.slot-image {
- font-weight : bold;
- font-size: small;
+.inventory-grid-item {
+ display: flex;
+ flex-grow: 1;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ border: 1px solid #ddd;
+ height: 64px;
+ width: 64px;
}
-.slot-count {
- font-size: small;
-}
+ .inventory-grid-item .slot-image {
+ font-weight: bold;
+ font-size: small;
+ }
-.item-name {
- font-weight: bold;
-}
+ .inventory-grid-item .slot-count {
+ font-size: small;
+ }
-.side-by-side {
- display: flex;
- flex-direction: row;
-}
+ .inventory-grid-item .item-name {
+ font-weight: bold;
+ }