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 v-html="'<<'" class="p-2 pr-3 pl-3"
@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 class="mx-1">
<b-button @click="setShowDate($refs.header.headerProps.currentPeriod)"><i
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 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"
@click="setShowDate($refs.header.headerProps.nextPeriod)"></b-button>
</b-button-group>
@ -101,7 +99,7 @@
<span v-else>{{ plan.title }}</span>
</span><br/>
<span v-if="plan.note">
<small>{{ plan.note}}</small> <br/>
<small>{{ plan.note }}</small> <br/>
</span>
<small class="text-muted">{{ plan.meal_type_name }}
<span v-if="plan.recipe">
@ -432,7 +430,7 @@ export default {
grid.push({
date: moment_date,
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'))
})
}
@ -448,6 +446,7 @@ export default {
})
this.$root.$on("change", this.updateEmoji)
this.$i18n.locale = window.CUSTOM_LOCALE
moment.locale(window.CUSTOM_LOCALE)
},
watch: {
settings: {
@ -545,6 +544,9 @@ export default {
}
})
},
datePickerChanged(ctx) {
this.setShowDate(ctx.selectedDate)
},
setShowDate(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">
<div class="d-flex flex-row align-items-center">
<div>
<h4>{{ day.date_label }}</h4>
<h6>{{ day.date_label }}</h6>
</div>
<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>
</div>
</div>
@ -854,17 +854,19 @@
<div class="d-flex flex-row align-items-center">
<div>
<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 class="flex-grow-1 ml-2"
style="text-overflow: ellipsis; overflow-wrap: anywhere;">
<span class="two-row-text"><a
:href="resolveDjangoUrl('view_recipe', plan.recipe.id)">{{
plan.recipe.name
}}</a></span>
<span class="two-row-text">
<a :href="resolveDjangoUrl('view_recipe', plan.recipe.id)" v-if="plan.recipe">{{ plan.recipe.name }}</a>
<span v-else>{{ plan.title }}</span>
</span>
</div>
<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>
</b-list-group-item>
@ -1087,6 +1089,7 @@ export default {
debug: false,
mealplan_default_date: null,
mealplan_entry_edit: null,
image_placeholder: window.IMAGE_PLACEHOLDER,
}
},
computed: {
@ -1098,7 +1101,7 @@ export default {
grid.push({
date: moment_date,
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'))
})
}
@ -1262,6 +1265,7 @@ export default {
this.use_plural = r.data.use_plural
})
this.$i18n.locale = window.CUSTOM_LOCALE
moment.locale(window.CUSTOM_LOCALE)
this.debug = localStorage.getItem("DEBUG") == "True" || false
},
watch: {