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

layout progress

Browse Source
This commit is contained in:
Kaibu
2021-09-12 22:47:31 +02:00
parent 9bdcf09f60
commit 0501dd9a0a
5 changed files with 253 additions and 990 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
vue/src/components/CookbookSlider.vue
View File

@@ -2,28 +2,51 @@
<div v-bind:style="{ backgroundImage: 'url(' + book_background + ')' }"
style="background-repeat: no-repeat; background-size: cover; padding-top: 76%;position: relative;"
class="pb-2 w-100">
<div id="book_carousel" class="carousel slide row" data-ride="carousel"
<div id="book_carousel" class="carousel slide" data-interval="0"
style=" position: absolute;top: 0;left: 0;bottom: 0;right: 0;">
<div class="row m-0 w-100">
<div class="carousel-item m-0 w-100" v-for="(i, index) in Math.ceil(recipes.length / 2)" v-bind:key="index"
:class="{ 'active': index === 0 }">
<div class="row m-0 pl-4 pr-4 pt-5 w-100" style="height: 15vh">
<a class="mb-3 col-6 pull-left" href="#book_carousel" role="button" data-slide="prev">
</a>
<a class="mb-3 col-6 text-right" href="#book_carousel" role="button" data-slide="next">
</a>
</div>
<div class="row m-0 w-100 pt-2">
<div class="carousel-item w-100 active">
<div class="row m-0 w-100">
<div class="col-6 pt-5" v-for="recipe in recipes.slice((i - 1) * 2, i * 2)" v-bind:key="recipe.id">
<recipe-card :recipe="recipe.recipe_content" class="mt-5 ml-5 mr-5"></recipe-card>
<div class="col-6">
<b-card no-body v-hover class="ml-5 mr-5">
<b-card-header class="p-4">
<h5>{{ book.name }} <span class="pull-right">{{ book.icon }}</span></h5>
</b-card-header>
<b-card-body class="p-4">
<b-card-text style="text-overflow: ellipsis;">
{{ book.description }}
</b-card-text>
</b-card-body>
</b-card>
</div>
<div class="col-6">
<b-card no-body v-hover class="ml-5 mr-5">
<b-card-header class="p-4">
<h5>{{ $t('TableOfContents') }}</h5>
</b-card-header>
<b-card-body class="p-4">
<ol>
<li v-for="recipe in recipes" v-bind:key="recipe.name">
{{ recipe.recipe_content.name }}
</li>
</ol>
</b-card-body>
</b-card>
</div>
</div>
</div>
</div>
<div class="row m-0 pl-4 pr-4 w-100">
<div class="col-6 pull-left">
<a class="btn btn-primary mb-3 mr-1" href="#book_carousel" role="button" data-slide="prev">
<i class="fa fa-arrow-left"></i>
</a>
</div>
<div class="col-6 text-right">
<a class="btn btn-primary mb-3 " href="#book_carousel" role="button" data-slide="next">
<i class="fa fa-arrow-right"></i>
</a>
<div class="carousel-item w-100" v-for="(i, index) in Math.ceil(recipes.length / 2)" v-bind:key="index">
<div class="row m-0 w-100">
<div class="col-6" v-for="recipe in recipes.slice((i - 1) * 2, i * 2)" v-bind:key="recipe.id">
<recipe-card :recipe="recipe.recipe_content" class="ml-5 mr-5"></recipe-card>
</div>
</div>
</div>
</div>
</div>
@@ -38,13 +61,26 @@ export default {
name: "CookbookSlider.vue",
components: {RecipeCard},
props: {
recipes: Array
recipes: Array,
book: Object
},
data() {
return {
cookbooks: [],
book_background: window.IMAGE_BOOK
}
},
directives: {
hover: {
inserted: function (el) {
el.addEventListener('mouseenter', () => {
el.classList.add("shadow")
});
el.addEventListener('mouseleave', () => {
el.classList.remove("shadow")
});
}
}
}
}
</script>