cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests 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

21
vue/src/apps/CookbookView/CookbookView.vue
View File

@ -23,7 +23,9 @@
</b-card>
</div>
<cookbook-slider :recipes="recipes"></cookbook-slider>
<transition name="slide-fade">
<cookbook-slider :recipes="recipes" :book="book" v-if="current_book === book.id"></cookbook-slider>
</transition>
</div>
</div>
</template>
@ -46,7 +48,8 @@ export default {
return {
cookbooks: [],
book_background: window.IMAGE_BOOK,
recipes: []
recipes: [],
current_book: undefined
}
},
mounted() {
@ -64,6 +67,8 @@ export default {
openBook: function (book) {
let apiClient = new ApiApiFactory()
this.current_book = book
console.log(this.current_book)
apiClient.listRecipeBookEntrys({options: {book: book.id}}).then(result => {
this.recipes = result.data
})
@ -86,6 +91,18 @@ export default {
</script>
<style>
.slide-fade-enter-active {
transition: all .6s ease;
}
.slide-fade-leave-active {
transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */
{
transform: translateX(10px);
opacity: 0;
}
</style>

14
vue/src/components/AddRecipeToBook.vue
View File

@ -3,15 +3,11 @@
<div>
<b-modal class="modal" :id="`id_modal_add_book_${modal_id}`" :title="$t('Manage_Books')" :ok-title="$t('Add')"
:cancel-title="$t('Close')" @ok="addToBook()" @shown="loadBookEntries">
<table>
<tr v-for="be in this.recipe_book_list" v-bind:key="be.id">
<td>
<button class="btn btn-sm btn-danger" @click="removeFromBook(be)"><i class="fa fa-trash-alt"></i></button>
</td>
<td> {{ be.book_content.name }}</td>
</tr>
</table>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center" v-for="be in this.recipe_book_list" v-bind:key="be.id">
{{ be.book_content.name }} <span class="btn btn-sm btn-danger" @click="removeFromBook(be)"><i class="fa fa-trash-alt"></i></span>
</li>
</ul>
<multiselect
style="margin-top: 1vh"

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>