made "Current-Cocktail"-Card responsive

frontend/src/components/CRecipeCard.vue

@@ -15,7 +15,7 @@
           <slot name="beforePicture"/>
         </div>
         <q-img
-          :src="'/api/recipe/' + recipe.id + '/image?nocache=' + new Date().getTime()"
+          :src="'/api/recipe/' + recipe.id + '/image?nocache=' + noCacheString"
           placeholder-src="../assets/cocktail-solid.png"
           :ratio="16/9"
           class="col rounded-borders max-picture-size"
@@ -29,6 +29,10 @@
                 <b>{{ recipe.name}}</b>
               </h5>
             </div>
+            <div class="col/"/>
+            <div class="col" style="display: contents; max-width: max-content">
+              <slot name="headlineRight"/>
+            </div>
             <div class="row">
               <div class="col"/>
               <div
@@ -46,7 +50,7 @@
           <div class="row" style="margin-top: 10px">
             <div
               class="col"
-              v-if="!$q.platform.is.mobile"
+              v-if="showIngredients"
             >
               Ingredients:
               <q-chip v-if="index < 4" v-for="(name, index) in uniqueIngredientNames(recipe.recipeIngredients)">
@@ -60,6 +64,7 @@
           </div>
         </div>
       </div>
+      <slot name="bottom"/>
     </q-card-section>
   </q-card>
 </template>
@@ -73,11 +78,25 @@
         type: Object,
         required: true
       },
+      showIngredients: {
+        type: Boolean,
+        default: false
+      },
       backgroundColor: {
         type: String,
         default: '#fafafa'
       }
     },
+    data() {
+      return {
+        noCacheString: new Date().getTime()
+      }
+    },
+    watch: {
+      'recipe.id': function () {
+        this.noCacheString = new Date().getTime()
+      }
+    },
     methods: {
       uniqueIngredientNames(productionSteps) {
         let unique = new Set();

frontend/src/components/CRecipeList.vue

@@ -31,6 +31,7 @@
           <c-recipe-card
             style="margin: 10px"
             :recipe="props.row"
+            :show-ingredients="!$q.platform.is.mobile"
             :background-color="(props.rowIndex % 2 === 0)? listItem1Color : listItem2Color"
           >
             <template slot="beforePicture">

frontend/src/components/Circular-Cocktail-Progress.vue

@@ -29,91 +29,55 @@
             style="padding-bottom: 10px"
           />
           <div v-if="hasCocktailProgress">
-            <q-card
-              flat
-              style="background-color: #f3f3fa"
+            <c-recipe-card
+              :recipe="cocktailProgress.recipe"
               class="text-left"
+              background-color="#EEEEEE"
             >
-              <q-card-section>
-                <div
-                  class="row"
+              <template v-slot:bottom>
+                <q-linear-progress
+                  :value="cocktailProgress.progress / 100"
+                  stripe
+                  rounded
+                  :color="cocktailProgress.canceled? 'red-4' : 'green-4'"
+                  size="20px"
+                  style="margin: 10px 0"
                 >
-                  <q-img
-                    :src="'/api/recipe/' + cocktailProgress.recipe.id + '/image?nocache=' + noCacheString"
-                    placeholder-src="../assets/cocktail-solid.png"
-                    :ratio="16/9"
-                    class="col rounded-borders"
-                    style="max-width: 225px; max-height: 180px"
-                  />
-                  <div class="col" style="padding-left: 10px; position: relative">
-                    <div class="row">
-                      <div class="col">
-                        <h5
-                          style="margin: 0; padding-bottom: 10px;"
-                        >
-                          <b>{{ cocktailProgress.recipe.name}}</b>
-                        </h5>
-                      </div>
-                      <div class="col">
-                        <div class="float-right">
-                          <q-btn
-                            dense
-                            round
-                            color="info"
-                            class="q-ml-sm"
-                            text-color="white"
-                            :icon="mdiMagnify"
-                            @click="showDialog = false"
-                            :to="{name: 'recipedetails', params: {id: cocktailProgress.recipe.id}}"
-                          />
-                          <q-btn
-                            dense
-                            round
-                            color="red"
-                            class="q-ml-sm"
-                            text-color="white"
-                            :icon="mdiStop"
-                            :loading="canceling"
-                            :disable="hasCocktailProgress && (cocktailProgress.canceled || cocktailProgress.done)"
-                            @click="onCancelCocktail()"
-                            v-if="isAdmin || currentUser.id === cocktailProgress.user.id"
-                          />
-                        </div>
-                      </div>
-                    </div>
-                    <div class="row">
-                      {{ cocktailProgress.recipe.shortDescription }}
-                    </div>
-
-                    <div class="row" style="position: absolute; bottom: 0; left: 0; right: 0; padding-inline: 10px">
-                      <div class="col"/>
-                      <div class="col" style="text-align: right; max-width: max-content">
-                        by {{ cocktailProgress.recipe.owner.username }}
-                      </div>
-                    </div>
+                  <div class="absolute-full flex flex-center">
+                    <q-badge
+                      color="red-5"
+                      :label="cocktailProgressBarLabel"
+                    />
                   </div>
+                </q-linear-progress>
+              </template>
+              <template v-slot:headlineRight>
+                <div>
+                  <q-btn
+                    dense
+                    round
+                    color="info"
+                    class="q-ml-sm"
+                    text-color="white"
+                    :icon="mdiMagnify"
+                    @click="showDialog = false"
+                    :to="{name: 'recipedetails', params: {id: cocktailProgress.recipe.id}}"
+                  />
+                  <q-btn
+                    dense
+                    round
+                    color="red"
+                    class="q-ml-sm"
+                    text-color="white"
+                    :icon="mdiStop"
+                    :loading="canceling"
+                    :disable="hasCocktailProgress && (cocktailProgress.canceled || cocktailProgress.done)"
+                    @click="onCancelCocktail()"
+                    v-if="isAdmin || currentUser.id === cocktailProgress.user.id"
+                  />
                 </div>
-                <div
-                  style="padding-top: 10px"
-                  class="row"
-                >
-                  <q-linear-progress
-                    :value="cocktailProgress.progress / 100"
-                    stripe
-                    rounded
-                    :color="cocktailProgress.canceled? 'red-4' : 'green-4'"
-                    size="20px"
-                  >
-                    <div class="absolute-full flex flex-center">
-                      <q-badge
-                        color="red-5"
-                        :label="cocktailProgressBarLabel"
-                      />
-                    </div>
-                  </q-linear-progress>
-                </div>
-              </q-card-section>
-            </q-card>
+              </template>
+            </c-recipe-card>
           </div>
           <div v-else>
             <p>