Commit e05e9fd2 authored by Silvana's avatar Silvana

final adjusts

parent e5162634
module.exports = {
presets: [
'@vue/app'
]
}
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
\ No newline at end of file
......@@ -19,18 +19,12 @@
</template>
<script>
import VideoChild from './components/VideoChild.vue';
import VideoList from './components/VideoList.vue';
import VideoControls from './components/Controls.vue';
import ProfileSetup from './components/ProfileSetup.vue';
export default {
name: 'app',
components: {
VideoChild,
VideoList,
VideoControls,
ProfileSetup
},
data: () => ({
......
......@@ -34,7 +34,7 @@
margin: 10px;
left: 55%;
top:0;
background: #CD853F;
/*background: #CD853F;*/
}
.Ingredients{
......@@ -43,7 +43,7 @@
left: 0%;
width: 30%;
padding : 10px;
background: #CD853F;
/*background: #CD853F;*/
}
.Tools{
......@@ -52,7 +52,7 @@
bottom: 37%;
left: 0%;
padding: 10px;
background: #CD853F;
/*background: #CD853F;*/
width: 30%;
}
......@@ -64,7 +64,7 @@
left:50%;
width: 45%;
padding :10px;
background: #CD853F;
/*background: #CD853F;*/
}
.uling {
......
<template>
<div>
<input v-model="url" placeholder="Insert URL here" type="text">
<button v-on:click="$emit('change-video-source', url)">OK</button>
&nbsp;
Controls:
<input type="checkbox"
checked
v-model="displayButton"
v-on:change="$emit('controls', displayButton);">
&nbsp;
<span>Seek at:</span>
<input type="number" v-model="offset">
<button v-on:click="$emit('change-offset', offset)">OK</button>
&nbsp;
<button id="rotateBtn" v-on:click="$emit('video-rotate')">Rotate &#8513;</button>&nbsp;
</div>
</template>
<script>
export default {
data: () => ({
url: "",
displayButton: true,
offset: 0
})
}
</script>
<style>
input{
padding: 10px;
border: 1px solid #ccc;
}
input[type=text] {
width: 250px;
}
input[type=number] {
width: 50px;
}
button, input[type=submit] {
padding: 10px;
border: 1px solid #ccc;
/*border-radius: 4px;*/
resize: vertical;
width: 60px;
margin-top: 10px;
cursor:pointer;
background-color: #d6d6d6
}
button:hover, input[type=submit]:hover{
background-color: #bdb8b8; /* Green */
font-weight: bold;
}
#rotateBtn {
width: 80px;
}
</style>
......@@ -2,12 +2,13 @@
<div>
<footer>
<div class="topics row">
<div v-for="i in [1,2,3,4]" class="topic ">
<h4>Topic {{i}}</h4>
<a href="#">Secondary Link</a><br>
<a href="#">Secondarysss Link</a><br>
<a href="#">Secondary Link</a><br>
<a href="#">Secondary Link</a><br>
<div v-for="t in topics" class="topic ">
<h4>{{t.title}}</h4>
<div v-for="t in t.links">
<a href="#">{{t}}</a>
</div>
</div>
<div class="signup">
<h4>Sign up</h4>
......@@ -45,6 +46,24 @@
export default {
data: () => ({
message:"",
topics: [
{
title:"Cuisines",
links: ["American", "British", "Italian", "Mexican"]
},
{
title: "Ocasion",
links: ["Easter", "Halloween", "Christmas", "Hanukkah"]
},
{
title: "Diets",
links: ["Vegan", "Gluten free", "Vegetarian", "Low-sugar"]
},
{
title: "Ingredients",
links: ["Baking powder", "Ricotta", "Flour tortilla", "Egg"]
}
]
}),
}
......
......@@ -5,39 +5,55 @@
The Recipes
</h1>
<router-link to="/recipe">Go to Recipe</router-link><br>
<!-- <router-link to="/profile">Go to Profile</router-link> -->
<search-bar id="home-search-bar"></search-bar>
<carousel :per-page="3" class="carousel-home" :autoplay="true" :loop="true" :autoplayTimeout="3000">
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/images/ic/1280xn/p060z50q.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/pennealarrabiatapast_83813_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe" title="">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/waffles_82356_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_320/recipes/spaghettivongole_88988_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/cumberland_sausage_59571_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_448/recipes/smokedsalmonandpotat_90568_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_448/recipes/christmas_roast_duck_83066_16x9.jpg">
</router-link>
</slide>
<slide>
<router-link to="/recipe">
<img src="https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/membrillo_and_stilton_28987_16x9.jpg">
</router-link>
</slide>
</carousel>
<br><br>
<div class="top-categories">
<h2>Top Categories</h2>
<div class="row" >
......@@ -50,6 +66,7 @@
</div>
</div>
<br><br>
<div class="trend-recipes">
<h2>Trending Recipes</h2>
<div class="row" >
......@@ -101,7 +118,7 @@ export default {
}],
items: [{
title:"Chicken Curry",
description: "From classic chicken tikka masala to Thai green curry, take a tour of global flavours with BBC Food's top curry recipes. Take on your takeaway and spice up suppertime with our favourite chicken jalfrezi, chicken korma, Japanese katsu curry or quick coconut chilli chicken.",
description: "From classic chicken tikka masala to Thai green curry. Take on your takeaway and spice up suppertime with our favourite chicken jalfrezi, chicken korma, Japanese katsu curry or quick coconut chilli chicken.",
img:"https://ichef.bbci.co.uk//food/ic/food_16x9_832/recipes/chickenjalfrezi_91772_16x9.jpg"
},
{
......@@ -197,5 +214,16 @@ export default {
max-width: 1000px;
margin: auto;
}
button {
padding: 10px;
border: 1px solid #ccc;
/*border-radius: 4px;*/
resize: vertical;
width: 60px;
margin-top: 10px;
cursor:pointer;
background-color: #d6d6d6
}
</style>
<template lang="html">
<div id="profile">
<div id="app1">
<tab :tabtitles="tabtitles"
:current-page="3">
<div class="tab-content-container">
......@@ -155,12 +155,13 @@
margin: 0px auto;
}
#profile {
#app1 {
color: #2c3e50;
margin-top: 50px;
max-width: 500px;
width: 100%;
font-family: Source Sans Pro, Helvetica, sans-serif;
/*text-align: center;*/
margin: 0 auto
}
......@@ -190,7 +191,7 @@ input[type=text], input[type=password], select, textarea {
}
/* Style the submit button with a specific background color etc */
input[type=submit], input[type=reset] {
input[type=submit], input[type=reset] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
......
......@@ -5,27 +5,27 @@
The Recipes
</h2>
</a>
<!--
<div class="User">
<a href="#/profile">LOGIN</a>
</div>
</div> -->
<search-bar></search-bar>
<h3>{{recipeName}}</h3>
<!-- <search-bar></search-bar> -->
<br>
<h2>{{title}}</h2>
<br>
<div class="overviewRecipe">
<div>
<carousel :per-page="1" class="carrousselRecipe">
<slide>
<img src="../assets/waffle.jpg">
</slide>
<slide>
<img src="../assets/cookie.jpg">
<img :src="imgSrc">
</slide>
<slide>
<img src="../assets/cookie.jpg">
<img :src="imgSrc">
</slide>
<slide>
<img src="../assets/waffle.jpg">
......@@ -143,6 +143,16 @@ export default {
},
methods: {
},
props: {
title: {
default: "Waffle",
type: String,
},
imgSrc: {
default: "https://ichef.bbci.co.uk/food/ic/food_16x9_832/recipes/waffles_82356_16x9.jpg",
type: String
}
}
}
......
......@@ -28,7 +28,7 @@ export default {
selected: String
},
data: () => ({
options:["Cat1", "Cat2", "Cat3", "Cat", "2" ]
options:["Cookie", "Waffle", "Italian", "Vegetarian", "Vegan", "Low-sugar", "American", "British", "Chocolate", "Chips" ]
}),
}
</script>
......
<template>
<div>
{{title}}
<video id="jkBxVideo" class="vdChild"
autoplay ref="videoComponent" controls
v-on:ended="$emit('video-ended')"
v-on:error="videoError"
:src="video">
</video>
</div>
</template>
<script>
export default {
props: {
video: {
type: String,
required: true
},
title: String,
displayButtons: Boolean,
},
methods: {
setOffset: function (offset){
let video = this.$refs.videoComponent;
if(offset > video.duration){
alert('Offset greater than the video duration');
return;
}
video.currentTime = offset;
if (video.paused){
video.play();
}
},
rotate: function(){
var v = this.$refs.videoComponent;
var properties = ['transform', 'WebkitTransform', 'MozTransform',
'msTransform', 'OTransform'];
var prop = properties[0];
for(var i=0,j=properties.length;i<j;i++){
if(typeof v.style[properties[i]] !== 'undefined'){
prop = properties[i];
break;
}
}
v.style.left = 0;
v.style.top = 0;
this.videoRotation += 15;
v.style[prop]='rotate('+this.videoRotation+'deg)';
},
videoError(){
alert('Error while playing the video');
}
},
watch: {
displayButtons: function (val){
this.$refs.videoComponent.controls = val;
},
},
data: () => ({
videoRotation: 0
}),
}
</script>
<style>
.vdChild {
width: 500px;
max-width: 100% !important;
}
</style>
<template>
<div>
<div v-for="(video, index) in list" :video="video"
v-on:click="$emit('click-video', index)">
<video class="vdList" v-bind:class="[index == activeIndex ? 'active' : '']">
<source :src="video">
</video>
</div>
</div>
</template>
<script>
export default {
props: {
'list': {
type: Array,
required: true
},
activeIndex: Number
}
}
</script>
<style>
.vdList {
width: 120px;
}
.active {
border-style: solid;
border-width: 7px;
border-color: #01c733d9;
}
</style>
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