css

3 years ago · 9a86d5f669
parent 9cb1d36242
commit 9a86d5f669
4 changed files with 44 additions and 35 deletions
--- a/Blazor/Blazor/Components/Inventory.razor
+++ b/Blazor/Blazor/Components/Inventory.razor
@ -1,7 +1,8 @@
@using Models;

-<h3>Inventory</h3>
 <CascadingValue Value="@this">
+    <div id="master">
+        <div class="inventory">
            <div class="css-grid">
                @for(int i = 0; i<Models.InventoryList.size;i++)
                {
@ -15,12 +16,18 @@
                    }
                }
            </div>
-    <div class="col-12">
+
+
            <div>Actions</div>
                <div class="actions" id="actions">
            </div>
+
        </div>

+        <div class="inventory-list">
            <InventoryList/>
+        </div>
+    </div>
+
 </CascadingValue>

--- a/Blazor/Blazor/Components/Inventory.razor.css
+++ b/Blazor/Blazor/Components/Inventory.razor.css
@ -1,8 +1,22 @@
-.css-grid {
+.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 {
--- a/Blazor/Blazor/Components/InventoryList.razor
+++ b/Blazor/Blazor/Components/InventoryList.razor
@ -1,5 +1,4 @@
@using Blazor.Models
-<h3>Inventory Item List</h3>

 <DataGrid TItem="Item"
          Data="@items"
--- a/Blazor/Blazor/Pages/InventoryPage.razor
+++ b/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>