Limpieza
Fernando
parent
3ba30efacc
commit
ab5793e322
|
|
@ -1,3 +0,0 @@
|
|||
/node_modules
|
||||
/idea
|
||||
**.map
|
||||
19
.htaccess
19
.htaccess
|
|
@ -1,19 +0,0 @@
|
|||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteBase /
|
||||
RewriteRule ^index\.php$ - [L]
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule . /ihc/index.php [L]
|
||||
</IfModule>
|
||||
|
||||
## Desabilitar cache de Apache
|
||||
<FilesMatch "\.(html|htm|js|css)$">
|
||||
FileETag None
|
||||
<IfModule mod_headers.c>
|
||||
Header unset ETag
|
||||
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
|
||||
Header set Pragma "no-cache"
|
||||
Header set Expires "Wed, 12 Jan 1980 05:00:00 GMT"
|
||||
</IfModule>
|
||||
</FilesMatch>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
|||
const topBar=document.createElement("div");topBar.style.position="fixed",topBar.style.minHeight="3px",topBar.style.backgroundColor="red",topBar.style.zIndex="1";const transitionD=500;topBar.style.transition="min-width 500ms, opacity 250ms",topBar.style.minWidth="0";let promesaActual,widthDestino=0;document.body.appendChild(topBar);const cambiarProgreso=t=>(widthDestino=t,promesaActual=new Promise((o,i)=>{topBar.style.minWidth=`${t}%`,setTimeout(()=>o(),500)})),cancelarTransicion=()=>{const t=topBar.style.transition;topBar.style.transition="",topBar.style.minWidth=`${widthDestino}%`,topBar.style.transition=t},ocultarTopBar=()=>{topBar.style.opacity="0",setTimeout(()=>{topBar.style.minWidth="0%"},250)},reiniciarTopBar=()=>{const t=topBar.style.transition;topBar.style.transition="",topBar.style.minWidth="0",topBar.style.opacity="1",topBar.style.transition=t};
|
||||
176
index.php
176
index.php
|
|
@ -1,176 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<title>Cocina Francesa</title>
|
||||
<link rel="stylesheet" href="/ihc/dist/css/base.css?v=2" type="text/css"/>
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="/ihc/dist/js/topbar.min.js"></script>
|
||||
|
||||
<div id="vueApp">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
<!-- Vue y Vuerouter -->
|
||||
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
|
||||
<script src="/ihc/dist/dependencias/vuerouter.min.js"></script>
|
||||
<script src="/ihc/dist/dependencias/vue.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const carritoUsuario = [];
|
||||
|
||||
const footer = {
|
||||
template: `<?php include "./src/componentes/mi-footer.vue" ?>`
|
||||
};
|
||||
|
||||
const navBar = {
|
||||
template: `<?php include "./src/componentes/navBar.vue" ?>`
|
||||
};
|
||||
|
||||
const headerMin = {
|
||||
template: `<?php include "./src/componentes/headerMin.vue" ?>`
|
||||
};
|
||||
|
||||
const headerMini = {
|
||||
template: `<?php include "./src/componentes/header-mini.vue"?>`
|
||||
};
|
||||
|
||||
const inicio = {
|
||||
template: `<?php include "./src/componentes/inicio.vue" ?>`,
|
||||
components: {
|
||||
'mi-footer': footer,
|
||||
'header-min': headerMin,
|
||||
'nav-bar': navBar
|
||||
}
|
||||
};
|
||||
|
||||
const tienda = function (resolve, reject) {
|
||||
const ajax1 = new XMLHttpRequest();
|
||||
const ajax2 = new XMLHttpRequest();
|
||||
|
||||
ajax1.onreadystatechange = ajax2.onreadystatechange = () => {
|
||||
if (ajax1.status === 200 && ajax1.readyState === 4 && ajax2.status === 200 && ajax2.readyState === 4) {
|
||||
const platosD = JSON.parse(ajax2.responseText);
|
||||
resolve({
|
||||
template: `${ajax1.responseText}`,
|
||||
data: function () {
|
||||
return {
|
||||
platos: platosD,
|
||||
itemActual: 1
|
||||
};
|
||||
},
|
||||
components: {
|
||||
'mi-footer': footer,
|
||||
'header-mini': headerMini,
|
||||
'nav-bar': navBar
|
||||
},
|
||||
methods: {
|
||||
cambiarContador: function () {
|
||||
if (this.itemActual === 1 || this.itemActual === 2){
|
||||
this.itemActual++;
|
||||
return true;
|
||||
} else {
|
||||
this.itemActual = 1;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
ajax1.open("GET","/ihc/src/componentes/tienda.vue",true);
|
||||
ajax1.send();
|
||||
|
||||
ajax2.open("GET","/ihc/src/data/platos.json");
|
||||
ajax2.send();
|
||||
};
|
||||
|
||||
const carrito = {
|
||||
template: `<?php include "./src/componentes/carrito.vue"?>`,
|
||||
components: {
|
||||
'mi-footer': footer,
|
||||
'header-mini': headerMini,
|
||||
'nav-bar': navBar
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
item: carritoUsuario,
|
||||
descuento: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
cantidadItems: function () {
|
||||
let items = 0;
|
||||
for (const i in this.item)
|
||||
items++;
|
||||
return items;
|
||||
},
|
||||
subTotal: function () {
|
||||
let subT = 0;
|
||||
for (const itemI in this.item ) {
|
||||
if (this.item.hasOwnProperty(itemI)){
|
||||
const item = this.item[itemI];
|
||||
subT += (item["precio"] * item["cantidad"]);
|
||||
}
|
||||
}
|
||||
return subT;
|
||||
},
|
||||
total: function () {
|
||||
return this.subTotal - this.descuento;
|
||||
},
|
||||
noEstaVacio: function () {
|
||||
for (const i in this.item) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
restarCantidad: function (elem) {
|
||||
const cantidad = parseInt(elem.cantidad);
|
||||
if (cantidad > 0)
|
||||
elem.cantidad = cantidad -1;
|
||||
},
|
||||
aumentarCantidad: function (elem) {
|
||||
const cantidad = parseInt(elem.cantidad);
|
||||
if (cantidad >= 0)
|
||||
elem.cantidad = cantidad+1;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const routes = [
|
||||
{path: '/ihc/',component: inicio},
|
||||
{path: '/ihc/carrito/', component: carrito},
|
||||
{path: '/ihc/tienda/', component: tienda}
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes: routes
|
||||
});
|
||||
|
||||
|
||||
const vm = new Vue({
|
||||
el: '#vueApp',
|
||||
router: router
|
||||
})
|
||||
.$mount('#vueApp');
|
||||
|
||||
</script>
|
||||
|
||||
<!-- Logica principal -->
|
||||
<!--<script src="./dist/js/base.min.js?v=2"></script>-->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<div class="contenedor inicio_registro">
|
||||
<div class="center">
|
||||
Inicia Sesión.
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-7 center">
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
<img src="https://www.sbs.com.au/food/sites/sbs.com.au.food/files/styles/full/public/nicoise-salad.jpg?itok=MK0Y7QKN&mtime=1499834368"
|
||||
alt="plato de comida" class="image">
|
||||
</div>
|
||||
<div class="col-5 center">
|
||||
<br />
|
||||
<br />
|
||||
<button type="button" class="google-button" style="width: 213px">
|
||||
<span class="google-button__icon">
|
||||
<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="google-button__text">Iniciar con Google</span>
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<button style="background-color: #4064ad; height: 40px; border: none; box-shadow: 1px 1px 2px black;
|
||||
border-radius: 3px">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
|
||||
id="Capa_1" x="0px" y="0px" width="20px" viewBox="0 0 96.124 96.123"
|
||||
style="max-height: 18px" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803 c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654 c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246 c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z" style="fill: rgb(255, 255, 255);"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="google-button__text" style="color: white; padding: 0 13px">Iniciar con Facebook</span>
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
O inicia sesión con tu correo:<br />
|
||||
<br />
|
||||
<br />
|
||||
<form method="post" onsubmit="return false">
|
||||
Correo Electrónico:<br />
|
||||
<input type="text" placeholder="Tu correo Electrónico"><br />
|
||||
<br />
|
||||
Contraseña:<br />
|
||||
<input type="password" placeholder="Contraseña"><br />
|
||||
<br />
|
||||
<input class="botonEnviarForm" type="submit" value="Iniciar Sesión">
|
||||
</form>
|
||||
<br />
|
||||
<br />
|
||||
¿No tienes una cuenta?<br />
|
||||
<a href="./#registro" id="botonRegistro" class="boton">
|
||||
Regístrate
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
26
package.json
26
package.json
|
|
@ -1,26 +0,0 @@
|
|||
{
|
||||
"name": "ihc",
|
||||
"version": "1.0.0",
|
||||
"description": "A simple meb application for a 'French Restaurant'",
|
||||
"main": "index.php",
|
||||
"scripts": {
|
||||
"uglify": "uglifyjs src/js/*.js -m -c -o dist/js/app.js",
|
||||
"sass": "sass -s compressed src/sass:dist/css",
|
||||
"compile": "npm run uglify && npm run sass"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://gitlab.com/Araozu/ihc-proyect.git"
|
||||
},
|
||||
"keywords": [
|
||||
"ihc",
|
||||
"unsa",
|
||||
"2018"
|
||||
],
|
||||
"author": "Fernando Araoz Morales",
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://gitlab.com/Araozu/ihc-proyect/issues"
|
||||
},
|
||||
"homepage": "https://gitlab.com/Araozu/ihc-proyect#readme"
|
||||
}
|
||||
69
registro.php
69
registro.php
|
|
@ -1,69 +0,0 @@
|
|||
<div class="contenedor inicio_registro">
|
||||
<div class="center">
|
||||
Registrate para tener lo mejor de la cocina francesa en la comodida de tu casa.<br />
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-7 center">
|
||||
|
||||
<br />
|
||||
<button type="button" class="google-button" style="width: 213px">
|
||||
<span class="google-button__icon">
|
||||
<svg viewBox="0 0 366 372" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M125.9 10.2c40.2-13.9 85.3-13.6 125.3 1.1 22.2 8.2 42.5 21 59.9 37.1-5.8 6.3-12.1 12.2-18.1 18.3l-34.2 34.2c-11.3-10.8-25.1-19-40.1-23.6-17.6-5.3-36.6-6.1-54.6-2.2-21 4.5-40.5 15.5-55.6 30.9-12.2 12.3-21.4 27.5-27 43.9-20.3-15.8-40.6-31.5-61-47.3 21.5-43 60.1-76.9 105.4-92.4z" id="Shape" fill="#EA4335"/><path d="M20.6 102.4c20.3 15.8 40.6 31.5 61 47.3-8 23.3-8 49.2 0 72.4-20.3 15.8-40.6 31.6-60.9 47.3C1.9 232.7-3.8 189.6 4.4 149.2c3.3-16.2 8.7-32 16.2-46.8z" id="Shape" fill="#FBBC05"/><path d="M361.7 151.1c5.8 32.7 4.5 66.8-4.7 98.8-8.5 29.3-24.6 56.5-47.1 77.2l-59.1-45.9c19.5-13.1 33.3-34.3 37.2-57.5H186.6c.1-24.2.1-48.4.1-72.6h175z" id="Shape" fill="#4285F4"/><path d="M81.4 222.2c7.8 22.9 22.8 43.2 42.6 57.1 12.4 8.7 26.6 14.9 41.4 17.9 14.6 3 29.7 2.6 44.4.1 14.6-2.6 28.7-7.9 41-16.2l59.1 45.9c-21.3 19.7-48 33.1-76.2 39.6-31.2 7.1-64.2 7.3-95.2-1-24.6-6.5-47.7-18.2-67.6-34.1-20.9-16.6-38.3-38-50.4-62 20.3-15.7 40.6-31.5 60.9-47.3z" fill="#34A853"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="google-button__text">Regístrate con Google</span>
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<button style="background-color: #4064ad; height: 40px; border: none; box-shadow: 1px 1px 2px black;
|
||||
border-radius: 3px">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
|
||||
id="Capa_1" x="0px" y="0px" width="20px" viewBox="0 0 96.124 96.123"
|
||||
style="max-height: 18px" xml:space="preserve">
|
||||
<g>
|
||||
<path d="M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803 c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654 c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246 c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z" style="fill: rgb(255, 255, 255);"></path>
|
||||
</g>
|
||||
</svg>
|
||||
<span class="google-button__text" style="color: white; padding: 0 13px">Regístrate con Facebook</span>
|
||||
</button>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
O crea tu cuenta con tu correo electrónico:
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<form method="post" onsubmit="return false">
|
||||
Nombre:<br />
|
||||
<input placeholder="Tu nombre" name="userName"><br />
|
||||
<br />
|
||||
Correo Electrónico:<br />
|
||||
<input placeholder="Tu correo Electrónico" name="userEmail"><br />
|
||||
<br />
|
||||
Contraseña<br />
|
||||
<input type="password" placeholder="Contraseña" name="userPass"><br />
|
||||
<br />
|
||||
<input class="botonEnviarForm" type="submit" value="¡Crear mi cuenta!">
|
||||
</form>
|
||||
<br />
|
||||
<br />
|
||||
¿Ya tienes una cuenta?<br />
|
||||
<a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
|
||||
Inicia Sesion
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-5 center">
|
||||
<br>
|
||||
<br>
|
||||
<img class="image" alt="Torre Eiffel" src="https://kids.nationalgeographic.com/content/dam/kids/photos/Countries/A-G/france-eiffel-tower.ngsversion.1396531559251.adapt.1900.1.jpg">
|
||||
<br>
|
||||
<br>
|
||||
<img class="image" src="https://www.slh.com/globalassets/country-pages/hero-images/france3.jpg" alt="Vista de francia">
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
<div>
|
||||
<header-mini></header-mini>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section id="sectionCarrito" class="contenedor mySeccion" data-collapsed="false">
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="center">
|
||||
<div id="carrito--tituloprincipal">
|
||||
Carrito de compras
|
||||
</div>
|
||||
<br/>
|
||||
<a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="carrito" class="row carrito">
|
||||
|
||||
<div id="carrito--elementos" class="col-8">
|
||||
<div id="carrito--elementos--contenido" class="caja">
|
||||
<template v-if="noEstaVacio">
|
||||
<template v-for="producto in item">
|
||||
<div class="carritoElem">
|
||||
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
|
||||
<div class="plato--Titulo">{{ producto.nombre }}</div>
|
||||
<br>
|
||||
<div class="plato--Precio">{{ producto.precio }}</div>
|
||||
<div class="plato--Cantidad">Cantidad:
|
||||
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
|
||||
<span>{{ producto.cantidad }}</span>
|
||||
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
|
||||
<hr>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
No hay nada en tu carrito de compras :c
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="carrito--precio" class="col-4">
|
||||
|
||||
<div id="carrito--precio--contenido" class="caja">
|
||||
<template v-if="noEstaVacio">
|
||||
<div id="pagos">
|
||||
<div style="display: inline-block;">
|
||||
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
|
||||
</div>
|
||||
<div style="display: inline-block; float: right; clear: both">
|
||||
{{ subTotal }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: inline-block;">
|
||||
Descuentos:
|
||||
</div>
|
||||
<div style="display: inline-block; float: right; clear: both">
|
||||
{{ descuento }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
|
||||
Total:
|
||||
</div>
|
||||
<div class="carrito--precio--contenido--titulo"
|
||||
style="display: inline-block; float: right; clear: both">
|
||||
{{ total }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<a class="carrito--precio--contenido--botonPagar">
|
||||
Completar Transaccion
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
No hay nada en tu carrito de compras :c
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
</section>
|
||||
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<header id="header">
|
||||
<div class="contenedor">
|
||||
<div id="tituloP" class="center tituloP--mini">
|
||||
<router-link to="/ihc/" class="titulo--link">L'Assiette</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<header id="header">
|
||||
<div class="contenedor">
|
||||
<div id="tituloP" class="center">
|
||||
<router-link to="/ihc/" class="titulo--link">L'Assiette</router-link>
|
||||
<div id="tituloP--descripcion">
|
||||
Descubre un nuevo sabor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="contenedorInicio-Registro" class="center mySeccion" data-collapsed="false">
|
||||
<a href="./#registro" id="botonRegistro" class="boton">
|
||||
Registrarse
|
||||
</a>
|
||||
<a href="./#iniciar-sesion" id="botonInicioSesion" class="boton">
|
||||
Iniciar Sesion
|
||||
</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
<div id="inicio_registro" class="mySeccion" data-collapsed="true" style="height: 0"></div>
|
||||
|
||||
</header>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<div>
|
||||
|
||||
<header-min></header-min>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section id="sectionP" class="contenedor mySeccion" data-collapsed="false">
|
||||
<div class="row contenido">
|
||||
<div class="col-5">
|
||||
<img class="image" src="http://www.saintjacquesfrenchcuisine.com/images/MenuSlide5.jpg"
|
||||
alt="Plato Francés"/>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div class="descripcionComida">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
|
||||
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
|
||||
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
|
||||
deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-7 center">
|
||||
<div class="descripcionComida">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
||||
dolore magna aliqua. Congue quisque egestas diam in arcu cursus euismod quis. Mi tempus imperdiet nulla
|
||||
malesuada pellentesque elit eget gravida. Tempus imperdiet nulla malesuada pellentesque elit eget
|
||||
gravida
|
||||
cum. Commodo elit at imperdiet dui accumsan sit amet. In nulla posuere sollicitudin aliquam ultrices
|
||||
sagittis.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Jacques_Lameloise%2C_escab%C3%A8che_d%27%C3%A9crevisses_sur_gaspacho_d%27asperge_et_cresson.jpg"
|
||||
alt="Plato Francés" class="image">
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
</section>
|
||||
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<div>
|
||||
<footer id="footer">
|
||||
<div class="contenedor">
|
||||
Cocina Francesa.<br/>
|
||||
Una Single Page Application para el curso de IHC, UNSA, 2018.<br/>
|
||||
Se utilizaron: Vue.js, BEM, Sass, npm, y nodejs.<br>
|
||||
<br/>
|
||||
Desarrollado por Fernando Araoz, 20173373.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
<div>
|
||||
<nav id="navBar" class="mySeccion" data-collapsed="true">
|
||||
<ul class="linksNavBar">
|
||||
<li><router-link to="/ihc/">Inicio</router-link></li>
|
||||
<li><router-link to="/ihc/tienda/">Comprar</router-link></li>
|
||||
<li><router-link to="/ihc/usuarios/mi-cuenta">Mi cuenta</router-link></li>
|
||||
<li><router-link to="/ihc/carrito/">Carrito</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<div>
|
||||
<header-mini></header-mini>
|
||||
|
||||
<nav-bar></nav-bar>
|
||||
|
||||
<section class="tienda contenedor mySeccion" data-collapsed="false">
|
||||
<br>
|
||||
<br>
|
||||
<div class="tienda--titulo">Tienda</div>
|
||||
<br>
|
||||
Ver mi cuenta | Ver mi carrito
|
||||
<br>
|
||||
<br>
|
||||
<template v-for="item in platos">
|
||||
<div class="row tienda--tarjeta">
|
||||
<div class="col-4">
|
||||
<img class="responsive-image" :src="item.imgUrl"/>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="tienda--tarjeta--titulo">
|
||||
{{ item.nombre }}
|
||||
</div>
|
||||
<br>
|
||||
<div class="tienda--tarjeta--descripcion">
|
||||
{{ item.descripcion }}
|
||||
</div>
|
||||
<br>
|
||||
<div class="tienda--tarjeta--precio">
|
||||
{{ item.precio }}
|
||||
</div>
|
||||
<br>
|
||||
<div class="tienda--tarjeta--cantidad">
|
||||
1
|
||||
<i class='material-icons plato--Cantidad--Icon'>add</i>
|
||||
</div>
|
||||
<br/>
|
||||
<button class="tienda--tarjeta--botonComprar">
|
||||
<i class='material-icons'>add_shopping_cart</i> Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<br>
|
||||
<br>
|
||||
</section>
|
||||
|
||||
<mi-footer></mi-footer>
|
||||
</div>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
[
|
||||
{
|
||||
"nombre": "Soupe à l'oignon",
|
||||
"descripcion": "Sopa tradicional hecha con cebolla y carne.",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714571.jpg",
|
||||
"precio": 20
|
||||
},
|
||||
{
|
||||
"nombre": "Coq au vin",
|
||||
"descripcion": "Pollo cocinado con vino, hongos, carne de cerdo y ajo",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714572.jpg",
|
||||
"precio": 50
|
||||
},
|
||||
{
|
||||
"nombre": "Beef bourguignon",
|
||||
"descripcion": "Filete cocinado en vino, sasonado con especias",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714573.jpg",
|
||||
"precio": 30
|
||||
},
|
||||
{
|
||||
"nombre": "Cassoulet",
|
||||
"descripcion": "Guiso parecido a las habichuelas típicas españolas que se hace con alubias blancas o frijoles acompañadas de carne de diferentes animales",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Cassoulet-570x320.jpg",
|
||||
"precio": 22
|
||||
},
|
||||
{
|
||||
"nombre": "Fondue de queso",
|
||||
"descripcion": "Crema que se puede tomar bien como acompañante de otros ingredientes o bien mojando trozos de pan en él.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Fondue-570x321.jpg",
|
||||
"precio": 5
|
||||
},
|
||||
{
|
||||
"nombre": "Ratatouille",
|
||||
"descripcion": "Elaborado con diversas hortalizas, es un plato natural de Niza y la región de Provenza, al sureste de Francia.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Ratatouille-570x320.jpg",
|
||||
"precio": 35
|
||||
},
|
||||
{
|
||||
"nombre": "Magret de canard",
|
||||
"descripcion": "Un filete de carne magra, que suele provenir de un ganso o pato cebado",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Magret-de-Canard-570x320.jpg",
|
||||
"precio": 17
|
||||
},
|
||||
{
|
||||
"nombre": "Merluza al beurre blanc",
|
||||
"descripcion": "Este plato consiste en troncos o lomos de merluza que se sirven en salsa beurre blanc.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Merluza-a-la-beurre-blanc-570x320.jpg",
|
||||
"precio": 22
|
||||
}
|
||||
]
|
||||
137
src/js/base.js
137
src/js/base.js
|
|
@ -1,137 +0,0 @@
|
|||
const carritoUsuario = [];
|
||||
|
||||
/* Height Transition by CSS Tricks. Returns a Promise */
|
||||
const collapseSection = element => {
|
||||
return new Promise((resolve, reject) => {
|
||||
|
||||
// get the height of the element's inner content, regardless of its actual size
|
||||
let sectionHeight = element.scrollHeight;
|
||||
|
||||
// temporarily disable all css transitions
|
||||
let elementTransition = element.style.transition;
|
||||
element.style.transition = '';
|
||||
|
||||
// on the next frame (as soon as the previous style change has taken effect),
|
||||
// explicitly set the element's height to its current pixel height, so we
|
||||
// aren't transitioning out of 'auto'
|
||||
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
element.style.height = sectionHeight + 'px';
|
||||
element.style.transition = elementTransition;
|
||||
|
||||
// on the next frame (as soon as the previous style change has taken effect),
|
||||
// have the element transition to height: 0
|
||||
requestAnimationFrame(function () {
|
||||
element.style.height = 0 + 'px';
|
||||
setTimeout(() => {
|
||||
resolve("Termine de ocultar we v':");
|
||||
}, 160);
|
||||
});
|
||||
});
|
||||
|
||||
// mark the section as "currently collapsed"
|
||||
element.setAttribute('data-collapsed', 'true');
|
||||
});
|
||||
};
|
||||
|
||||
const expandSection = element => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// get the height of the element's inner content, regardless of its actual size
|
||||
let sectionHeight = element.scrollHeight;
|
||||
|
||||
// have the element transition to the height of its inner content
|
||||
element.style.height = sectionHeight + 'px';
|
||||
|
||||
// when the next css transition finishes (which should be the one we just triggered)
|
||||
element.addEventListener('transitionend', function (e) {
|
||||
// remove this event listener so it only gets triggered once
|
||||
element.removeEventListener('transitionend', arguments.callee);
|
||||
|
||||
// remove "height" from the element's inline styles, so it can return to its initial value
|
||||
element.style.height = null;
|
||||
setTimeout(() => {
|
||||
resolve("Termine de ampliar we v':");
|
||||
}, 0);
|
||||
});
|
||||
|
||||
// mark the section as "currently not collapsed"
|
||||
element.setAttribute('data-collapsed', 'false');
|
||||
});
|
||||
};
|
||||
|
||||
const abrirElemF = (element, midF, postF) => {
|
||||
if (element.getAttribute("data-collapsed") === "true") {
|
||||
if (midF !== undefined)
|
||||
midF();
|
||||
expandSection(element).then(() => {
|
||||
if (postF !== undefined)
|
||||
postF();
|
||||
});
|
||||
} else {
|
||||
collapseSection(element).then(() => {
|
||||
if (midF !== undefined)
|
||||
midF();
|
||||
expandSection(element).then(() => {
|
||||
if (postF !== undefined)
|
||||
postF();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const cerrarElemF = (element, postF) => {
|
||||
if (element.getAttribute("data-collapsed") === "false") {
|
||||
collapseSection(element).then(() => {
|
||||
if (postF !== undefined)
|
||||
postF();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const carrito = new Vue({
|
||||
el: "#carrito",
|
||||
data: {
|
||||
item: carritoUsuario,
|
||||
descuento: 0
|
||||
},
|
||||
computed: {
|
||||
cantidadItems: function () {
|
||||
let items = 0;
|
||||
for (const i in this.item)
|
||||
items++;
|
||||
return items;
|
||||
},
|
||||
subTotal: function () {
|
||||
let subT = 0;
|
||||
for (const itemI in this.item ) {
|
||||
if (this.item.hasOwnProperty(itemI)){
|
||||
const item = this.item[itemI];
|
||||
subT += (item["precio"] * item["cantidad"]);
|
||||
}
|
||||
}
|
||||
return subT;
|
||||
},
|
||||
total: function () {
|
||||
return this.subTotal - this.descuento;
|
||||
},
|
||||
noEstaVacio: function () {
|
||||
for (const i in this.item) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
restarCantidad: function (elem) {
|
||||
const cantidad = parseInt(elem.cantidad);
|
||||
if (cantidad > 0)
|
||||
elem.cantidad = cantidad -1;
|
||||
},
|
||||
aumentarCantidad: function (elem) {
|
||||
const cantidad = parseInt(elem.cantidad);
|
||||
if (cantidad >= 0)
|
||||
elem.cantidad = cantidad+1;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
const topBar = document.createElement("div");
|
||||
topBar.style.position = "fixed";
|
||||
topBar.style.minHeight = "3px";
|
||||
topBar.style.backgroundColor = "red";
|
||||
topBar.style.zIndex = "1";
|
||||
|
||||
const transitionD = 500;
|
||||
topBar.style.transition = `min-width ${transitionD}ms, opacity 250ms`;
|
||||
topBar.style.minWidth = "0";
|
||||
|
||||
let widthDestino = 0;
|
||||
|
||||
document.body.appendChild(topBar);
|
||||
|
||||
let promesaActual;
|
||||
|
||||
const cambiarProgreso = progreso => {
|
||||
widthDestino = progreso;
|
||||
promesaActual = new Promise((resolve, reject) => {
|
||||
topBar.style.minWidth = `${progreso}%`;
|
||||
setTimeout(() => resolve(),transitionD);
|
||||
});
|
||||
return promesaActual;
|
||||
};
|
||||
|
||||
const cancelarTransicion = () => {
|
||||
const transiciones = topBar.style.transition;
|
||||
topBar.style.transition = "";
|
||||
topBar.style.minWidth = `${widthDestino}%`;
|
||||
topBar.style.transition = transiciones;
|
||||
};
|
||||
|
||||
const ocultarTopBar = () => {
|
||||
topBar.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
topBar.style.minWidth = "0%";
|
||||
},250);
|
||||
};
|
||||
|
||||
const reiniciarTopBar = () => {
|
||||
const transiciones = topBar.style.transition;
|
||||
topBar.style.transition = "";
|
||||
topBar.style.minWidth = `0`;
|
||||
topBar.style.opacity = "1";
|
||||
topBar.style.transition = transiciones;
|
||||
};
|
||||
|
|
@ -1,429 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Muli|Open+Sans')
|
||||
|
||||
$fuenteTitulos: 'Muli'
|
||||
$fuentePrincipal: 'Open Sans'
|
||||
|
||||
$colorPrincipalOscuro: #3d3d7c
|
||||
|
||||
*
|
||||
box-sizing: border-box
|
||||
|
||||
html, body
|
||||
margin: 0
|
||||
padding: 0
|
||||
font-family: $fuentePrincipal, sans-serif
|
||||
|
||||
header
|
||||
background-color: #44A
|
||||
box-shadow: 0 5px 5px #999999
|
||||
|
||||
nav
|
||||
background-color: #3d3d7c
|
||||
color: white
|
||||
|
||||
section
|
||||
overflow: hidden
|
||||
transition: height 150ms ease-out
|
||||
height: auto
|
||||
|
||||
footer
|
||||
background-color: #333
|
||||
color: #EEE
|
||||
box-shadow: inset 0 5px 5px #999999
|
||||
padding: 40px
|
||||
|
||||
.contenedor
|
||||
max-width: 1200px
|
||||
width: 80%
|
||||
margin: auto
|
||||
|
||||
.col-1
|
||||
width: 8.33%
|
||||
|
||||
.col-2
|
||||
width: 16.66%
|
||||
|
||||
.col-3
|
||||
width: 25%
|
||||
|
||||
.col-4
|
||||
width: 33.33%
|
||||
|
||||
.col-5
|
||||
width: 41.66%
|
||||
|
||||
.col-6
|
||||
width: 50%
|
||||
|
||||
.col-7
|
||||
width: 58.33%
|
||||
|
||||
.col-8
|
||||
width: 66.66%
|
||||
|
||||
.col-9
|
||||
width: 75%
|
||||
|
||||
.col-10
|
||||
width: 83.33%
|
||||
|
||||
.col-11
|
||||
width: 91.66%
|
||||
|
||||
.col-12
|
||||
width: 100%
|
||||
|
||||
[class*="col-"]
|
||||
float: left
|
||||
|
||||
.row::after
|
||||
content: ""
|
||||
clear: both
|
||||
display: table
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
#tituloP
|
||||
padding: 30px
|
||||
color: white
|
||||
font:
|
||||
size: 50px
|
||||
family: $fuenteTitulos
|
||||
|
||||
#tituloP--descripcion
|
||||
padding: 10px
|
||||
font:
|
||||
size: large
|
||||
family: $fuentePrincipal
|
||||
|
||||
.tituloP--mini
|
||||
padding: 10px !important
|
||||
font:
|
||||
size: 40px !important
|
||||
|
||||
.titulo--link
|
||||
color: white
|
||||
text-decoration: none
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
.boton
|
||||
display: inline-block
|
||||
margin: 20px
|
||||
border-radius: 3px
|
||||
box-shadow: 1px 1px 3px #090909
|
||||
padding: 10px 30px
|
||||
cursor: pointer
|
||||
text-decoration: none
|
||||
|
||||
.mySeccion
|
||||
overflow: hidden
|
||||
transition: height 150ms ease-out
|
||||
height: auto
|
||||
|
||||
#botonRegistro
|
||||
background-color: green
|
||||
color: white
|
||||
font-size: large
|
||||
transition: transform 200ms, box-shadow 200ms
|
||||
|
||||
#botonRegistro:hover
|
||||
transform: translate(-1px, -1px)
|
||||
box-shadow: 2px 2px 7px #050505
|
||||
|
||||
#botonInicioSesion
|
||||
background-color: white
|
||||
transition: transform 200ms, box-shadow 200ms
|
||||
|
||||
#botonInicioSesion:hover
|
||||
transform: translate(-1px, -1px)
|
||||
box-shadow: 2px 2px 7px #050505
|
||||
|
||||
#botonInicioSesion:visited
|
||||
color: black
|
||||
|
||||
.contenido
|
||||
margin: 40px 0
|
||||
|
||||
.image
|
||||
padding: 0 20px
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
.descripcionComida
|
||||
padding: 0 30px
|
||||
text-align: center
|
||||
font-size: large
|
||||
|
||||
.inicio_registro
|
||||
color: white
|
||||
|
||||
input
|
||||
min-width: 80%
|
||||
min-height: 40px
|
||||
padding: 10px
|
||||
color: #44A
|
||||
font-size: large
|
||||
|
||||
.botonEnviarForm
|
||||
background-color: white
|
||||
box-shadow: 1px 1px 2px gray
|
||||
cursor: pointer
|
||||
border: none
|
||||
transition: background-color 250ms, color 250ms, transform 250ms, box-shadow 250ms
|
||||
|
||||
.botonEnviarForm:hover
|
||||
background-color: #4949e2
|
||||
color: white
|
||||
transform: translate(-1px, -1px)
|
||||
box-shadow: 2px 2px 2px gray
|
||||
|
||||
.google-button
|
||||
height: 40px
|
||||
border-width: 0
|
||||
background: white
|
||||
color: #737373
|
||||
border-radius: 5px
|
||||
white-space: nowrap
|
||||
box-shadow: 1px 1px 0 1px rgba(0, 0, 0, 0.05)
|
||||
transition-property: background-color, box-shadow
|
||||
transition-duration: 150ms
|
||||
transition-timing-function: ease-in-out
|
||||
padding: 0
|
||||
cursor: pointer
|
||||
|
||||
.google-button:focus, .google-button:hover
|
||||
box-shadow: 1px 4px 5px 1px rgba(0, 0, 0, 0.1)
|
||||
|
||||
.google-button:active
|
||||
background-color: #e5e5e5
|
||||
box-shadow: none
|
||||
transition-duration: 10ms
|
||||
|
||||
.google-button__icon
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
margin: 8px 0 8px 8px
|
||||
width: 18px
|
||||
height: 18px
|
||||
box-sizing: border-box
|
||||
|
||||
.google-button__text
|
||||
display: inline-block
|
||||
vertical-align: middle
|
||||
padding: 0 24px
|
||||
font-size: 14px
|
||||
font-weight: bold
|
||||
font-family: 'Roboto', arial, sans-serif
|
||||
|
||||
.unseen
|
||||
visibility: hidden
|
||||
|
||||
.botonAddCart
|
||||
background-color: white
|
||||
padding: 5px
|
||||
color: #4444aa
|
||||
box-shadow: 0.1px 0.1px grey
|
||||
border-radius: 2px
|
||||
cursor: pointer
|
||||
font-size: large
|
||||
transition: background-color 250ms, color 250ms
|
||||
user-select: none
|
||||
|
||||
.botonAddCart:hover
|
||||
background-color: #4444AA
|
||||
color: white
|
||||
|
||||
.caja
|
||||
border-radius: 4px
|
||||
box-shadow: 1px 1px 2px gray
|
||||
padding: 15px
|
||||
|
||||
.botonPayPal
|
||||
background-color: #0070ba
|
||||
color: white
|
||||
font-size: large
|
||||
padding: 10px
|
||||
border: none
|
||||
border-radius: 5px
|
||||
cursor: pointer
|
||||
margin: 0 5px
|
||||
|
||||
.botonVisa
|
||||
@extend .botonPayPal
|
||||
background-color: #1a1f5e
|
||||
|
||||
.linksNavBar
|
||||
margin: 0
|
||||
li
|
||||
list-style: none
|
||||
float: left
|
||||
transition: background-color 250ms
|
||||
a
|
||||
cursor: pointer
|
||||
display: inline-block
|
||||
padding: 15px
|
||||
color: white
|
||||
text-decoration: none
|
||||
&:after
|
||||
clear: both
|
||||
&:hover
|
||||
background-color: #35356a
|
||||
|
||||
.plato--Titulo
|
||||
font:
|
||||
size: x-large
|
||||
weight: bold
|
||||
family: $fuenteTitulos
|
||||
color: #3d3d7c
|
||||
|
||||
.plato--Descripcion
|
||||
font:
|
||||
size: large
|
||||
color: #333333
|
||||
|
||||
.plato--Precio
|
||||
font-size: large
|
||||
&:before
|
||||
color: green
|
||||
content: "Precio unitario: "
|
||||
&:after
|
||||
content: " S/."
|
||||
|
||||
.plato--Cantidad
|
||||
font:
|
||||
size: large
|
||||
weight: bold
|
||||
display: inline-table
|
||||
padding: 15px
|
||||
|
||||
.plato--Cantidad--Icon
|
||||
display: table-cell
|
||||
vertical-align: top
|
||||
cursor: pointer
|
||||
transition: color 250ms
|
||||
-webkit-user-select: none
|
||||
-moz-user-select: none
|
||||
-ms-user-select: none
|
||||
user-select: none
|
||||
&:hover
|
||||
color: #4444aa
|
||||
|
||||
.carrito
|
||||
text-align: left
|
||||
|
||||
#carrito--elementos, #carrito--precio
|
||||
padding: 0 10px
|
||||
|
||||
.carritoElem
|
||||
&:after
|
||||
clear: both
|
||||
|
||||
.carritoElem--img
|
||||
float: left
|
||||
margin: 10px 20px
|
||||
width: 200px
|
||||
|
||||
.carrito--subTotal
|
||||
text-align: right
|
||||
font:
|
||||
weight: bold
|
||||
family: $fuenteTitulos, sans-serif
|
||||
size: x-large
|
||||
&:before
|
||||
content: "Subtotal: "
|
||||
&:after
|
||||
content: " S/."
|
||||
|
||||
.carrito--precio--contenido--titulo
|
||||
text-align: center
|
||||
font:
|
||||
family: $fuenteTitulos, sans-serif
|
||||
size: x-large
|
||||
weight: 900
|
||||
|
||||
.carrito--precio--contenido--botonPagar
|
||||
display: inline-block
|
||||
width: 100%
|
||||
text-align: center
|
||||
padding: 10px
|
||||
background-color: #4444aa
|
||||
color: white
|
||||
border-radius: 3px
|
||||
cursor: pointer
|
||||
&:hover
|
||||
background-color: #3d3d7c
|
||||
|
||||
#carrito--boton--seguircomprando
|
||||
margin: 10px 0
|
||||
padding: 10px 20px
|
||||
background-color: green
|
||||
color: white
|
||||
text-decoration: none
|
||||
border-radius: 4px
|
||||
&:visited
|
||||
color: white
|
||||
|
||||
#carrito--tituloprincipal
|
||||
text-align: center
|
||||
font:
|
||||
size: xx-large
|
||||
family: $fuenteTitulos, sans-serif
|
||||
weight: 900
|
||||
margin: 10px 0
|
||||
|
||||
.responsive-image
|
||||
padding: 0 20px
|
||||
width: 100%
|
||||
height: auto
|
||||
|
||||
|
||||
.tienda--titulo
|
||||
text-align: center
|
||||
font:
|
||||
family: $fuenteTitulos, sans-serif
|
||||
size: xx-large
|
||||
weight: 900
|
||||
margin: 10px 0
|
||||
|
||||
.tienda--tarjeta
|
||||
padding: 10px
|
||||
margin: 10px 5px
|
||||
border-radius: 3px
|
||||
box-shadow: 2px 2px 5px gray
|
||||
|
||||
.tienda--tarjeta--titulo
|
||||
font:
|
||||
size: x-large
|
||||
family: $fuenteTitulos, sans-serif
|
||||
color: $colorPrincipalOscuro
|
||||
|
||||
.tienda--tarjeta--descripcion
|
||||
|
||||
.tienda--tarjeta--precio
|
||||
&:before
|
||||
content: "Precio unitario: "
|
||||
color: green
|
||||
&:after
|
||||
content: " S/."
|
||||
|
||||
.tienda--tarjeta--cantidad
|
||||
&:before
|
||||
content: "Cantidad <i class='material-icons plato--Cantidad--Icon'>remove</i> "
|
||||
|
||||
.tienda--tarjeta--botonComprar
|
||||
background-color: white
|
||||
color: $colorPrincipalOscuro
|
||||
padding: 10px
|
||||
cursor: pointer
|
||||
border-radius: 3px
|
||||
transition: color 100ms, background-color 100ms
|
||||
font:
|
||||
size: large
|
||||
weight: bold
|
||||
family: $fuenteTitulos
|
||||
&:hover
|
||||
background-color: $colorPrincipalOscuro
|
||||
color: white
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<br />
|
||||
<br />
|
||||
<div class="center">
|
||||
Pedidos<br />
|
||||
<br />
|
||||
<a href="./#usuarios/mi-cuenta">Ver mi cuenta</a><br />
|
||||
<br />
|
||||
<br />
|
||||
<div id="productos">
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
<br/>
|
||||
<br/>
|
||||
<div class="center" style="font-size: large">
|
||||
Mi cuenta<br/>
|
||||
<br/>
|
||||
<a href="./#usuarios/">Seguir comprando</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
Mis datos:<br/>
|
||||
<br/>
|
||||
<div style="text-align: left">
|
||||
Nombre: {{ userName }}<br/>
|
||||
Correo electrónico: {{ userEmail }}<br/>
|
||||
Métodos de pago: {{ userPaymentMethods }}<br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
Historial de compras:<br/>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-3 unseen">.</div>
|
||||
<div class="col-6">
|
||||
<img class="image" src="https://www.expatica.com/media/upload/714571.jpg">
|
||||
<div>Soupe à l'oignon</div>
|
||||
<br>
|
||||
<div>Sopa tradicional hecha con cebolla y carne.</div>
|
||||
<div class="center">20 S/.</div>
|
||||
<div>Fecha de compra: 17/09/18</div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col-3 unseen">.</div>
|
||||
</div>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-3 unseen">.</div>
|
||||
<div class="col-6">
|
||||
<img class="image" src="https://www.expatica.com/media/upload/714573.jpg">
|
||||
<div>Cassoulet</div>
|
||||
<br>
|
||||
<div>Plato de habas con carne y especies.</div>
|
||||
<div class="center">5 S/.</div>
|
||||
<div>Fecha de compra: 15/09/18</div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="col-3 unseen">.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
|
|
@ -1,84 +0,0 @@
|
|||
<br/>
|
||||
<br/>
|
||||
<div class="center">
|
||||
<div id="carrito--tituloprincipal">
|
||||
Carrito de compras
|
||||
</div>
|
||||
<br/>
|
||||
<a id="carrito--boton--seguircomprando" href="./#usuarios/">Seguir comprando</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<div id="carrito" class="row carrito">
|
||||
|
||||
<div id="carrito--elementos" class="col-8">
|
||||
<div id="carrito--elementos--contenido" class="caja">
|
||||
<template v-if="noEstaVacio">
|
||||
<template v-for="producto in item">
|
||||
<div class="carritoElem">
|
||||
<img class="carritoElem--img" v-bind:src="producto.imgUrl">
|
||||
<div class="plato--Titulo">{{ producto.nombre }}</div>
|
||||
<br>
|
||||
<div class="plato--Precio">{{ producto.precio }}</div>
|
||||
<div class="plato--Cantidad">Cantidad:
|
||||
<i class="material-icons plato--Cantidad--Icon" v-on:click="restarCantidad(producto)">remove</i>
|
||||
<span>{{ producto.cantidad }}</span>
|
||||
<i class="material-icons plato--Cantidad--Icon" v-on:click="aumentarCantidad(producto)">add</i>
|
||||
</div>
|
||||
<br>
|
||||
<div class="carrito--subTotal">{{ producto.precio * producto.cantidad }}</div>
|
||||
<hr>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
No hay nada en tu carrito de compras :c
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="carrito--precio" class="col-4">
|
||||
|
||||
<div id="carrito--precio--contenido" class="caja">
|
||||
<template v-if="noEstaVacio">
|
||||
<div id="pagos">
|
||||
<div style="display: inline-block;">
|
||||
{{ cantidadItems }} Producto{{ (cantidadItems>1 || cantidadItems === 0) ? 's': '' }}
|
||||
</div>
|
||||
<div style="display: inline-block; float: right; clear: both">
|
||||
{{ subTotal }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: inline-block;">
|
||||
Descuentos:
|
||||
</div>
|
||||
<div style="display: inline-block; float: right; clear: both">
|
||||
{{ descuento }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<div>
|
||||
<div class="carrito--precio--contenido--titulo" style="display: inline-block;">
|
||||
Total:
|
||||
</div>
|
||||
<div class="carrito--precio--contenido--titulo"
|
||||
style="display: inline-block; float: right; clear: both">
|
||||
{{ total }} S/.
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<a class="carrito--precio--contenido--botonPagar">
|
||||
Completar Transaccion
|
||||
</a>
|
||||
</template>
|
||||
<template v-else>
|
||||
No hay nada en tu carrito de compras :c
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
[
|
||||
{
|
||||
"nombre": "Soupe à l'oignon",
|
||||
"descripcion": "Sopa tradicional hecha con cebolla y carne.",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714571.jpg",
|
||||
"precio": 20
|
||||
},
|
||||
{
|
||||
"nombre": "Coq au vin",
|
||||
"descripcion": "Pollo cocinado con vino, hongos, carne de cerdo y ajo",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714572.jpg",
|
||||
"precio": 50
|
||||
},
|
||||
{
|
||||
"nombre": "Beef bourguignon",
|
||||
"descripcion": "Filete cocinado en vino, sasonado con especias",
|
||||
"imgUrl": "https://www.expatica.com/media/upload/714573.jpg",
|
||||
"precio": 30
|
||||
},
|
||||
{
|
||||
"nombre": "Cassoulet",
|
||||
"descripcion": "Guiso parecido a las habichuelas típicas españolas que se hace con alubias blancas o frijoles acompañadas de carne de diferentes animales",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Cassoulet-570x320.jpg",
|
||||
"precio": 22
|
||||
},
|
||||
{
|
||||
"nombre": "Fondue de queso",
|
||||
"descripcion": "Crema que se puede tomar bien como acompañante de otros ingredientes o bien mojando trozos de pan en él.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Fondue-570x321.jpg",
|
||||
"precio": 5
|
||||
},
|
||||
{
|
||||
"nombre": "Ratatouille",
|
||||
"descripcion": "Elaborado con diversas hortalizas, es un plato natural de Niza y la región de Provenza, al sureste de Francia.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Ratatouille-570x320.jpg",
|
||||
"precio": 35
|
||||
},
|
||||
{
|
||||
"nombre": "Magret de canard",
|
||||
"descripcion": "Un filete de carne magra, que suele provenir de un ganso o pato cebado",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Magret-de-Canard-570x320.jpg",
|
||||
"precio": 17
|
||||
},
|
||||
{
|
||||
"nombre": "Merluza al beurre blanc",
|
||||
"descripcion": "Este plato consiste en troncos o lomos de merluza que se sirven en salsa beurre blanc.",
|
||||
"imgUrl": "https://www.viajejet.com/wp-content/viajes/Merluza-a-la-beurre-blanc-570x320.jpg",
|
||||
"precio": 22
|
||||
}
|
||||
]
|
||||
Loading…
Reference in New Issue