Commit 5ac6cf1b authored by bvagne's avatar bvagne

Fixed star and added stuff

parent 3d1059af
......@@ -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",
......
......@@ -111,3 +111,13 @@ li p {
#app{
max-width: 100%;
}
.suggestions img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
.category-item {
padding: 10px;
}
......@@ -6,23 +6,14 @@
<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>
......@@ -33,7 +24,7 @@
<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 :config="config" ref="myRating"></star-rating></p></li>
<li><p>Rating : <star-rating v-model="rating"></star-rating></p></li>
</ol>
</div>
......@@ -71,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>
......@@ -84,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',
......@@ -94,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",
......@@ -122,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