From 4dd3ba29b6da8163a91dd54b31ee3789be5d3580 Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Tue, 15 Mar 2022 12:35:13 +0100
Subject: [PATCH] improved shopping v2 layout a little bit

---
 .../apps/ShoppingListView/ShoppingListView.vue   |  4 ++--
 vue/src/components/ShoppingLineItem.vue          | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index 087bda807..27767d7c7 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -105,7 +105,7 @@
                                                     class="btn dropdown-toggle btn-link text-decoration-none text-dark pr-2 dropdown-toggle-no-caret"
                                                     @click.stop="openContextMenu($event, s, true)"
                                                 >
-                                                    <i class="fas fa-ellipsis-v fa-lg"></i>
+                                                    <i class="fas fa-ellipsis-v"></i>
                                                 </button>
 
                                                 <b-button
@@ -116,7 +116,7 @@
                                                     :aria-expanded="'true' ? x == 'false' : 'true'"
                                                 >
                                                     <i class="fa fa-chevron-right rotate" />
-                                                    <span class="h5 ml-2 text-secondary">{{ i }}</span>
+                                                    <span class="h6 ml-2 text-secondary">{{ i }}</span>
                                                 </b-button>
                                             </div>
 
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index 2a92f42d9..cb3b2366b 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -7,35 +7,35 @@
                     <div class="text-nowrap"><i class="fa fa-chevron-right rotate" :class="showDetails ? 'rotated' : ''"></i></div>
                 </b-button>
             </b-col>
-            <b-col cols="2" md="1" class="align-items-center d-flex">
+            <b-col cols="1" md="1" class="align-items-center d-flex">
                 <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true" @click.stop="$emit('open-context-menu', $event, entries)">
                     <button
                         aria-haspopup="true"
                         aria-expanded="false"
                         type="button"
                         :class="settings.left_handed ? 'dropdown-spacing' : ''"
-                        class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
+                        class="btn dropdown-toggle btn-link text-decoration-none text-body pr-0 pl-1 dropdown-toggle-no-caret"
                     >
-                        <i class="fas fa-ellipsis-v fa-lg"></i>
+                        <i class="fas fa-ellipsis-v"></i>
                     </button>
                 </div>
             </b-col>
             <b-col cols="1" class="px-1 justify-content-center align-items-center d-none d-md-flex">
                 <input type="checkbox" class="form-control form-control-sm checkbox-control" :checked="formatChecked" @change="updateChecked" :key="entries[0].id" />
             </b-col>
-            <b-col cols="7" md="9">
+            <b-col cols="8" md="9">
                 <b-row class="d-flex h-100">
-                    <b-col cols="5" md="3" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
+                    <b-col cols="6" md="3" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
                         <strong class="mr-1">{{ Object.entries(formatAmount)[0][1] }}</strong> {{ Object.entries(formatAmount)[0][0] }}
                     </b-col>
-                    <b-col cols="5" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
+                    <b-col cols="6" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
                         <div class="small" v-for="(x, i) in Object.entries(formatAmount)" :key="i">
                             {{ x[1] }} &ensp;
                             {{ x[0] }}
                         </div>
                     </b-col>
 
-                    <b-col cols="7" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
+                    <b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
                         {{ formatFood }}
                     </b-col>
                     <b-col cols="3" data-html2canvas-ignore="true" class="align-items-center d-none d-md-flex justify-content-end">
@@ -179,7 +179,7 @@ export default {
         formatAmount: function () {
             let amount = {}
             this.entries.forEach((entry) => {
-                let unit = entry?.unit?.name ?? "----"
+                let unit = entry?.unit?.name ?? "---"
                 if (entry.amount) {
                     if (amount[unit]) {
                         amount[unit] += entry.amount