recipe list and detail modal background

This commit is contained in:
vabene1111 2024-01-23 18:48:29 +01:00
parent 7673e794bf
commit 8e4c8821dc
4 changed files with 28 additions and 22 deletions

View File

@ -480,7 +480,7 @@ hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, .1)
border-top: 1px solid #ced4da;
}
.small, small {

View File

@ -112,20 +112,24 @@
<b-row v-for="r in shopping_list_store.getAssociatedRecipes()" :key="r.shopping_list_recipe_id"
class="pr-1 pl-1">
<b-col cols="12">
<b-button-group class="w-100 mt-2">
<b-button variant="dark" block class="btn btn-block text-left">
<span>{{ r.recipe_name }}</span> <br/>
<span v-if="r.mealplan_type"><small class="text-muted">{{ r.mealplan_type }} {{ formatDate(r.mealplan_from_date) }}</small></span>
</b-button>
<b-button-group class="w-100 mt-2">
<div class="card flex-grow-1 btn-block p-2">
<span>{{ r.recipe_name }}</span>
<span v-if="r.mealplan_type"><small class="text-muted">{{ r.mealplan_type }} {{ formatDate(r.mealplan_from_date) }}</small></span>
</div>
<b-button variant="danger" @click="deleteRecipe(r.shopping_list_recipe_id)"><i
class="fas fa-trash fa-fw"></i></b-button>
</b-button-group>
<number-scaler-component :number="r.servings" @change="updateServings(r, $event)"
:disable="useShoppingListStore().currently_updating"></number-scaler-component>
<hr class="m-2"/>
</b-col>
</b-row>
</b-tab>
<!-- --------------------------------------- supermarkets tab -->

View File

@ -1,20 +1,20 @@
<template>
<div>
<b-button-group class="w-100 mt-1">
<b-button @click="updateNumber( 'half')"
<b-button @click="updateNumber( 'half')" variant="outline-info"
:disabled="disable"><i class="fas fa-divide"></i> 2
</b-button>
<b-button variant="info" @click="updateNumber( 'sub')"
<b-button variant="outline-info" @click="updateNumber( 'sub')"
:disabled="disable"><i class="fas fa-minus"></i>
</b-button>
<b-button variant="info" @click="updateNumber('prompt')"
<b-button variant="outline-info" @click="updateNumber('prompt')"
:disabled="disable">
{{ number }}
</b-button>
<b-button variant="info" @click="updateNumber( 'add')"
<b-button variant="outline-info" @click="updateNumber( 'add')"
:disabled="disable"><i class="fas fa-plus"></i>
</b-button>
<b-button @click="updateNumber('multiply')"
<b-button @click="updateNumber('multiply')" variant="outline-info"
:disabled="disable"><i class="fas fa-times"></i> 2
</b-button>
</b-button-group>

View File

@ -10,7 +10,7 @@
<b-button variant="primary" v-if="is_delayed">
<i class="fa-fw fas fa-hourglass-half"></i>
</b-button>
<div class="card flex-grow-1 btn-block p-1" @click="detail_modal_visible = true">
<div class="card flex-grow-1 btn-block p-2" @click="detail_modal_visible = true">
<div class="d-flex">
<div class="d-flex flex-column pr-2" v-if="Object.keys(amounts).length> 0">
<span v-for="a in amounts" v-bind:key="a.id">{{ a.amount }} {{ a.unit }}<br/></span>
@ -61,17 +61,14 @@
<h6 class="mt-2">{{ $t('Entries') }}</h6>
<b-button variant="danger" block
@click="detail_modal_visible = false;useShoppingListStore().deleteEntries(entries)">
{{ $t('Delete_All') }}
</b-button>
<b-row v-for="e in entries" v-bind:key="e.id">
<b-col cold="12">
<b-button-group class="mt-1 w-100">
<b-button variant="dark" block class="btn btn-block text-left">
<b-button-group class="w-100">
<div class="card flex-grow-1 btn-block p-2">
<span><span v-if="e.amount > 0">{{ e.amount }}</span> {{ e.unit?.name }} {{ food.name }}</span>
<span><br/><small class="text-muted">
<span><small class="text-muted">
<span v-if="e.recipe_mealplan && e.recipe_mealplan.recipe_name !== ''">
<a :href="resolveDjangoUrl('view_recipe', e.recipe_mealplan.recipe)"> {{
e.recipe_mealplan.recipe_name
@ -87,7 +84,7 @@
{{ e.created_by.display_name }} {{ formatDate(e.created_at) }}<br/>
</small></span>
</b-button>
</div>
<b-button variant="warning"
@click="detail_modal_visible = false; useShoppingListStore().deleteObject(e)"><i
class="fas fa-trash"></i></b-button> <!-- TODO implement -->
@ -96,9 +93,14 @@
<number-scaler-component :number="e.amount"
@change="e.amount = $event; useShoppingListStore().updateObject(e)"
v-if="e.recipe_mealplan === null"></number-scaler-component>
<hr class="m-2"/>
</b-col>
</b-row>
<b-button variant="danger" block class="mt-2"
@click="detail_modal_visible = false;useShoppingListStore().deleteEntries(entries)">
{{ $t('Delete_All') }}
</b-button>
</template>
<template #modal-footer>