Commit 995f4471 authored by bvagne's avatar bvagne

working on it. I have a problem with the rating stuff

parent 42a49491
This diff is collapsed.
......@@ -13,9 +13,10 @@
}
.carrousselRecipe{
position: absolute;
width: 1000px;
right: 1000px;
display: block;
position: relative;
width: 100%;
top : 10%;
}
.ratingRecipe{
......@@ -34,6 +35,48 @@
top:0;
}
.Ingredients{
text-align: left;
position: relative;
left: 0%;
width: 30%;
padding : 10px;
}
.Tools{
text-align: left;
position: relative;
bottom: 37%;
left: 0%;
padding: 10px;
}
.Instructions{
display: block;
text-align: left;
position: relative;
bottom: 37%;
left:50%;
width: 30%;
padding :10px;
}
.uling {
list-style-type: decimal;
width: 900px;
margin: 50;
}
.texte{
display: block;
width: 80%;
font-size: 25px;
}
ul > li {
margin: .5em 0;
line-height: 1.15;
}
ol {
color: #ccc;
list-style-type: none;
......@@ -50,26 +93,3 @@ li p {
padding-left: 60px;
color: #555;
}
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;
}
......@@ -11,7 +11,7 @@
<div class="overviewRecipe">
<div>
<carousel :per-page="1" id="carrousselRecipe">
<carousel :per-page="1" class="carrousselRecipe">
<slide>
<img src="../assets/waffle.jpg">
</slide>
......@@ -33,14 +33,16 @@
<div class="informationsRecipe">
<ol>
<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>
<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>
</ol>
</div>
</div>
<div class="texte">
<div class="Ingredients">
<h3>ingredients</h3>
......@@ -51,25 +53,26 @@
</ul>
</div>
<div class="Tools">
<h3>cooking tools</h3>
<ul>
<li v-for='tool in Tools'>
{{tool}}
<div class="Instructions">
<h3>Instructions</h3>
<ul class="uling">
<li v-for='instr in Instructions'>
{{instr}}
</li>
</ul>
</div>
<div class="Instructions">
<h3>Instructions</h3>
<div class="Tools">
<h3>cooking tools</h3>
<ul>
<li v-for='instr in Instructions'>
{{instr}}
<li v-for='tool in Tools'>
{{tool}}
</li>
</ul>
</div>
<button v-on:click="test()">test</button>
</div>
</div>
</template>
......@@ -102,6 +105,10 @@ export default {
starHeight: 10
}
},
time: "30min",
calories: "2000",
serving: "3 people",
Ingredients : [
"30g butter",
"100g of sugar",
......@@ -123,12 +130,6 @@ export default {
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