Commit 42a49491 authored by bvagne's avatar bvagne

A terrible version of it

parent 4ae647e8
......@@ -10,8 +10,11 @@
"build": "vue-cli-service build"
},
"dependencies": {
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-carousel": "^0.17.0",
"vue-dynamic-star-rating": "^1.0.7",
"vue-router": "^3.0.2",
"vue-star-rating": "^1.6.1"
},
......
......@@ -54,3 +54,22 @@ li p {
span {
position: absolute;
}
.Ingredients{
position: relative;
right:35%;
font-size: 45px;
}
.Tools{
position: relative;
right:35%;
font-size: 45px;
}
.Instructions{
position: absolute;
top: 120%;
left: 50%;
font-size: 45px;
}
......@@ -28,18 +28,48 @@
</div>
<div class="ratingRecipe">
Rating : <star-rating v-model="rating"></star-rating>
Rating : <star-rating :config="config" ref="myRating"></star-rating>
</div>
<div class="informationsRecipe">
<ol>
<li>1<p>prep time</p></li>
<li>2<p>Calories</p></li>
<li>3<p>Serving</p></li>
<li><img src="../assets/timer.png" height="42" width="42"><p>prep time : 50min</p></li>
<li><img src="../assets/calories.png" height="42" width="42"><p>Calories</p></li>
<li><img src="../assets/people.jpg" height="42" width="42"><p>Serving</p></li>
</ol>
</div>
</div>
<div class="Ingredients">
<h3>ingredients</h3>
<ul>
<li v-for='ingre in Ingredients'>
{{ingre}}
</li>
</ul>
</div>
<div class="Tools">
<h3>cooking tools</h3>
<ul>
<li v-for='tool in Tools'>
{{tool}}
</li>
</ul>
</div>
<div class="Instructions">
<h3>Instructions</h3>
<ul>
<li v-for='instr in Instructions'>
{{instr}}
</li>
</ul>
</div>
<button v-on:click="test()">test</button>
</div>
</template>
......@@ -53,7 +83,7 @@
<script>
import SearchBar from './SearchBar.vue';
import StarRating from 'vue-star-rating';
import StarRating from 'vue-dynamic-star-rating';
export default {
name: 'app',
......@@ -61,12 +91,44 @@ export default {
StarRating,
SearchBar
},
data: () => ({
rating: 3,
}),
data: function() {
return {
config: {
rating: 2,
style: {
fullStarColor: '#ed8a19',
emptyStarColor: '#737373',
starWidth: 10,
starHeight: 10
}
},
Ingredients : [
"30g butter",
"100g of sugar",
"2 eggs",
"50 ml of milk"
],
Tools : [
"1 large pot",
"1 oven"
],
Instructions : [
"Do something",
"Do something else",
"put what you did in the oven for 30min",
"eat"
]
}
},
computed: {
},
methods: {
test:function(){
/* Grab the necessary DOM elements */
var r = this.$refs["myRating"];
r.config=this.config;
console.log(this.config.rating)
}
}
......
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