Merge remote-tracking branch 'origin/bluff'

myBlazorApp/myBlazorApp/Pages/Inventory.razor

@@ -13,28 +13,44 @@
         <h3>List of Items</h3>
         @*SearchBar*@
 
+
+<p>
+    <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
+</p>
+
+
     </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="@items"
-                @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>

myBlazorApp/myBlazorApp/Pages/Inventory.razor.css

@@ -1,6 +1,21 @@
-.inventory-items {
+.body {
+    display: flex;
+}
+
+.inventory-items {
     grid-template-columns: repeat(6,minmax(0,1fr));
     gap: 10px;
     display: grid;
     width: 40%;
 }
+
+.align-start {
+    align-items: flex-start;
+    justify-content: start
+}
+
+.align-end { 
+    align-content: flex-end;
+    justify-content: end;
+    width: 400px;
+}