fix drag on mobile

This commit is contained in:
hay-kot 2021-04-27 16:35:56 -08:00
commit e0019c5c24

View file

@ -3,7 +3,7 @@
<v-card-text> <v-card-text>
<v-row dense> <v-row dense>
<ImageUploadBtn <ImageUploadBtn
class="mt-2" class="my-1"
@upload="uploadImage" @upload="uploadImage"
:slug="value.slug" :slug="value.slug"
@refresh="$emit('upload')" @refresh="$emit('upload')"
@ -69,6 +69,7 @@
v-model="value.recipeIngredient" v-model="value.recipeIngredient"
@start="drag = true" @start="drag = true"
@end="drag = false" @end="drag = false"
handle=".handle"
> >
<transition-group <transition-group
type="transition" type="transition"
@ -83,13 +84,15 @@
class="mr-2" class="mr-2"
:label="$t('recipe.ingredient')" :label="$t('recipe.ingredient')"
v-model="value.recipeIngredient[index]" v-model="value.recipeIngredient[index]"
append-outer-icon="mdi-menu"
mdi-move-resize mdi-move-resize
auto-grow auto-grow
solo solo
dense dense
rows="1" rows="1"
> >
<template slot="append-outer">
<v-icon class="handle">mdi-menu</v-icon>
</template>
<v-icon <v-icon
class="mr-n1" class="mr-n1"
slot="prepend" slot="prepend"
@ -104,10 +107,12 @@
</transition-group> </transition-group>
</draggable> </draggable>
<v-btn color="secondary" fab dark small @click="addIngredient"> <div class="d-flex row justify-end">
<BulkAdd @bulk-data="addIngredient" class="mr-2" />
<v-btn color="secondary" dark @click="addIngredient" class="mr-4">
<v-icon>mdi-plus</v-icon> <v-icon>mdi-plus</v-icon>
</v-btn> </v-btn>
<BulkAdd @bulk-data="addIngredient" /> </div>
<h2 class="mt-6">{{ $t("recipe.categories") }}</h2> <h2 class="mt-6">{{ $t("recipe.categories") }}</h2>
<CategoryTagSelector <CategoryTagSelector
@ -158,9 +163,11 @@
</v-textarea> </v-textarea>
</v-card-text> </v-card-text>
</v-card> </v-card>
<v-btn class="mt-1" color="secondary" fab dark small @click="addNote"> <div class="d-flex justify-end">
<v-btn class="mt-1" color="secondary" dark @click="addNote">
<v-icon>mdi-plus</v-icon> <v-icon>mdi-plus</v-icon>
</v-btn> </v-btn>
</div>
<NutritionEditor v-model="value.nutrition" :edit="true" /> <NutritionEditor v-model="value.nutrition" :edit="true" />
<ExtrasEditor :extras="value.extras" @save="saveExtras" /> <ExtrasEditor :extras="value.extras" @save="saveExtras" />
</v-col> </v-col>
@ -202,10 +209,13 @@
</v-card> </v-card>
</v-hover> </v-hover>
</div> </div>
<v-btn color="secondary" fab dark small @click="addStep"> <div class="d-flex row justify-end mt-2">
<BulkAdd @bulk-data="appendSteps" class="mr-2" />
<v-btn color="secondary" dark @click="addStep" class="mr-4">
<v-icon>mdi-plus</v-icon> <v-icon>mdi-plus</v-icon>
</v-btn> </v-btn>
<BulkAdd @bulk-data="appendSteps" /> </div>
<v-text-field <v-text-field
v-model="value.orgURL" v-model="value.orgURL"
class="mt-10" class="mt-10"
@ -267,7 +277,7 @@ export default {
return utils.generateUniqueKey(item, index); return utils.generateUniqueKey(item, index);
}, },
addIngredient(ingredients = null) { addIngredient(ingredients = null) {
if (ingredients) { if (ingredients.length) {
this.value.recipeIngredient.push(...ingredients); this.value.recipeIngredient.push(...ingredients);
} else { } else {
this.value.recipeIngredient.push(""); this.value.recipeIngredient.push("");