cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

styling and fixes for mealplan and search plan

Browse Source
This commit is contained in:
vabene1111 2023-02-19 16:37:32 +01:00
parent 7fe80b7a5f
commit a81bac1193
2 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@ -56,15 +56,13 @@
<b-button-group class="mx-1"> <b-button-group class="mx-1">
<b-button v-html="'<<'" class="p-2 pr-3 pl-3" <b-button v-html="'<<'" class="p-2 pr-3 pl-3"
@click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button> @click="setShowDate($refs.header.headerProps.previousPeriod)"></b-button>
<b-button v-html="'<'" @click="setStartingDay(-1)" class="p-2 pr-3 pl-3"></b-button>
</b-button-group> </b-button-group>
<b-button-group class="mx-1"> <b-button-group class="mx-1">
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i <b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
class="fas fa-home"></i></b-button> class="fas fa-home"></i></b-button>
<b-form-datepicker button-only button-variant="secondary"></b-form-datepicker> <!-- TODO datepicker not working --> <b-form-datepicker button-only button-variant="secondary" @context="datePickerChanged"></b-form-datepicker>
</b-button-group> </b-button-group>
<b-button-group class="mx-1"> <b-button-group class="mx-1">
<b-button v-html="'>'" @click="setStartingDay(1)" class="p-2 pr-3 pl-3"></b-button>
<b-button v-html="'>>'" class="p-2 pr-3 pl-3" <b-button v-html="'>>'" class="p-2 pr-3 pl-3"
@click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button> @click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
</b-button-group> </b-button-group>
@ -101,7 +99,7 @@
<span v-else>{{ plan.title }}</span> <span v-else>{{ plan.title }}</span>
</span><br/> </span><br/>
<span v-if="plan.note"> <span v-if="plan.note">
<small>{{ plan.note}}</small> <br/> <small>{{ plan.note }}</small> <br/>
</span> </span>
<small class="text-muted">{{ plan.meal_type_name }} <small class="text-muted">{{ plan.meal_type_name }}
<span v-if="plan.recipe"> <span v-if="plan.recipe">
@ -432,7 +430,7 @@ export default {
grid.push({ grid.push({
date: moment_date, date: moment_date,
create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates
date_label: moment_date.format('DD.MM'), date_label: moment_date.format('ddd DD.MM'),
plan_entries: useMealPlanStore().plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day')) plan_entries: useMealPlanStore().plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day'))
}) })
} }
@ -448,6 +446,7 @@ export default {
}) })
this.$root.$on("change", this.updateEmoji) this.$root.$on("change", this.updateEmoji)
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
moment.locale(window.CUSTOM_LOCALE)
}, },
watch: { watch: {
settings: { settings: {
@ -545,6 +544,9 @@ export default {
} }
}) })
}, },
datePickerChanged(ctx) {
this.setShowDate(ctx.selectedDate)
},
setShowDate(d) { setShowDate(d) {
this.showDate = d this.showDate = d
}, },

22
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -841,10 +841,10 @@
<b-list-group-item class="hover-div pb-0"> <b-list-group-item class="hover-div pb-0">
<div class="d-flex flex-row align-items-center"> <div class="d-flex flex-row align-items-center">
<div> <div>
<h4>{{ day.date_label }}</h4> <h6>{{ day.date_label }}</h6>
</div> </div>
<div class="flex-grow-1 text-right"> <div class="flex-grow-1 text-right">
<b-button class="hover-button" @click="showMealPlanEditModal(null, day.create_default_date)"><i <b-button class="hover-button btn-outline-primary btn-sm" @click="showMealPlanEditModal(null, day.create_default_date)"><i
class="fa fa-plus"></i></b-button> class="fa fa-plus"></i></b-button>
</div> </div>
</div> </div>
@ -854,17 +854,19 @@
<div class="d-flex flex-row align-items-center"> <div class="d-flex flex-row align-items-center">
<div> <div>
<b-img style="height: 50px; width: 50px; object-fit: cover" <b-img style="height: 50px; width: 50px; object-fit: cover"
:src="plan.recipe.image" rounded="circle"></b-img> :src="plan.recipe.image" rounded="circle" v-if="plan.recipe?.image"></b-img>
<b-img style="height: 50px; width: 50px; object-fit: cover"
:src="image_placeholder" rounded="circle" v-else></b-img>
</div> </div>
<div class="flex-grow-1 ml-2" <div class="flex-grow-1 ml-2"
style="text-overflow: ellipsis; overflow-wrap: anywhere;"> style="text-overflow: ellipsis; overflow-wrap: anywhere;">
<span class="two-row-text"><a <span class="two-row-text">
:href="resolveDjangoUrl('view_recipe', plan.recipe.id)">{{ <a :href="resolveDjangoUrl('view_recipe', plan.recipe.id)" v-if="plan.recipe">{{ plan.recipe.name }}</a>
plan.recipe.name <span v-else>{{ plan.title }}</span>
}}</a></span> </span>
</div> </div>
<div class="hover-button"> <div class="hover-button">
<b-button @click="showMealPlanEditModal(plan,null)"><i class="fas fa-pencil-alt"></i></b-button> <b-button @click="showMealPlanEditModal(plan,null)" class="btn-outline-primary btn-sm"><i class="fas fa-pencil-alt"></i></b-button>
</div> </div>
</div> </div>
</b-list-group-item> </b-list-group-item>
@ -1087,6 +1089,7 @@ export default {
debug: false, debug: false,
mealplan_default_date: null, mealplan_default_date: null,
mealplan_entry_edit: null, mealplan_entry_edit: null,
image_placeholder: window.IMAGE_PLACEHOLDER,
} }
}, },
computed: { computed: {
@ -1098,7 +1101,7 @@ export default {
grid.push({ grid.push({
date: moment_date, date: moment_date,
create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates create_default_date: moment_date.format("YYYY-MM-DD"), // improve meal plan edit modal to do formatting itself and accept dates
date_label: moment_date.format('DD.MM'), date_label: moment_date.format('ddd DD.MM'),
plan_entries: this.meal_plan_store.plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day')) plan_entries: this.meal_plan_store.plan_list.filter((m) => moment(m.date).isSame(moment_date, 'day'))
}) })
} }
@ -1262,6 +1265,7 @@ export default {
this.use_plural = r.data.use_plural this.use_plural = r.data.use_plural
}) })
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
moment.locale(window.CUSTOM_LOCALE)
this.debug = localStorage.getItem("DEBUG") == "True" || false this.debug = localStorage.getItem("DEBUG") == "True" || false
}, },
watch: { watch: {