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 e5a4f6b5bf
commit efec416604
1 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,57 +46,60 @@
</b-container> </b-container>
<!-- detail rows --> <!-- detail rows -->
<div class="card no-body" v-if="showDetails"> <div class="card no-body" v-if="showDetails">
<div v-for="(e, z) in entries" :key="z"> <b-container fluid>
<div class="row ml-2 small"> <div v-for="(e, z) in entries" :key="z">
<div class="col-md-4 overflow-hidden text-nowrap"> <b-row class="ml-2 small">
<button <b-col cols="6" md="4" class="overflow-hidden text-nowrap">
aria-haspopup="true" <button
aria-expanded="false" aria-haspopup="true"
type="button" aria-expanded="false"
class="btn btn-link btn-sm m-0 p-0" type="button"
style="text-overflow: ellipsis" class="btn btn-link btn-sm m-0 p-0"
@click.stop="openRecipeCard($event, e)" style="text-overflow: ellipsis"
@mouseover="openRecipeCard($event, e)" @click.stop="openRecipeCard($event, e)"
> @mouseover="openRecipeCard($event, e)"
{{ formatOneRecipe(e) }} >
</button> {{ formatOneRecipe(e) }}
</div> </button>
<div class="col-md-4 text-muted">{{ formatOneMealPlan(e) }}</div> </b-col>
<div class="col-md-4 text-muted text-right">{{ formatOneCreatedBy(e) }}</div> <b-col cols="6" md="4" class="col-md-4 text-muted">{{ formatOneMealPlan(e) }}</b-col>
</div> <b-col cols="12" md="4" class="col-md-4 text-muted text-right overflow-hidden text-nowrap">{{ formatOneCreatedBy(e) }}</b-col>
<div class="row ml-2 small"> </b-row>
<div class="col-md-4 offset-md-8 text-muted text-right" v-if="formatOneCompletedAt(e)">{{ formatOneCompletedAt(e) }}</div>
<div class="col-md-4 offset-md-8 text-muted text-right" v-if="formatOneDelayUntil(e)">{{ formatOneDelayUntil(e) }}</div> <b-row class="ml-2 light">
</div> <b-col cols="12" sm="2">
<div class="row ml-2 light"> <div style="position: static" class="btn-group">
<div class="col-sm-1 text-nowrap"> <div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true">
<div style="position: static" class="btn-group"> <button
<div class="dropdown b-dropdown position-static inline-block" data-html2canvas-ignore="true"> aria-haspopup="true"
<button aria-expanded="false"
aria-haspopup="true" type="button"
aria-expanded="false" class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret"
type="button" @click.stop="$emit('open-context-menu', $event, e)"
class="btn dropdown-toggle btn-link text-decoration-none text-body pr-1 dropdown-toggle-no-caret" >
@click.stop="$emit('open-context-menu', $event, e)" <i class="fas fa-ellipsis-v fa-lg"></i>
> </button>
<i class="fas fa-ellipsis-v fa-lg"></i> </div>
</button> <input type="checkbox" class="text-right mx-3 mt-2" :checked="e.checked" @change="updateChecked($event, e)" />
</div> </div>
<input type="checkbox" class="text-right mx-3 mt-2" :checked="e.checked" @change="updateChecked($event, e)" /> </b-col>
</div> <b-col cols="12" sm="10">
</div> <b-row>
<div class="col-sm-1">{{ formatOneAmount(e) }}</div> <b-col cols="2" sm="2" md="1" class="text-nowrap">{{ formatOneAmount(e) }}</b-col>
<div class="col-sm-2">{{ formatOneUnit(e) }}</div> <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>
</b-row>
</b-col>
</b-row>
<hr class="w-75" />
</div> </div>
</b-container>
<hr class="w-75" />
</div>
</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(" ")