mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-06-03 13:44:55 -04:00
ui: changed ingredient auto grid to be more natural (#1578)
This commit is contained in:
parent
b092654b43
commit
f4278737fb
@ -22,7 +22,7 @@
|
|||||||
:key="`ingredient-section-${sectionIndex}`"
|
:key="`ingredient-section-${sectionIndex}`"
|
||||||
class="print-section"
|
class="print-section"
|
||||||
>
|
>
|
||||||
<div class="ingredient-grid">
|
<div class="ingredient-grid" :style="{gridTemplateRows:`repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, 1fr)`}">
|
||||||
<template v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients">
|
<template v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients">
|
||||||
<h4 v-if="ingredient.title" :key="`ingredient-title-${ingredientIndex}`" class="ingredient-title mt-2">
|
<h4 v-if="ingredient.title" :key="`ingredient-title-${ingredientIndex}`" class="ingredient-title mt-2">
|
||||||
{{ ingredient.title }}
|
{{ ingredient.title }}
|
||||||
@ -245,6 +245,7 @@ p {
|
|||||||
|
|
||||||
.ingredient-grid {
|
.ingredient-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-gap: 0.5rem;
|
grid-gap: 0.5rem;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user