From 4827364e3714fc202123684030ab90a66af2004a Mon Sep 17 00:00:00 2001
From: vabene1111 <vabene1234@googlemail.com>
Date: Mon, 21 Sep 2020 22:16:19 +0200
Subject: [PATCH] basic acceptable design

---
 cookbook/templates/shopping_list.html | 61 +++++++++++++++------------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/cookbook/templates/shopping_list.html b/cookbook/templates/shopping_list.html
index 20ba7e6ae..f62199df5 100644
--- a/cookbook/templates/shopping_list.html
+++ b/cookbook/templates/shopping_list.html
@@ -46,11 +46,11 @@
                                    placeholder="{% trans 'Search Recipe' %}">
                             <ul class="list-group" style="margin-top: 8px">
                                 <li class="list-group-item" v-for="x in recipes">
-                                    <div class="flex-row">
-                                        <div class="flex-column">[[x.name]]</div>
-
+                                    <div class="row flex-row" style="padding-left: 0.5vw; padding-right: 0.5vw">
+                                        <div class="flex-column flex-fill my-auto">[[x.name]]</div>
                                         <div class="flex-column align-self-end">
-                                            <button class="btn btn-outline-primary shadow-none" @click="addRecipeToList(x)"><i
+                                            <button class="btn btn-outline-primary shadow-none"
+                                                    @click="addRecipeToList(x)"><i
                                                     class="fa fa-plus"></i></button>
                                         </div>
                                     </div>
@@ -97,10 +97,25 @@
                 </div>
             </div>
 
+
+            <div class="row" style="margin-top: 8px">
+                <div class="col col-12">
+                    <table class="table table-sm table-striped">
+                        <tr v-for="x in display_entries">
+                            <td>[[x.amount]]</td>
+                            <td>[[x.unit.name]]</td>
+                            <td>[[x.food.name]]</td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+
             <div class="row">
-                <div class="col col-md-12">
-                    <input class="form-control form-control-sm" type="number" placeholder="{% trans 'Amount' %}"
+                <div class="col col-md-3">
+                    <input class="form-control" type="number" placeholder="{% trans 'Amount' %}"
                            v-model="new_entry.amount" ref="new_entry_amount">
+                </div>
+                <div class="col col-md-4">
                     <multiselect
                             v-tabindex
                             ref="unit"
@@ -121,7 +136,8 @@
                             :loading="units_loading"
                             @search-change="searchUnits">
                     </multiselect>
-
+                </div>
+                <div class="col col-md-4">
                     <multiselect
                             v-tabindex
                             ref="food"
@@ -142,33 +158,22 @@
                             :loading="foods_loading"
                             @search-change="searchFoods">
                     </multiselect>
-                    <button class="btn btn-success btn-sm" @click="addEntry()"><i class="fa fa-plus"></i>
+                </div>
+                <div class="col col-md-1 my-auto text-right">
+                    <button class="btn btn-success btn-lg" @click="addEntry()"><i class="fa fa-plus"></i>
                     </button>
                 </div>
             </div>
+        </div>
 
-            <div class="row" style="margin-top: 8px">
-                <div class="col col-12">
-                    <table class="table table-sm table-striped">
-                        <tr v-for="x in display_entries">
-                            <td>[[x.amount]]</td>
-                            <td>[[x.unit.name]]</td>
-                            <td>[[x.food.name]]</td>
-                        </tr>
-                    </table>
-                </div>
-            </div>
-
-            <div class="row">
-                <div class="col col-12 text-right">
-
-                    <button class="btn btn-success" @click="updateShoppingList()"><i
-                            class="fas fa-save"></i> {% trans 'Save' %}
-
-                    </button>
-                </div>
+        <div class="row" style="margin-top: 4vh">
+            <div class="col col-12 text-right">
+                <button class="btn btn-success" @click="updateShoppingList()"><i
+                        class="fas fa-save"></i> {% trans 'Save' %}
+                </button>
             </div>
         </div>
+        </div>
         <div v-else="">
             Non Edit
         </div>