Try to simplify box grid

codemonkey85 · Sep 26, 2023 · 8acafd9 · 8acafd9
1 parent 26749d6
commit 8acafd9
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 17 deletions.
diff --git a/Pkmds.Rcl/Components/BoxGrid.razor b/Pkmds.Rcl/Components/BoxGrid.razor
@@ -2,19 +2,16 @@
 
 @if (BoxEdit is not null)
 {
-    <MudGrid Spacing="1"
-             Justify="@Justify.Center"
-             Style="@(GridStyle)">
+    <div class="@BoxGridClass">
         @for (var i = 0; i < (AppState.SaveFile?.BoxSlotCount ?? 0); i++)
         {
             var slotNum = i;
             var pkm = BoxEdit[slotNum];
-            <MudItem xs="@(AppState.SaveFile is { BoxSlotCount: 30 } ? 2 : 3)"
-                     Style="width: 68px; height: 68px;">
-                <BoxSlotComponent BoxNumber="@BoxNumber"
-                                  SlotNumber="slotNum"
-                                  Pokemon="@pkm" />
-            </MudItem>
+
+            <BoxSlotComponent BoxNumber="@BoxNumber"
+                              SlotNumber="slotNum"
+                              Pokemon="@pkm" />
+
         }
-    </MudGrid>
+    </div>
 }
diff --git a/Pkmds.Rcl/Components/BoxGrid.razor.cs b/Pkmds.Rcl/Components/BoxGrid.razor.cs
@@ -8,11 +8,7 @@ public partial class BoxGrid : IDisposable
     [Parameter, EditorRequired]
     public int BoxNumber { get; set; }
 
-    private static int GridHeight => (56 + 4 + 5) * 6;
-
-    private int GridWidth => (68 + 4 + 5) * (AppState.SaveFile?.BoxSlotCount == 20 ? 4 : 6);
-
-    private string GridStyle => $"width: {GridWidth}px; height: {GridHeight}px;";
+    private string BoxGridClass => AppState.SaveFile?.BoxSlotCount == 20 ? "box-grid-20" : "box-grid-30";
 
     protected override void OnInitialized() =>
         RefreshService.OnAppStateChanged += StateHasChanged;

diff --git a/Pkmds.Rcl/Components/BoxGrid.razor.css b/Pkmds.Rcl/Components/BoxGrid.razor.css
@@ -0,0 +1,15 @@
+.box-grid-30 {
+    width: 480px;
+    height: 400px;
+    display: grid;
+    grid-template-columns: repeat(6, 80px);
+    grid-template-rows: repeat(5, 80px);
+}
+
+.box-grid-20 {
+    width: 320px;
+    height: 400px;
+    display: grid;
+    grid-template-columns: repeat(4, 80px);
+    grid-template-rows: repeat(5, 80px);
+}
diff --git a/Pkmds.Rcl/Components/SaveFileComponent.razor b/Pkmds.Rcl/Components/SaveFileComponent.razor
@@ -13,7 +13,7 @@
                      Height="50px" />
         <br />
         <MudSkeleton SkeletonType="SkeletonType.Rectangle"
-                     Width="462px"
+                     Width="480px"
                      Height="350px" />
     }
 }
@@ -31,7 +31,7 @@ else
              Justify="@Justify.FlexStart">
         <MudItem xs="12"
                  lg="6"
-                 Style="max-width: 462px;">
+                 Style="max-width: 480px;">
             <MudPaper Elevation="0">
                 <PokemonStorageComponent />
             </MudPaper>