ui: changed ingredient auto grid to be more natural (#1578)

This commit is contained in:
Michael Genson 2022-08-19 14:42:06 -05:00 committed by GitHub
parent b092654b43
commit f4278737fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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;
} }