improved mobile rendering on ingerdient editor

This commit is contained in:
vabene1111
2022-05-18 16:44:27 +02:00
parent 8bc06fef34
commit 34e95cd25b

View File

@@ -2,7 +2,7 @@
<div id="app"> <div id="app">
<div class="row mt-2"> <div class="row mt-2">
<div class="col col-md-6"> <div class="col col-12 col-md-6">
<b-input-group> <b-input-group>
<generic-multiselect @change="food = $event.val; refreshList()" ref="food_multiselect" <generic-multiselect @change="food = $event.val; refreshList()" ref="food_multiselect"
:model="Models.FOOD" :model="Models.FOOD"
@@ -37,7 +37,7 @@
:item1="food" :item1="food"
@finish-action="finishGenericAction"/> @finish-action="finishGenericAction"/>
</div> </div>
<div class="col col-md-6"> <div class="col col-12 col-md-6">
<b-input-group> <b-input-group>
@@ -90,7 +90,8 @@
<b-row class="mt-2"> <b-row class="mt-2">
<b-col> <b-col>
<table class="table table-bordered table-sm"> <div class="table-responsive" style="overflow: unset">
<table class="table table-bordered table-sm" style="">
<thead> <thead>
<tr> <tr>
<th>{{ $t('Amount') }}</th> <th>{{ $t('Amount') }}</th>
@@ -118,11 +119,11 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 5vw"> <td style="">
<input type="number" class="form-control" v-model="i.amount" <input type="number" class="form-control" v-model="i.amount"
@input="$set(i, 'changed', true)"> @input="$set(i, 'changed', true)">
</td> </td>
<td style="width: 30vw"> <td style="min-width: 30vw">
<generic-multiselect @change="i.unit = $event.val; $set(i, 'changed', true)" <generic-multiselect @change="i.unit = $event.val; $set(i, 'changed', true)"
:initial_single_selection="i.unit" :initial_single_selection="i.unit"
:model="Models.UNIT" :model="Models.UNIT"
@@ -131,7 +132,7 @@
:create_placeholder="$t('Create')" :create_placeholder="$t('Create')"
:multiple="false"></generic-multiselect> :multiple="false"></generic-multiselect>
</td> </td>
<td style="width: 30vw"> <td style="min-width: 30vw">
<generic-multiselect @change="i.food = $event.val; $set(i, 'changed', true)" <generic-multiselect @change="i.food = $event.val; $set(i, 'changed', true)"
:initial_single_selection="i.food" :initial_single_selection="i.food"
:model="Models.FOOD" :model="Models.FOOD"
@@ -140,11 +141,11 @@
:create_placeholder="$t('Create')" :create_placeholder="$t('Create')"
:multiple="false"></generic-multiselect> :multiple="false"></generic-multiselect>
</td> </td>
<td style="width: 30vw"> <td style="min-width: 30vw">
<input class="form-control" v-model="i.note" @keydown="$set(i, 'changed', true)"> <input class="form-control" v-model="i.note" @keydown="$set(i, 'changed', true)">
</td> </td>
<td style="width: 5vw"> <td style="">
<b-button-group> <b-button-group>
<b-button :disabled="i.changed !== true" <b-button :disabled="i.changed !== true"
:variant="(i.changed !== true) ? 'primary' : 'success'" :variant="(i.changed !== true) ? 'primary' : 'success'"
@@ -165,6 +166,7 @@
</template> </template>
</table> </table>
</div>
</b-col> </b-col>