From 8e4c8821dc9c1e30ed44c293c0a59f7d77b4bc79 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Tue, 23 Jan 2024 18:48:29 +0100
Subject: [PATCH] recipe list and detail modal background

---
 cookbook/static/themes/tandoor.min.css        |  2 +-
 .../ShoppingListView/ShoppingListView.vue     | 16 +++++++++-----
 vue/src/components/NumberScalerComponent.vue  | 10 ++++-----
 vue/src/components/ShoppingLineItem.vue       | 22 ++++++++++---------
 4 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/cookbook/static/themes/tandoor.min.css b/cookbook/static/themes/tandoor.min.css
index 5744a8d8..36abfb42 100644
--- a/cookbook/static/themes/tandoor.min.css
+++ b/cookbook/static/themes/tandoor.min.css
@@ -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 {
diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index bf148da4..2d170274 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -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 -->
diff --git a/vue/src/components/NumberScalerComponent.vue b/vue/src/components/NumberScalerComponent.vue
index 8e9c9579..f9cb5eab 100644
--- a/vue/src/components/NumberScalerComponent.vue
+++ b/vue/src/components/NumberScalerComponent.vue
@@ -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>
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index adbc6639..5ac7bab3 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -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>