fixes

translation
disabled note rendering when less than 15 characters
fixed step header rendering
fixed image in recipe edit on mobile layout

vue/src/apps/RecipeEditView/RecipeEditView.vue

@@ -24,7 +24,7 @@
       </div>
 
       <div class="row pt-2">
-        <div class="col-md-6" style="max-height: 50vh">
+        <div class="col-md-6" style="max-height: 50vh; min-height: 30vh">
 
           <input id="id_file_upload" ref="file_upload" type="file" hidden @change="uploadImage($event.target.files[0])">
 
@@ -47,7 +47,7 @@
           </button>
         </div>
 
-        <div class="col-md-6">
+        <div class="col-md-6 mt-1">
           <label for="id_name"> {{ $t('Preparation') }} {{ $t('Time') }}</label>
           <input class="form-control" id="id_prep_time" v-model="recipe.working_time">
           <br/>

vue/src/apps/RecipeView/RecipeView.vue

@@ -13,7 +13,8 @@
 
       <div class="row text-center">
         <div class="col col-md-12">
-          <recipe-rating :recipe="recipe"></recipe-rating> <br/>
+          <recipe-rating :recipe="recipe"></recipe-rating>
+          <br/>
           <last-cooked :recipe="recipe"></last-cooked>
         </div>
       </div>
@@ -60,12 +61,14 @@
               <i class="fas fa-pizza-slice fa-2x text-primary"></i>
             </div>
             <div class="my-auto" style="padding-right: 4px">
-              <input style="text-align: right; border-width:0px;border:none; padding:0px; padding-left: 0.5vw; padding-right: 8px; max-width: 80px"
-                     value="1" maxlength="3" min="0"
-                     type="number" class="form-control form-control-lg" v-model.number="servings"/>
+              <input
+                  style="text-align: right; border-width:0px;border:none; padding:0px; padding-left: 0.5vw; padding-right: 8px; max-width: 80px"
+                  value="1" maxlength="3" min="0"
+                  type="number" class="form-control form-control-lg" v-model.number="servings"/>
             </div>
             <div class="my-auto ">
-              <span class="text-primary"><b><template v-if="recipe.servings_text === ''">{{ $t('Servings') }}</template><template v-else>{{recipe.servings_text}}</template></b></span>
+              <span class="text-primary"><b><template v-if="recipe.servings_text === ''">{{ $t('Servings') }}</template><template
+                  v-else>{{ recipe.servings_text }}</template></b></span>
             </div>
           </div>
         </div>
@@ -90,12 +93,15 @@
                 <div class="col-md-12">
                   <table class="table table-sm">
                     <!-- eslint-disable vue/no-v-for-template-key-on-child -->
-                    <template v-for="s in recipe.steps">
+                    <div v-for="s in recipe.steps" v-bind:key="s.id">
+                      <template v-if="s.show_as_header && s.name !== ''">
+                        <b>{{s.name}}</b>
+                      </template>
                       <template v-for="i in s.ingredients">
                         <Ingredient :ingredient="i" :ingredient_factor="ingredient_factor" :key="i.id"
                                     @checked-state-changed="updateIngredientCheckedState"></Ingredient>
                       </template>
-                    </template>
+                    </div>
                     <!-- eslint-enable vue/no-v-for-template-key-on-child -->
                   </table>
                 </div>
@@ -144,7 +150,7 @@
 
     <div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'">
       <div class="col col-md-12">
-        <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)" >{{$t('Report Abuse')}}</a>
+        <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t('Report Abuse') }}</a>
       </div>
     </div>
 

vue/src/components/Ingredient.vue

@@ -26,12 +26,13 @@
       </td>
       <td v-if="detailed">
         <div v-if="ingredient.note">
-          <span v-b-popover.hover="ingredient.note" v-if="ingredient.note.length > 15"
+          <span v-b-popover.hover="ingredient.note"
                   class="d-print-none touchable"> <i class="far fa-comment"></i>
           </span>
-          <span v-else>
-            {{ ingredient.note }}
-          </span>
+          <!-- v-if="ingredient.note.length > 15" -->
+<!--          <span v-else>-->
+<!--            {{ ingredient.note }}-->
+<!--          </span>-->
 
           <div class="d-none d-print-block">
             <i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}

vue/src/locales/en.json

@@ -51,7 +51,7 @@
   "Move_Down": "Move down",
   "Step_Name": "Step Name",
   "Step_Type": "Step Type",
-  "Make_Header": "Make_Header",
+  "Make_header": "Make_Header",
   "Make_Ingredient": "Make_Ingredient",
   "Enable_Amount": "Enable Amount",
   "Disable_Amount": "Disable Amount",