Commit e05ab107 authored by bvagne's avatar bvagne

Merge remote-tracking branch 'origin/Bastien' into master-2

parents 2c725f2d 5ac6cf1b
......@@ -795,6 +795,22 @@
"to-fast-properties": "^2.0.0"
}
},
"@chenfengyuan/create-vue-component": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@chenfengyuan/create-vue-component/-/create-vue-component-1.1.0.tgz",
"integrity": "sha512-TW/HVptQa/3Hms1FZPln2UbWuQudUKbbKnEGhApjA/GMIfQ41Lt3SRaLwSEkOJozVIbXllAA5RAFF9zTqeIsqg==",
"requires": {
"is-vue-component": "^1.0.0"
}
},
"@chenfengyuan/vue-carousel": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@chenfengyuan/vue-carousel/-/vue-carousel-0.1.1.tgz",
"integrity": "sha512-V2uWne9VKO3Ztb80WEX3XTSgGxlaJ0X3swqFZuprvEG/FRyO+Wd9x4ixAauM3y9mv/zlqHskpcDjSfavp05ozw==",
"requires": {
"@chenfengyuan/create-vue-component": "^1.1.0"
}
},
"@intervolga/optimize-cssnano-plugin": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
......@@ -5643,6 +5659,11 @@
"is-extglob": "^2.1.1"
}
},
"is-non-null-object": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-non-null-object/-/is-non-null-object-1.0.0.tgz",
"integrity": "sha512-MYBGKRSoNifYx3aoV+TNrUieiAFkdZLXCz5OoiPpArtQv9WWiDwgMXZMeC8bPN7I0CsYpgZxg3C4wjljqggn8w=="
},
"is-number": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
......@@ -5750,6 +5771,14 @@
"resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
},
"is-vue-component": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-vue-component/-/is-vue-component-1.0.0.tgz",
"integrity": "sha512-frTAznlMCFMghK3mn262vQwPacdac/RqIdI7yzvQ9kiaktUIzocQ7xNt0xOj6C5Q61uHJgzQsScwmY8MwG4/sA==",
"requires": {
"is-non-null-object": "^1.0.0"
}
},
"is-windows": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
......@@ -10105,9 +10134,9 @@
}
},
"vue": {
"version": "2.5.21",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.21.tgz",
"integrity": "sha1-PTPc0Du4E5Es6JSoMDq1U2mcSoU="
"version": "2.5.22",
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.22.tgz",
"integrity": "sha512-pxY3ZHlXNJMFQbkjEgGVMaMMkSV1ONpz+4qB55kZuJzyJOhn6MSy/YZdzhdnumegNzVTL/Dn3Pp4UrVBYt1j/g=="
},
"vue-carousel": {
"version": "0.17.0",
......@@ -10169,9 +10198,9 @@
}
},
"vue-template-compiler": {
"version": "2.5.21",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.21.tgz",
"integrity": "sha1-pXzrkDF36PZDVgqNY5oPjbZHBUo=",
"version": "2.5.22",
"resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.5.22.tgz",
"integrity": "sha512-1VTw/NPTUeHNiwhkq6NkFzO7gYLjFCueBN0FX8NEiQIemd5EUMQ5hxrF7O0zCPo5tae+U9S/scETPea+hIz8Eg==",
"dev": true,
"requires": {
"de-indent": "^1.0.2",
......
......@@ -15,8 +15,9 @@
.carrousselRecipe{
display: block;
position: relative;
width: 100%;
width: 30%;
top : 10%;
left: 35%;
}
.ratingRecipe{
......@@ -29,9 +30,9 @@
.informationsRecipe {
position: absolute;
width: 900px;
width: 10%;
margin: 10px;
left: 1000px;
left: 65%;
top:0;
}
......@@ -73,6 +74,8 @@
font-size: 25px;
}
ul > li {
position: relative;
height: 5%;
margin: .5em 0;
line-height: 1.15;
}
......@@ -93,3 +96,28 @@ li p {
padding-left: 60px;
color: #555;
}
.icone {
position: relative;
height: 25px;
width: 25px;
}
.star-container {
position: relative;
height: 50px;
width: 50px;
}
#app{
max-width: 100%;
}
.suggestions img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.category-item {
padding: 10px;
}
......@@ -6,36 +6,25 @@
<search-bar></search-bar>
<h3>{{recipeName}}</h3>
<div class="overviewRecipe">
<div>
<carousel :per-page="1" class="carrousselRecipe">
<slide>
<img src="../assets/waffle.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
</slide>
<slide>
<img src="../assets/waffle.jpg">
<slide v-for='image in images' :key="image.path">
<img :src="image.path">
</slide>
</carousel>
</div>
<div class="ratingRecipe">
Rating : <star-rating :config="config" ref="myRating"></star-rating>
</div>
<div class="informationsRecipe">
<ol>
<li><img src="../assets/timer.png" height="42" width="42"><p>prep time : {{time}}</p></li>
<li><img src="../assets/calories.png" height="42" width="42"><p>Calories : {{calories}}</p></li>
<li><img src="../assets/people.jpg" height="42" width="42"><p>Serving : {{serving}}</p></li>
<li><img src="../assets/timer.png" class="icone"><p>prep time : {{time}}</p></li>
<li><img src="../assets/calories.png" class="icone"><p>Calories : {{calories}}</p></li>
<li><img src="../assets/people.jpg" class="icone"><p>Serving : {{serving}}</p></li>
<li><p>Rating : <star-rating v-model="rating"></star-rating></p></li>
</ol>
</div>
......@@ -73,6 +62,19 @@
</div>
</div>
<div class="suggestions">
<h2>You may also like...</h2>
<div class="row" >
<div v-for="recipe in otherRecipes">
<div class="category-item">
<img src="../assets/waffle.jpg">
<p>Name</p>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -86,7 +88,7 @@
<script>
import SearchBar from './SearchBar.vue';
import StarRating from 'vue-dynamic-star-rating';
import StarRating from 'vue-star-rating'
export default {
name: 'app',
......@@ -96,18 +98,12 @@ export default {
},
data: function() {
return {
config: {
rating: 2,
style: {
fullStarColor: '#ed8a19',
emptyStarColor: '#737373',
starWidth: 10,
starHeight: 10
}
},
otherRecipes:["Cat1", "Cat2", "Cat3", "Cat", "2" ],
recipeName:"The best chocolate cookies",
time: "30min",
calories: "2000",
serving: "3 people",
rating: 3,
Ingredients : [
"30g butter",
......@@ -124,7 +120,9 @@ export default {
"Do something else",
"put what you did in the oven for 30min",
"eat"
]
],
images:[{path:"../assets/waffle.jpg"},{path:"../assets/cookie.jpg"}]
}
},
computed: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment