Limpieza
This commit is contained in:
Fernando
parent
3ba30efacc
commit
ab5793e322
3
.gitignore
vendored
3
.gitignore
vendored
@ -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>
|
|
||||||
1
dist/css/base.css
vendored
1
dist/css/base.css
vendored
File diff suppressed because one or more lines are too long
10947
dist/dependencias/vue.js
vendored
10947
dist/dependencias/vue.js
vendored
File diff suppressed because it is too large
Load Diff
1
dist/dependencias/vuerouter.min.js
vendored
1
dist/dependencias/vuerouter.min.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/app.js
vendored
1
dist/js/app.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/base.min.js
vendored
1
dist/js/base.min.js
vendored
File diff suppressed because one or more lines are too long
1
dist/js/topbar.min.js
vendored
1
dist/js/topbar.min.js
vendored
@ -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
Block a user