ui improvements (shopping and meal plan)

- fixed content scaling for meal plan and shopping
- style fixes on shopping list
- touch based swipe actions for shopping list
- better mobile experience overall

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -2,7 +2,7 @@
     <div>
         <b-tabs content-class="mt-3" v-model="current_tab">
             <b-tab :title="$t('Planner')" active>
-                <div class="row">
+                <div class="row calender-row">
                     <div class="col-12 calender-parent">
                         <calendar-view
                             :show-date="showDate"
@@ -693,19 +693,24 @@ export default {
     opacity: 0;
 }
 
+.calender-row {
+    height: calc(100% - 240px);
+}
+
 .calender-parent {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     overflow-x: hidden;
     overflow-y: hidden;
-    height: 70vh;
+    height: 100%
 }
 
 .cv-item {
     white-space: inherit !important;
 }
 
+
 .isHovered {
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
 }
@@ -837,4 +842,10 @@ having to override as much.
     opacity: 0.5;
     background: #c8ebfb;
 }
+
+@media (max-width: 767.9px) {
+    .periodLabel {
+        font-size: 18px !important;
+    }
+}
 </style>

vue/src/apps/RecipeView/RecipeView.vue

@@ -233,7 +233,7 @@ export default {
         this.loadRecipe(window.RECIPE_ID)
         this.$i18n.locale = window.CUSTOM_LOCALE
         this.requestWakeLock()
-        window.addEventListener('resize', this.handleRezise);
+        window.addEventListener('resize', this.handleResize);
     },
     beforeUnmount() {
         this.destroyWakeLock()
@@ -249,7 +249,7 @@ export default {
                 }
             }
         },
-        handleRezise: function () {
+        handleResize: function () {
             if (document.getElementById('nutrition_container') !== null) {
                 this.ingredient_height = document.getElementById('ingredient_container').clientHeight - document.getElementById('nutrition_container').clientHeight
             } else {
@@ -300,7 +300,7 @@ export default {
                 this.loading = false
 
                 setTimeout(() => {
-                    this.handleRezise()
+                    this.handleResize()
                 }, 100)
             })
         },