meal plan style improvements

vue3/src/components/display/MealPlanCalendarItem.vue

@@ -1,39 +1,39 @@
 <template>
-    <div class="card cv-item meal-plan-card p-0"
-         :style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
-         :key="value.id"
-         :class="value.classes"
+    <v-card class="card cv-item pa-0" hover
+            :style="{'top': itemTop, 'height': itemHeight, 'border-color': mealPlan.mealType.color}"
+            :key="value.id"
+            :class="value.classes"
     >
-
-        <div class="d-flex flex-row align-items-center">
-            <div class="flex-column">
-                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" :src="mealPlan.recipe.image"
-                     v-if="mealPlan.recipe != undefined && detailedItems"/>
-                <img class="" style="object-fit: cover" :style="{'height': itemHeight, 'width': itemHeight}" src="../../assets/recipe_no_image.svg"
-                     v-if="detailedItems && ((mealPlan.recipe == undefined && mealPlan.note === '') || (mealPlan.recipe != undefined && mealPlan.recipe.image === null))"/>
-            </div>
-            <div class="flex-column flex-grow-0 align-middle justify-content-center">
-                <div class="card-body p-0 pl-1 align-middle">
+        <v-card-text class="pa-0">
+            <div class="d-flex flex-row align-items-center">
+                <div class="flex-column">
+                    <recipe-image :height="itemHeight" :width="itemHeight" :recipe="mealPlan.recipe"></recipe-image>
+                </div>
+                <div class="flex-column flex-grow-0">
+                    <div class="card-body pl-1 pa-1">
 
                     <span class="font-light" :class="{'two-line-text': detailedItems,'one-line-text': !detailedItems,}">
-                       <i class="fas fa-shopping-cart fa-xs float-left"  v-if="mealPlan.shopping"/>
+                       <i class="fas fa-shopping-cart fa-xs float-left" v-if="mealPlan.shopping"/>
                         {{ itemTitle }}</span>
+                    </div>
                 </div>
             </div>
-        </div>
 
-    </div>
+        </v-card-text>
+
+    </v-card>
 </template>
 
 <script setup lang="ts">
 
 import {computed, PropType} from "vue";
 import {IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+import RecipeImage from "@/components/display/RecipeImage.vue";
 
 
 let props = defineProps({
     value: {type: {} as PropType<IMealPlanNormalizedCalendarItem>, required: true},
-    itemHeight: {type: String, default: '2.6rem'},
+    itemHeight: {type: String,},
     itemTop: {type: String,},
     detailedItems: {type: Boolean, default: true}
 })
@@ -52,6 +52,13 @@ const itemTitle = computed(() => {
     }
 })
 
+const itemImage = computed(() => {
+    if (mealPlan.value.recipe != undefined && mealPlan.value.recipe.image != undefined && props.detailedItems){
+        return mealPlan.value.recipe.image
+    } else {
+        return recipeDefaultImage
+    }
+})
 
 </script>
 

vue3/src/components/display/RecipeImage.vue

@@ -0,0 +1,30 @@
+<template>
+    <v-img :cover="cover" :style="{'height': height, 'width': width,}" :src="image" alt="Recipe Image"/>
+</template>
+
+<script setup lang="ts">
+
+import {computed, PropType} from "vue";
+import {Recipe, RecipeOverview} from "@/openapi";
+import recipeDefaultImage from '../../assets/recipe_no_image.svg'
+
+const props = defineProps({
+    recipe: {type: {} as PropType<Recipe|RecipeOverview|undefined>, required: false, default: undefined},
+    height: {type: String},
+    width: {type: String},
+    cover: {type: Boolean, default: true}
+})
+
+const image = computed(() => {
+    if(props.recipe != undefined && props.recipe.image != undefined){
+        return props.recipe.image
+    } else {
+        return recipeDefaultImage
+    }
+})
+
+</script>
+
+<style scoped>
+
+</style>

vue3/src/pages/MealPlanPage.vue

@@ -4,9 +4,10 @@
         <v-col>
             <CalendarView
                 :items="planItems"
-                class="theme-default ">
+                class="theme-default"
+            :item-content-height="calendarItemHeight">
                 <template #item="{ value, weekStartDate, top }">
-                    <meal-plan-calendar-item :value="value"></meal-plan-calendar-item>
+                    <meal-plan-calendar-item :item-height="calendarItemHeight" :value="value" :item-top="top"></meal-plan-calendar-item>
                 </template>
             </CalendarView>
         </v-col>
@@ -23,14 +24,14 @@ import {CalendarView, CalendarViewHeader} from "vue-simple-calendar"
 import "vue-simple-calendar/dist/style.css"
 import "vue-simple-calendar/dist/css/default.css"
 import MealPlanCalendarItem from "@/components/display/MealPlanCalendarItem.vue";
-import {IMealPlanCalendarItem, IMealPlanNormalizedCalendarItem} from "@/types/MealPlan";
+import {IMealPlanCalendarItem} from "@/types/MealPlan";
 
 
 export default defineComponent({
     name: "MealPlanPage",
-    components: {MealPlanCalendarItem,  VCalendar, CalendarView, CalendarViewHeader},
+    components: {MealPlanCalendarItem, VCalendar, CalendarView, CalendarViewHeader},
     computed: {
-        planItems: function(){
+        planItems: function () {
             let items = [] as IMealPlanCalendarItem[]
             this.mealPlans.forEach(mp => {
                 items.push({
@@ -41,6 +42,9 @@ export default defineComponent({
                 } as IMealPlanCalendarItem)
             })
             return items
+        },
+        calendarItemHeight: function (){
+            return '2.6rem' //TODO switch depending on display size
         }
     },
     data() {
@@ -60,5 +64,183 @@ export default defineComponent({
 </script>
 
 <style scoped>
+.slide-fade-enter-active {
+    transition: all 0.3s ease;
+}
 
+.slide-fade-leave-active {
+    transition: all 0.1s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter,
+.slide-fade-leave-to {
+    transform: translateY(10px);
+    opacity: 0;
+}
+
+.calender-row {
+    height: calc(100vh - 140px);
+}
+
+.calender-parent {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow-x: hidden;
+    overflow-y: hidden;
+    height: 100%
+}
+
+.cv-item {
+    white-space: inherit !important;
+    padding: 0;
+    border-radius: 3px !important;
+}
+
+
+.isHovered {
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+}
+
+.cv-day.draghover {
+    box-shadow: inset 0 0 0.2em 0.2em rgb(221, 191, 134) !important;
+}
+
+.modal-backdrop {
+    opacity: 0.5;
+}
+
+/*
+**************************************************************
+This theme is the default shipping theme, it includes some
+decent defaults, but is separate from the calendar component
+to make it easier for users to implement their own themes w/o
+having to override as much.
+**************************************************************
+*/
+
+/* Header */
+
+.theme-default .cv-header,
+.theme-default .cv-header-day {
+    background-color: #f0f0f0;
+}
+
+.theme-default .cv-header .periodLabel {
+    font-size: 1.5em;
+}
+
+/* Grid */
+
+.theme-default .cv-weeknumber {
+    background-color: #e0e0e0;
+    border-color: #ccc;
+    color: #808080;
+}
+
+.theme-default .cv-weeknumber span {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.theme-default .cv-day.past {
+    background-color: #fafafa;
+}
+
+.theme-default .cv-day.outsideOfMonth {
+    background-color: #f7f7f7;
+}
+
+.theme-default .cv-day.today {
+    background-color: #ffe;
+}
+
+.theme-default .cv-day[aria-selected] {
+    background-color: #ffc;
+}
+
+/* Events */
+
+.theme-default .cv-item {
+    border-color: #e0e0f0;
+    border-radius: 0.5em;
+    background-color: #fff;
+    text-overflow: ellipsis;
+}
+
+.theme-default .cv-item.purple {
+    background-color: #f0e0ff;
+    border-color: #e7d7f7;
+}
+
+.theme-default .cv-item.orange {
+    background-color: #ffe7d0;
+    border-color: #f7e0c7;
+}
+
+.theme-default .cv-item.continued::before,
+.theme-default .cv-item.toBeContinued::after {
+    /*
+    removed because it breaks a line and would increase item size https://github.com/TandoorRecipes/recipes/issues/2678
+    content: " \21e2 ";
+    color: #999;
+     */
+    content: "";
+}
+
+.theme-default .cv-item.toBeContinued {
+    border-right-style: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.theme-default .cv-item.isHovered.hasUrl {
+    text-decoration: underline;
+}
+
+.theme-default .cv-item.continued {
+    border-left-style: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.cv-item.span3,
+.cv-item.span4,
+.cv-item.span5,
+.cv-item.span6,
+.cv-item.span7 {
+    text-align: center;
+}
+
+/* Event Times */
+
+.theme-default .cv-item .startTime,
+.theme-default .cv-item .endTime {
+    font-weight: bold;
+    color: #666;
+}
+
+/* Drag and drop */
+
+.theme-default .cv-day.draghover {
+    box-shadow: inset 0 0 0.2em 0.2em yellow;
+}
+
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+
+@media (max-width: 767.9px) {
+    .periodLabel {
+        font-size: 18px !important;
+    }
+}
+
+.b-calendar-grid-help {
+    padding: 0.25rem;
+}
 </style>

vue3/src/types/MealPlan.ts

@@ -11,5 +11,6 @@ export interface IMealPlanNormalizedCalendarItem extends ICalendarItem {
 	endDate: Date
 	originalItem: IMealPlanCalendarItem
 	classes: string[]
-	itemRow?: number
+	itemRow?: number,
+	id: string,
 }