layout progress
This commit is contained in:
Kaibu
@ -13,7 +13,7 @@
|
||||
version="1.1"
|
||||
id="SVGRoot"
|
||||
sodipodi:docname="book.svg"
|
||||
inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)">
|
||||
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)">
|
||||
<defs
|
||||
id="defs2608" />
|
||||
<sodipodi:namedview
|
||||
@ -23,17 +23,17 @@
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="0.35"
|
||||
inkscape:cx="-592.84177"
|
||||
inkscape:cy="516.62789"
|
||||
inkscape:zoom="1.4"
|
||||
inkscape:cx="250.5725"
|
||||
inkscape:cy="265.89318"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-rotation="0"
|
||||
showgrid="false"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1377"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-y="1072"
|
||||
inkscape:window-maximized="1" />
|
||||
<metadata
|
||||
id="metadata2611">
|
||||
@ -43,7 +43,7 @@
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
@ -57,5 +57,71 @@
|
||||
id="path835"
|
||||
style="fill:none;fill-opacity:1;stroke:#ddbf86;stroke-width:0.91445;stroke-linecap:butt;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
sodipodi:nodetypes="sccccsssccssccscs" />
|
||||
<g
|
||||
id="g1062-7"
|
||||
transform="matrix(0.29031165,0.23248306,-0.29632355,0.23741836,21.63667,1.1307691)"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1">
|
||||
<g
|
||||
id="g1005-6"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1">
|
||||
<g
|
||||
id="g1003-5"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1">
|
||||
<path
|
||||
d="M 15.875,42.952 H 4.847 L 22.627,60.731 40.409,42.952 H 29.244 C 30.824,22.001 41.734,5.075 55.884,0.96 53.726,0.332 51.49,0 49.2,0 31.919,0 17.694,18.8 15.875,42.952 Z"
|
||||
id="path1001-2"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
<g
|
||||
id="g1007-2"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1009-3"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1011-2"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1013-4"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1015-3"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1017-6"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1019-6"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1021-8"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1023-0"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1025-1"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1027-2"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1029-1"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1031-6"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1033-7"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
<g
|
||||
id="g1035-8"
|
||||
style="fill:none;stroke:#ddbf86;stroke-opacity:1" />
|
||||
</g>
|
||||
<path
|
||||
d="m 186.65756,15.01934 3.20156,-2.563823 0.10659,8.35461 -10.43065,-0.08705 3.24132,-2.595673 c -6.66696,-4.606829 -14.84983,-6.088982 -20.17712,-3.776323 0.44041,-0.650797 0.99116,-1.249452 1.65598,-1.781838 5.01687,-4.0175396 14.71744,-2.8611469 22.40232,2.450095 z"
|
||||
id="path1001"
|
||||
style="fill:none;stroke:#ddbf86;stroke-width:0.371235;stroke-opacity:1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 4.9 KiB |
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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 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>
|
||||
</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>
|
||||
<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="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="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">
|
||||
<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 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>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user