add print-view component (#407)

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/Recipe/PrintView.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="container print">
+    <div>
+      <h1>
+        <svg class="icon" viewBox="0 0 24 24">
+          <path
+            fill="#E58325"
+            d="M8.1,13.34L3.91,9.16C2.35,7.59 2.35,5.06 3.91,3.5L10.93,10.5L8.1,13.34M13.41,13L20.29,19.88L18.88,21.29L12,14.41L5.12,21.29L3.71,19.88L13.36,10.22L13.16,10C12.38,9.23 12.38,7.97 13.16,7.19L17.5,2.82L18.43,3.74L15.19,7L16.15,7.94L19.39,4.69L20.31,5.61L17.06,8.85L18,9.81L21.26,6.56L22.18,7.5L17.81,11.84C17.03,12.62 15.77,12.62 15,11.84L14.78,11.64L13.41,13Z"
+          />
+        </svg>
+        {{ recipe.name }}
+      </h1>
+    </div>
+    <div class="time-container">
+      <RecipeTimeCard :prepTime="recipe.prepTime" :totalTime="recipe.totalTime" :performTime="recipe.performTime" />
+    </div>
+    <v-btn
+      v-if="recipe.recipeYield"
+      dense
+      small
+      :hover="false"
+      type="label"
+      :ripple="false"
+      elevation="0"
+      color="secondary darken-1"
+      class="rounded-sm static"
+    >
+      {{ recipe.recipeYield }}
+    </v-btn>
+    <div>
+      <vue-markdown :source="recipe.description"> </vue-markdown>
+      <h2>{{ $t("recipe.ingredients") }}</h2>
+      <ul>
+        <li v-for="(ingredient, index) in recipe.recipeIngredient" :key="index">
+          <v-icon>
+            mdi-checkbox-blank-outline
+          </v-icon>
+          <p>{{ ingredient }}</p>
+        </li>
+      </ul>
+    </div>
+    <div>
+      <h2>{{ $t("recipe.instructions") }}</h2>
+      <div v-for="(step, index) in recipe.recipeInstructions" :key="index">
+        <h2 v-if="step.title">{{ step.title }}</h2>
+        <div class="ml-5">
+          <h3>{{ $t("recipe.step-index", { step: index + 1 }) }}</h3>
+          <vue-markdown :source="step.text"> </vue-markdown>
+        </div>
+      </div>
+
+      <br />
+      <v-divider v-if="recipe.notes.length > 0" class="mb-5 mt-0"></v-divider>
+
+      <div v-for="(note, index) in recipe.notes" :key="index + 'note'">
+        <h3>{{ note.title }}</h3>
+        <vue-markdown :source="note.text"> </vue-markdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import RecipeTimeCard from "@/components/Recipe/RecipeTimeCard.vue";
+import VueMarkdown from "@adapttive/vue-markdown";
+export default {
+  components: {
+    RecipeTimeCard,
+    VueMarkdown,
+  },
+  props: {
+    recipe: Object,
+  },
+};
+</script>
+
+<style>
+@media print {
+  body,
+  html {
+    margin-top: -40px !important;
+  }
+}
+
+h1 {
+  margin-top: 0 !important;
+  display: -webkit-box;
+  display: flex;
+  font-size: 2rem;
+  letter-spacing: -0.015625em;
+  font-weight: 300;
+  padding: 0;
+}
+
+h2 {
+  margin-bottom: 0.25rem;
+}
+
+h3 {
+  margin-bottom: 0.25rem;
+}
+
+ul {
+  padding-left: 1rem;
+}
+
+li {
+  display: -webkit-box;
+  display: -webkit-flex;
+  margin-left: 0;
+  margin-bottom: 0.5rem;
+}
+
+li p {
+  margin-left: 0.25rem;
+  margin-bottom: 0 !important;
+}
+
+p {
+  margin: 0;
+  font-size: 1rem;
+  letter-spacing: 0.03125em;
+  font-weight: 400;
+}
+
+.icon {
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-right: 0.5rem;
+  height: 3rem;
+  width: 3rem;
+}
+
+.time-container {
+  display: flex;
+  justify-content: left;
+}
+
+.time-chip {
+  border-radius: 0.25rem;
+  border-color: black;
+  border: 1px;
+  border-top: 1px;
+}
+
+.print {
+  display: none;
+}
+
+@media print {
+  .print {
+    display: initial;
+  }
+}
+</style>