Commit ecc98268 authored by bvagne's avatar bvagne

Merge remote-tracking branch 'origin/recipe_page'

# Conflicts:
#	package.json
parents 4e40aa96 995f4471
This diff is collapsed.
......@@ -10,10 +10,14 @@
"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-multiselect": "^2.1.3",
"vue-router": "^3.0.2"
"vue-dynamic-star-rating": "^1.0.7",
"vue-star-rating": "^1.6.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
......
......@@ -23,6 +23,7 @@ import VideoList from './components/VideoList.vue';
import VideoControls from './components/Controls.vue';
import ProfileSetup from './components/ProfileSetup.vue';
export default {
name: 'app',
components: {
......
.greeting {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.overviewRecipe{
position: relative;
top:0;
width: 2000px;
}
.carrousselRecipe{
display: block;
position: relative;
width: 100%;
top : 10%;
}
.ratingRecipe{
position: absolute;
width: 900px;
margin: 10px;
left: 1000px;
top:400px;
}
.informationsRecipe {
position: absolute;
width: 900px;
margin: 10px;
left: 1000px;
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;
}
ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 20px;
}
li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 60px;
color: #555;
}
......@@ -21,7 +21,7 @@
<img src="../assets/waffle.jpg">
</slide>
</carousel>
<div class="top-categories">
<h2>Top Categories</h2>
<div class="row" >
......@@ -33,7 +33,7 @@
</div>
</div>
</div>
<div class="trend-recipes">
<h2>Trending Recipes</h2>
<div class="row" >
......@@ -58,14 +58,14 @@ export default {
},
data: () => ({
categories:["Cat1", "Cat2", "Cat3", "Cat", "2" ]
}),
computed: {
},
methods: {
}
}
</script>
......@@ -86,7 +86,7 @@ export default {
.category-item {
padding: 10px;
}
.recipe-item {
padding: 10px;
}
......@@ -95,7 +95,7 @@ export default {
height: 200px;
object-fit: cover;
}
</style>
<template lang="html">
<div class="greeting">
<h2>
Wellcome to the Vue.js blog
The Recipes
</h2>
<img src="../assets/logo.png" alt="vuejs logo">
<search-bar></search-bar>
<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>
</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>
</ol>
</div>
</div>
<div class="texte">
<div class="Ingredients">
<h3>ingredients</h3>
<ul>
<li v-for='ingre in Ingredients'>
{{ingre}}
</li>
</ul>
</div>
<div class="Instructions">
<h3>Instructions</h3>
<ul class="uling">
<li v-for='instr in Instructions'>
{{instr}}
</li>
</ul>
</div>
<div class="Tools">
<h3>cooking tools</h3>
<ul>
<li v-for='tool in Tools'>
{{tool}}
</li>
</ul>
</div>
</div>
</div>
</template>
<style>
.greeting {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
@import '../assets/styles/mainStyle.css';
@import '../assets/styles/recipes.css';
</style>
<script>
import SearchBar from './SearchBar.vue';
import StarRating from 'vue-dynamic-star-rating';
export default {
name: 'app',
components: {
StarRating,
SearchBar
},
data: function() {
return {
config: {
rating: 2,
style: {
fullStarColor: '#ed8a19',
emptyStarColor: '#737373',
starWidth: 10,
starHeight: 10
}
},
time: "30min",
calories: "2000",
serving: "3 people",
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: {
}
}
</script>
......@@ -4,5 +4,17 @@
</div>
</template>
<script>
export default {
data: () => ({
message:"",
}),
}
</script>
<style>
</style>
......@@ -9,14 +9,14 @@ new Vue({
import Vue from 'vue'
import Router from 'vue-router'
import Vue from 'vue';
import Router from 'vue-router';
import VueCarousel from 'vue-carousel';
import App from './App.vue'
import Home from './components/Home.vue'
import ProfileSetup from './components/ProfileSetup.vue'
import Recipe from './components/Recipe.vue'
import App from './App.vue';
import Home from './components/Home.vue';
import ProfileSetup from './components/ProfileSetup.vue';
import Recipe from './components/Recipe.vue';
Vue.use(VueCarousel);
......
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