Commit 4ae647e8 authored by bvagne's avatar bvagne

first try (I struggle a lot)

parent 3a69094c
......@@ -9522,6 +9522,11 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
"integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg=="
},
"vue-star-rating": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/vue-star-rating/-/vue-star-rating-1.6.1.tgz",
"integrity": "sha512-JSmVx16rcxyw4Ma6YQ5DnIExyjF4IFf/ypxh3zfmtFZzE/hjswDT0fLn1vF4ERxDbAp0nHA3u51BYFbA8gyYyQ=="
},
"vue-style-loader": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
......
......@@ -12,7 +12,8 @@
"dependencies": {
"vue": "^2.5.17",
"vue-carousel": "^0.17.0",
"vue-router": "^3.0.2"
"vue-router": "^3.0.2",
"vue-star-rating": "^1.6.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
......
......@@ -22,6 +22,7 @@ import VideoChild from './components/VideoChild.vue';
import VideoList from './components/VideoList.vue';
import VideoControls from './components/Controls.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{
position: absolute;
width: 1000px;
right: 1000px;
}
.ratingRecipe{
position: absolute;
width: 900px;
margin: 10px;
left: 1000px;
top:400px;
}
.informationsRecipe {
position: absolute;
width: 900px;
margin: 10px;
left: 1000px;
top:0;
}
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;
}
span {
position: absolute;
}
......@@ -18,7 +18,7 @@
<img src="../assets/waffle.jpg">
</slide>
</carousel>
<div class="top-categories">
<h2>Top Categories</h2>
<div class="row" >
......@@ -30,7 +30,7 @@
</div>
</div>
</div>
<div class="trend-recipes">
<h2>Trending Recipes</h2>
<div class="row" >
......@@ -55,14 +55,14 @@ export default {
},
data: () => ({
categories:["Cat1", "Cat2", "Cat3", "Cat", "2" ]
}),
computed: {
},
methods: {
}
}
</script>
......@@ -83,7 +83,7 @@ export default {
.category-item {
padding: 10px;
}
.recipe-item {
padding: 10px;
}
......@@ -92,7 +92,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" id="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 v-model="rating"></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>
</ol>
</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-star-rating';
export default {
name: 'app',
components: {
StarRating,
SearchBar
},
data: () => ({
rating: 3,
}),
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