cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix responsive display of detail shopping list

Browse Source
This commit is contained in:
smilerz
2021-12-21 20:41:49 -06:00
parent e257a8d29b
commit 5b287ad484
1 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
vue/src/components/ShoppingLineItem.vue
View File

@ -46,9 +46,10 @@
</b-container> </b-container>
<!-- detail rows --> <!-- detail rows -->
<div class="card no-body" v-if="showDetails"> <div class="card no-body" v-if="showDetails">
<b-container fluid>
<div v-for="(e, z) in entries" :key="z"> <div v-for="(e, z) in entries" :key="z">
<div class="row ml-2 small"> <b-row class="ml-2 small">
<div class="col-md-4 overflow-hidden text-nowrap"> <b-col cols="6" md="4" class="overflow-hidden text-nowrap">
<button <button
aria-haspopup="true" aria-haspopup="true"
aria-expanded="false" aria-expanded="false"
@ -60,16 +61,13 @@
> >
{{ formatOneRecipe(e) }} {{ formatOneRecipe(e) }}
</button> </button>
</div> </b-col>
<div class="col-md-4 text-muted">{{ formatOneMealPlan(e) }}</div> <b-col cols="6" md="4" class="col-md-4 text-muted">{{ formatOneMealPlan(e) }}</b-col>
<div class="col-md-4 text-muted text-right">{{ formatOneCreatedBy(e) }}</div> <b-col cols="12" md="4" class="col-md-4 text-muted text-right overflow-hidden text-nowrap">{{ formatOneCreatedBy(e) }}</b-col>
</div> </b-row>
<div class="row ml-2 small">
<div class="col-md-4 offset-md-8 text-muted text-right" v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div> <b-row class="ml-2 light">
<div class="col-md-4 offset-md-8 text-muted text-right" v-if="formatOneDelayUntil(e)">{{ formatOneDelayUntil(e) }}</div> <b-col cols="12" sm="2">
</div>
<div class="row ml-2 light">
<div class="col-sm-1 text-nowrap">
<div style="position: static" class="btn-group"> <div style="position: static" class="btn-group">
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"> <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
<button <button
@ -84,19 +82,24 @@
</div> </div>
<input type="checkbox" class="text-right mx-3 mt-2" :checked="e.checked" @change="updateChecked($event, e)" /> <input type="checkbox" class="text-right mx-3 mt-2" :checked="e.checked" @change="updateChecked($event, e)" />
</div> </div>
</div> </b-col>
<div class="col-sm-1">{{ formatOneAmount(e) }}</div> <b-col cols="12" sm="10">
<div class="col-sm-2">{{ formatOneUnit(e) }}</div> <b-row>
<b-col cols="2" sm="2" md="1" class="text-nowrap">{{ formatOneAmount(e) }}</b-col>
<b-col cols="10" sm="4" md="2" class="text-nowrap">{{ formatOneUnit(e) }}</b-col>
<div class="col-sm-3">{{ formatOneFood(e) }}</div> <b-col cols="12" sm="6" md="4" class="text-nowrap">{{ formatOneFood(e) }}</b-col>
<div class="col-sm-4"> <b-col cols="12" sm="6" md="5">
<div class="small" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div> <div class="small" v-for="(n, i) in formatOneNote(e)" :key="i">{{ n }}</div>
</div> </b-col>
</div> </b-row>
</b-col>
</b-row>
<hr class="w-75" /> <hr class="w-75" />
</div> </div>
</b-container>
</div> </div>
<hr class="m-1" /> <hr class="m-1" />
</div> </div>
@ -241,7 +244,7 @@ export default {
return item.checked return item.checked
}, },
formatOneDelayUntil: function (item) { formatOneDelayUntil: function (item) {
if (!item.delay_until && item.checked) { if (!item.delay_until || (item.delay_until && item.checked)) {
return false return false
} }
return [this.$t("DelayUntil"), "-", this.formatDate(item.delay_until)].join(" ") return [this.$t("DelayUntil"), "-", this.formatDate(item.delay_until)].join(" ")