fix item grid not high enough

huww98 · Dec 25, 2023 · 4044dd3 · 4044dd3
1 parent d7ab9ff
commit 4044dd3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/src/components/ItemSelect.vue b/src/components/ItemSelect.vue
@@ -14,12 +14,12 @@
                 {{ t('建筑公式') }}
             </div>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid item">
             <BuildingIcon v-for="i of iconsLeft" :icon-id="itemIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2]}"
                 @click="selected(i)"/>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid item">
             <BuildingIcon v-for="i of iconsRight" :icon-id="itemIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2] - 7}"
                 @click="selected(i)"/>

diff --git a/src/components/RecipeSelect.vue b/src/components/RecipeSelect.vue
@@ -14,12 +14,12 @@
                 {{ t('建筑公式') }}
             </div>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid recipe">
             <BuildingIcon v-for="i of iconsLeft" :icon-id="recipeIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2]}"
                 @click="selected(i)"/>
         </div>
-        <div class="icon-grid">
+        <div class="icon-grid recipe">
             <BuildingIcon v-for="i of iconsRight" :icon-id="recipeIconId(i.id)" :key="i.id"
                 :style="{gridRow: i.grid[1], gridColumn: i.grid[2] - 7}"
                 @click="selected(i)"/>
@@ -73,9 +73,15 @@ const selected = (i: Recipe | null) => {
     @media screen and (max-width: 640px) {
         display: grid;
     }
-    grid-template: repeat(7, 1fr) / repeat(7, 1fr);
     --cell-size: 40px;
-    height: calc(7 * var(--cell-size));
+    &.recipe {
+        grid-template: repeat(7, 1fr) / repeat(7, 1fr);
+        height: calc(7 * var(--cell-size));
+    }
+    &.item {
+        grid-template: repeat(8, 1fr) / repeat(7, 1fr);
+        height: calc(8 * var(--cell-size));
+    }
     width: calc(7 * var(--cell-size));
 
     .icon {