css

Blazor/Blazor/Components/Inventory.razor

@@ -1,26 +1,33 @@
 @using Models;
 
-<h3>Inventory</h3>
 <CascadingValue Value="@this">
-    <div class="css-grid">
-        @for(int i = 0; i<Models.InventoryList.size;i++)
-        {
-            @if (inventory.inventoryItems[i] != null)
-            {
-                <ItemInventory items="@inventory.inventoryItems[i]" Index="@i" NoDrop=true />
-            }
-            else
-            {
-                <ItemInventory items="@inventory.inventoryItems[i]" Index="@i"/>
-            }
-        }
-    </div>
-    <div class="col-12">
-        <div>Actions</div>
-        <div class="actions" id="actions">
+    <div id="master">
+        <div class="inventory">
+            <div class="css-grid">
+                @for(int i = 0; i<Models.InventoryList.size;i++)
+                {
+                    @if (inventory.inventoryItems[i] != null)
+                    {
+                        <ItemInventory items="@inventory.inventoryItems[i]" Index="@i" NoDrop=true />
+                    }
+                    else
+                    {
+                        <ItemInventory items="@inventory.inventoryItems[i]" Index="@i"/>
+                    }
+                }
+            </div>
+
+
+            <div>Actions</div>
+                <div class="actions" id="actions">
+            </div>
+
+        </div>
+
+        <div class="inventory-list">
+            <InventoryList/>
         </div>
     </div>
 
-    <InventoryList/>
 </CascadingValue>
 

Blazor/Blazor/Components/Inventory.razor.css

@@ -1,8 +1,22 @@
-.css-grid {
-    grid-template-columns: repeat(6,minmax(0,1fr));
+.inventory-list {
+    width: 40%;
+}
+
+.inventory {
+    width: 40%;
+}
+
+.css-grid {
+    grid-template-columns: repeat(6, minmax(0,1fr));
     gap: 10px;
     display: grid;
-    width: 40%;
+}
+
+#master {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
 }
 
 .actions {

Blazor/Blazor/Components/InventoryList.razor

@@ -1,5 +1,4 @@
 @using Blazor.Models
-<h3>Inventory Item List</h3>
 
 <DataGrid TItem="Item"
           Data="@items"

Blazor/Blazor/Pages/InventoryPage.razor

@@ -1,19 +1,8 @@
 @page "/inventory"
 @using Blazor.Components
 
-<PageTitle>Counter</PageTitle>
+<PageTitle>Inventory</PageTitle>
 
 <h1>Inventory</h1>
 
-<div id="master">
-    <div class="inventory">
-        <span>
-            <Inventory/>
-        </span>
-    </div>
-
-
-    <div class="inventory-list">
-        <InventoryList/>
-    </div>
-</div>
+<Inventory/>