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

more styling of mobile meal plan

Browse Source
This commit is contained in:
vabene1111
2023-02-19 16:05:49 +01:00
parent a6e3ab2dbe
commit 7fe80b7a5f
1 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,7 +71,7 @@
</b-button-toolbar> </b-button-toolbar>
</div> </div>
</div> </div>
<div class="col-12 mt-2"> <div class="col-12 mt-2" style="padding-bottom: 60px">
<div v-for="day in mobileSimpleGrid" v-bind:key="day.day"> <div v-for="day in mobileSimpleGrid" v-bind:key="day.day">
<b-list-group> <b-list-group>
<b-list-group-item> <b-list-group-item>
@ -90,16 +90,22 @@
<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"> <span class="two-row-text">
<a :href="resolveDjangoUrl('view_recipe', plan.recipe.id)">{{ plan.recipe.name }}</a> <a :href="resolveDjangoUrl('view_recipe', plan.recipe.id)" v-if="plan.recipe">{{ plan.recipe.name }}</a>
<span v-else>{{ plan.title }}</span>
</span><br/> </span><br/>
<small class="text-muted">{{ plan.meal_type_name }} - <span v-if="plan.note">
<span v-if="plan.recipe"> <small>{{ plan.note}}</small> <br/>
<i class="fa fa-clock"></i> {{ plan.recipe.working_time + plan.recipe.waiting_time}} {{ $t('min')}} </span>
<small class="text-muted">{{ plan.meal_type_name }}
<span v-if="plan.recipe">
- <i class="fa fa-clock"></i> {{ plan.recipe.working_time + plan.recipe.waiting_time }} {{ $t('min') }}
</span> </span>
</small> </small>
</div> </div>
@ -370,6 +376,7 @@ export default {
entryEditing: null, entryEditing: null,
mealplan_default_date: null, mealplan_default_date: null,
ical_url: window.ICAL_URL, ical_url: window.ICAL_URL,
image_placeholder: window.IMAGE_PLACEHOLDER,
} }
}, },
computed: { computed: {