From c5b70b94c72ee886559d6fc74803a1b145bd77c6 Mon Sep 17 00:00:00 2001
From: Kaibu <notkaibu@gmail.com>
Date: Fri, 21 Jan 2022 00:48:57 +0100
Subject: [PATCH] left handed only on mobile

---
 .../ShoppingListView/ShoppingListView.vue     | 29 ++++++++++---------
 vue/src/components/ShoppingLineItem.vue       | 21 +++++++++-----
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/vue/src/apps/ShoppingListView/ShoppingListView.vue b/vue/src/apps/ShoppingListView/ShoppingListView.vue
index cb98502b7..7432688e6 100644
--- a/vue/src/apps/ShoppingListView/ShoppingListView.vue
+++ b/vue/src/apps/ShoppingListView/ShoppingListView.vue
@@ -371,7 +371,8 @@
               <div class="row">
                 <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
                 <div class="col col-md-6 text-right">
-                  <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoadd_shopping"
+                  <input type="checkbox" class="form-control settings-checkbox"
+                         v-model="settings.mealplan_autoadd_shopping"
                          @change="saveSettings"/>
                 </div>
               </div>
@@ -384,7 +385,8 @@
                 <div class="row">
                   <div class="col col-md-6">{{ $t("mealplan_autoadd_shopping") }}</div>
                   <div class="col col-md-6 text-right">
-                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoexclude_onhand"
+                    <input type="checkbox" class="form-control settings-checkbox"
+                           v-model="settings.mealplan_autoexclude_onhand"
                            @change="saveSettings"/>
                   </div>
                 </div>
@@ -398,7 +400,8 @@
                 <div class="row">
                   <div class="col col-md-6">{{ $t("mealplan_autoinclude_related") }}</div>
                   <div class="col col-md-6 text-right">
-                    <input type="checkbox" class="form-control settings-checkbox" v-model="settings.mealplan_autoinclude_related"
+                    <input type="checkbox" class="form-control settings-checkbox"
+                           v-model="settings.mealplan_autoinclude_related"
                            @change="saveSettings"/>
                   </div>
                 </div>
@@ -583,16 +586,16 @@
     <ContextMenu ref="menu">
       <template #menu="{ contextData }">
         <ContextMenuItem>
-          <b-row class="d-flex align-items-center mr-0">
-            <b-col cols="6">
-              <a class="dropdown-item p-2" href="#"><i class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</a>
-            </b-col>
-            <b-col cols="6 pl-1">
-              <b-form-select class="form-control form-control-sm" :options="shopping_categories" text-field="name"
-                             value-field="id" v-model="shopcat"
-                             @change="moveEntry($event, contextData);$refs.menu.close()"></b-form-select>
-            </b-col>
-          </b-row>
+
+          <b-input-group>
+            <template #prepend>
+              <span class="dropdown-item p-2 text-decoration-none" style="user-select: none!important;"><i class="fas fa-cubes"></i> {{ $t("MoveCategory") }}</span>
+            </template>
+            <b-form-select class="form-control mt-1 mr-1" :options="shopping_categories" text-field="name"
+                           value-field="id" v-model="shopcat"
+                           @change="moveEntry($event, contextData);$refs.menu.close()"></b-form-select>
+          </b-input-group>
+
         </ContextMenuItem>
         <ContextMenuItem @click="$refs.menu.close();onHand(contextData)">
           <a class="dropdown-item p-2" href="#"><i class="fas fa-clipboard-check"></i> {{ $t("OnHand") }}</a>
diff --git a/vue/src/components/ShoppingLineItem.vue b/vue/src/components/ShoppingLineItem.vue
index ff5035370..057e9b492 100644
--- a/vue/src/components/ShoppingLineItem.vue
+++ b/vue/src/components/ShoppingLineItem.vue
@@ -18,7 +18,7 @@
               aria-haspopup="true"
               aria-expanded="false"
               type="button"
-              :class="settings.left_handed ? 'pl-0' : ''"
+              :class="settings.left_handed ? 'dropdown-spacing' : ''"
               class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
             <i class="fas fa-ellipsis-v fa-lg"></i>
           </button>
@@ -31,18 +31,18 @@
       </b-col>
       <b-col cols="8" md="9">
         <b-row class="d-flex h-100">
-          <b-col cols="6" md="3" class="d-flex align-items-center" v-if="Object.entries(formatAmount).length == 1">
+          <b-col cols="5" 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="6" md="3" class="d-flex flex-column" v-if="Object.entries(formatAmount).length != 1">
+          <b-col cols="5" 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="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
+          <b-col cols="7" 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"
@@ -110,7 +110,7 @@
                   aria-haspopup="true"
                   aria-expanded="false"
                   type="button"
-                  :class="settings.left_handed ? 'pl-0' : ''"
+                  :class="settings.left_handed ? 'dropdown-spacing' : ''"
                   class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret">
                 <i class="fas fa-ellipsis-v fa-lg"></i>
               </button>
@@ -123,10 +123,10 @@
           </b-col>
           <b-col cols="8" md="9">
             <b-row class="d-flex align-items-center h-100">
-              <b-col cols="6" md="3" class="d-flex align-items-center">
+              <b-col cols="5" md="3" class="d-flex align-items-center">
                 <strong class="mr-1">{{ formatOneAmount(e) }}</strong> {{ formatOneUnit(e) }}
               </b-col>
-              <b-col cols="6" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
+              <b-col cols="7" md="6" class="align-items-center d-flex pl-0 pr-0 pl-md-2 pr-md-2">
                 {{ formatOneFood(e) }}
               </b-col>
               <b-col cols="12" class="d-flex d-md-none">
@@ -367,4 +367,11 @@ export default {
   font-size: 1rem !important;
   font-weight: 500 !important;
 }
+
+@media (max-width: 768px) {
+  .dropdown-spacing {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
 </style>