Fixed text color on RecipeCard in RecipePrintView and implemented ingredient sections

[michael-genson]

This implements ingredient sections in the recipe print view and fixes the grey text in the recipe card.

The recipe in the editor:

Old implementation ignores ingredient sections:

New implementation groups ingredients by section:

[michael-genson]

I work mostly in C# and Python backend, so if I did something jank in my implementation let me know and I'm happy to revise... :)

[hay-kot]

I was playing with this the other day, I got it working mostly using CSS grid and span column.

    <!-- Ingredients -->
    <section>
      <v-card-title class="headline pl-0"> {{ $t("recipe.ingredients") }} </v-card-title>
      <div class="ingredient-grid">
        <template v-for="(ingredient, index) in recipe.recipeIngredient">
          <h4 v-if="ingredient.title" :key="`title-${index}`" class="ingredient-title mt-2">{{ ingredient.title }}</h4>
          <p :key="`ingredient-${index}`" v-html="parseText(ingredient)" />
        </template>
      </div>
    </section>

.ingredient-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 0.5rem;
}

.ingredient-title {
  grid-column: 1 / span 2;
}

I'm still getting a linter error, but that eliminates the need for the whole computed property I had that you fixed up.

[michael-genson]

Oh wow that's much cleaner! I had no idea CSS could auto-arrange items into a grid like that. The only other change I added was to make the total time, prep time, etc. black (it's transparent in the current branch so it looks light grey):

.print-container {
  display: none;
  background-color: white;
}
/* Makes all text solid black */
.print-container, .print-container >>> * {
  opacity: 1.0 !important;
  color: black !important;
}

But otherwise your new implementation is much cleaner than my JS... thing