mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-05 22:28:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

recipe image max-width based on ingredient table

Browse Source
This commit is contained in:
Kaibu
2022-04-22 17:33:27 +02:00
parent 694022506d
commit dc8ce0f6a4
1 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
vue/src/apps/RecipeView/RecipeView.vue
View File

@@ -85,13 +85,15 @@
<hr/> <hr/>
<div class="row"> <div class="row">
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" v-if="recipe && ingredient_count > 0"> <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2"
v-if="recipe && ingredient_count > 0">
<ingredients-card <ingredients-card
:recipe="recipe.id" :recipe="recipe.id"
:steps="recipe.steps" :steps="recipe.steps"
:ingredient_factor="ingredient_factor" :ingredient_factor="ingredient_factor"
:servings="servings" :servings="servings"
:header="true" :header="true"
id="ingredient_container"
@checked-state-changed="updateIngredientCheckedState" @checked-state-changed="updateIngredientCheckedState"
@change-servings="servings = $event" @change-servings="servings = $event"
/> />
@@ -100,13 +102,16 @@
<div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2"> <div class="col-12 order-1 col-sm-12 order-sm-1 col-md-6 order-md-2">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<img class="img img-fluid rounded" :src="recipe.image" style="max-height: 30vh" :alt="$t('Recipe_Image')" v-if="recipe.image !== null" @load="onImgLoad" /> <img class="img img-fluid rounded" :src="recipe.image" :alt="$t('Recipe_Image')"
v-if="recipe.image !== null" @load="onImgLoad"
:style="{ 'max-height': ingredient_height }"/>
</div> </div>
</div> </div>
<div class="row" style="margin-top: 2vh; margin-bottom: 2vh"> <div class="row" style="margin-top: 2vh; margin-bottom: 2vh">
<div class="col-12"> <div class="col-12">
<Nutrition-component :recipe="recipe" :ingredient_factor="ingredient_factor"></Nutrition-component> <Nutrition-component :recipe="recipe" id="nutrition_container"
:ingredient_factor="ingredient_factor"></Nutrition-component>
</div> </div>
</div> </div>
</div> </div>
@@ -116,7 +121,8 @@
<div v-if="recipe.file_path.includes('.pdf')"> <div v-if="recipe.file_path.includes('.pdf')">
<PdfViewer :recipe="recipe"></PdfViewer> <PdfViewer :recipe="recipe"></PdfViewer>
</div> </div>
<div v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')"> <div
v-if="recipe.file_path.includes('.png') || recipe.file_path.includes('.jpg') || recipe.file_path.includes('.jpeg') || recipe.file_path.includes('.gif')">
<ImageViewer :recipe="recipe"></ImageViewer> <ImageViewer :recipe="recipe"></ImageViewer>
</div> </div>
</template> </template>
@@ -136,7 +142,8 @@
<add-recipe-to-book :recipe="recipe"></add-recipe-to-book> <add-recipe-to-book :recipe="recipe"></add-recipe-to-book>
<div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh" v-if="share_uid !== 'None'"> <div class="row text-center d-print-none" style="margin-top: 3vh; margin-bottom: 3vh"
v-if="share_uid !== 'None'">
<div class="col col-md-12"> <div class="col col-md-12">
<a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a> <a :href="resolveDjangoUrl('view_report_share_abuse', share_uid)">{{ $t("Report Abuse") }}</a>
</div> </div>
@@ -209,6 +216,7 @@ export default {
start_time: "", start_time: "",
share_uid: window.SHARE_UID, share_uid: window.SHARE_UID,
wake_lock: null, wake_lock: null,
ingredient_height: '250'
} }
}, },
watch: { watch: {
@@ -220,6 +228,7 @@ export default {
this.loadRecipe(window.RECIPE_ID) this.loadRecipe(window.RECIPE_ID)
this.$i18n.locale = window.CUSTOM_LOCALE this.$i18n.locale = window.CUSTOM_LOCALE
this.requestWakeLock() this.requestWakeLock()
window.addEventListener('resize', this.handleRezise);
}, },
beforeUnmount() { beforeUnmount() {
this.destroyWakeLock() this.destroyWakeLock()
@@ -235,6 +244,13 @@ export default {
} }
} }
}, },
handleRezise: function () {
if (document.getElementById('nutrition_container') !== null) {
this.ingredient_height = document.getElementById('ingredient_container').clientHeight - document.getElementById('nutrition_container').clientHeight
} else {
this.ingredient_height = document.getElementById('ingredient_container').clientHeight
}
},
destroyWakeLock: function () { destroyWakeLock: function () {
if (this.wake_lock != null) { if (this.wake_lock != null) {
this.wake_lock.release() this.wake_lock.release()
@@ -277,6 +293,10 @@ export default {
this.recipe = this.rootrecipe = recipe this.recipe = this.rootrecipe = recipe
this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings this.servings = this.servings_cache[this.rootrecipe.id] = recipe.servings
this.loading = false this.loading = false
setTimeout(() => {
this.handleRezise()
}, 100)
}) })
}, },
updateStartTime: function (e) { updateStartTime: function (e) {