From a97193ceeb273d232bfa0c0ddd3768382473d4fc Mon Sep 17 00:00:00 2001
From: Alexis DRAI <alexis.drai@etu.uca.fr>
Date: Sun, 26 Feb 2023 18:13:28 +0100
Subject: [PATCH] :lipstick: Fix style to allow dropping in the whole box

---
 blazor_lab/Components/InventoryItem.razor     |  4 +--
 blazor_lab/Components/InventoryItem.razor.css | 34 ++++++++++++-------
 2 files changed, 23 insertions(+), 15 deletions(-)

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)
     {
-        <div class="inventory-list-item side-by-side">
+        <div class="inventory-list-item">
             <img src="@($"data:image/png;base64,{Item.ImageBase64}")" alt="@Item.DisplayName" />
             <div class="item-name">@Item.DisplayName</div>
         </div>
@@ -17,8 +17,8 @@
                 <div class="slot-image">
                     <img src="@($"data:image/png;base64,{InventoryModel.ImageBase64}")" alt="@InventoryModel.ItemName" />
                 </div>
+                <div class="slot-count">@InventoryModel.NumberItem</div>
             }
-            <div class="slot-count">@InventoryModel.NumberItem</div>
         </div>
     }
 </div>
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;
+    }