diff --git a/package-lock.json b/package-lock.json index 9044968..53bf97b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1973,6 +1973,14 @@ "@types/jasmine": "*" } }, + "@types/jquery": { + "version": "3.3.31", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.31.tgz", + "integrity": "sha512-Lz4BAJihoFw5nRzKvg4nawXPzutkv7wmfQ5121avptaSIXlDNJCUuxZxX/G+9EVidZGuO0UBlk+YjKbwRKJigg==", + "requires": { + "@types/sizzle": "*" + } + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -1997,6 +2005,11 @@ "integrity": "sha512-lMC2G0ItF2xv4UCiwbJGbnJlIuUixHrioOhNGHSCsYCJ8l4t9hMCUimCytvFv7qy6AfSzRxhRHoGa+UqaqwyeA==", "dev": true }, + "@types/sizzle": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz", + "integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg==" + }, "@types/source-list-map": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", diff --git a/package.json b/package.json index 6e309f7..9d80083 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@angular/platform-browser": "~8.2.14", "@angular/platform-browser-dynamic": "~8.2.14", "@angular/router": "~8.2.14", + "@types/jquery": "^3.3.31", "bootstrap": "^4.4.1", "electron-debug": "^3.0.1", "hammerjs": "^2.0.8", diff --git a/src/app/modules/carrito/carrito.component.html b/src/app/modules/carrito/carrito.component.html index ac988fe..ae2b2a6 100644 --- a/src/app/modules/carrito/carrito.component.html +++ b/src/app/modules/carrito/carrito.component.html @@ -2,7 +2,7 @@ -
+
@@ -22,7 +22,7 @@
diff --git a/src/app/modules/carrito/carrito.component.scss b/src/app/modules/carrito/carrito.component.scss index e69de29..377deed 100644 --- a/src/app/modules/carrito/carrito.component.scss +++ b/src/app/modules/carrito/carrito.component.scss @@ -0,0 +1,7 @@ +.carrito-content.media-pantalla { + max-height: 65% !important; +} + +.carrito-articulo.media-pantalla { + min-height: 160px !important; +} diff --git a/src/app/modules/carrito/carrito.component.ts b/src/app/modules/carrito/carrito.component.ts index de7c4f0..651badb 100644 --- a/src/app/modules/carrito/carrito.component.ts +++ b/src/app/modules/carrito/carrito.component.ts @@ -42,6 +42,7 @@ export class CarritoComponent implements OnInit, OnDestroy { this.router.navigate(['']); return; } + this.mediaPantallaP() } ngOnDestroy() { @@ -75,4 +76,9 @@ export class CarritoComponent implements OnInit, OnDestroy { this.inactiveScreen.startTimeOutInactividad(); } + mediaPantallaP() { + if ($('body').hasClass('media-pantalla')) { + $('.carrito-content,.carrito-articulo').addClass('media-pantalla'); + } + } } diff --git a/src/app/modules/forma-pago/forma-pago.component.html b/src/app/modules/forma-pago/forma-pago.component.html index afc9869..bcbda05 100644 --- a/src/app/modules/forma-pago/forma-pago.component.html +++ b/src/app/modules/forma-pago/forma-pago.component.html @@ -18,7 +18,7 @@
-
+
-
+
-
+
-
+
{ this.goToSplash(); }, 10000); + this.mediaPantalla(); } OnDestroy() { @@ -30,4 +31,9 @@ export class MensajeFinalComponent implements OnInit { this.router.navigate(['']); } + mediaPantalla() { + if ($('body').hasClass('media-pantalla')) { + $('body').removeClass('media-pantalla'); + } + } } diff --git a/src/app/modules/opcion-pedido/opcion-pedido.component.html b/src/app/modules/opcion-pedido/opcion-pedido.component.html index 3acf742..451f8c4 100644 --- a/src/app/modules/opcion-pedido/opcion-pedido.component.html +++ b/src/app/modules/opcion-pedido/opcion-pedido.component.html @@ -16,7 +16,7 @@
-
+
@@ -43,7 +43,7 @@
-
+
diff --git a/src/app/modules/opcion-pedido/opcion-pedido.component.scss b/src/app/modules/opcion-pedido/opcion-pedido.component.scss index e69de29..d7fb0a2 100644 --- a/src/app/modules/opcion-pedido/opcion-pedido.component.scss +++ b/src/app/modules/opcion-pedido/opcion-pedido.component.scss @@ -0,0 +1,19 @@ +.reduce-card-1.media-pantalla { + position: absolute; + bottom: 150px; + -webkit-box-flex: 0; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; + left: 10%; + margin-left: 0 !important; +} + +.reduce-card-2.media-pantalla { + position: absolute; + bottom: 150px; + -webkit-box-flex: 0; + flex: 0 0 41.6666666667%; + max-width: 41.6666666667%; + right: 10%; + margin-right: 0 !important; +} diff --git a/src/app/modules/opcion-pedido/opcion-pedido.component.ts b/src/app/modules/opcion-pedido/opcion-pedido.component.ts index e2b17d8..f4a15b5 100644 --- a/src/app/modules/opcion-pedido/opcion-pedido.component.ts +++ b/src/app/modules/opcion-pedido/opcion-pedido.component.ts @@ -13,6 +13,7 @@ export class OpcionPedidoComponent implements OnInit { ) { } ngOnInit() { + this.reducirPantalla(); } goTo(path) { @@ -22,4 +23,10 @@ export class OpcionPedidoComponent implements OnInit { seleccionPedido(lugar) { localStorage.setItem('pedidoPara', lugar); } + + reducirPantalla() { + if ($('body').hasClass('media-pantalla')) { + $('.reduce-card-1,.reduce-card-2').addClass('media-pantalla'); + } + } } diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html index b9a58e6..7156f9f 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.html +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.html @@ -12,14 +12,14 @@
-
+

CATEGORÍAS

-
+
Todos
{{categoria.detalle}}
-
+
-
+

ARTÍCULOS EN TÚ CARRITO DE COMPRAS

@@ -217,7 +223,8 @@
+ *ngIf="articuloService.carrito.length" + [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss index c7408a3..c537929 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.scss @@ -38,3 +38,24 @@ $primary: #aa006b; .line-height-sm { line-height: 1.2; } + +#content.media-pantalla,#boxCarrito.media-pantalla { + max-height: 60% !important; +} + +.cat-content.media-pantalla { + margin: 0.5rem 0.7rem !important; + height: 76% !important; +} + +.cat-box.media-pantalla{ + height: calc(100% - 85px) !important; +} + +.cat-btn.media-pantalla { + height: 7% !important; +} + +.img-categoria.media-pantalla{ + min-height: 40px !important; +} \ No newline at end of file diff --git a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts index d8bc15e..ede151a 100644 --- a/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts +++ b/src/app/modules/seleccion-articulos/seleccion-articulos.component.ts @@ -39,6 +39,7 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy { ngOnInit() { this.getCategorias(); + this.mediaPantalla(); } ngOnDestroy() { @@ -182,4 +183,10 @@ export class SeleccionArticulosComponent implements OnInit, OnDestroy { el.scroll({ behavior: 'smooth', left: value + el.scrollLeft }); }, 500); } + + mediaPantalla() { + if ($('body').hasClass('media-pantalla')) { + $('.cat-content,#content,.cat-btn,#boxCarrito,.cat-box,.img-categoria').addClass('media-pantalla').addBack('media-pantalla'); + } + } } diff --git a/src/app/modules/splash-screen/splash-screen.component.ts b/src/app/modules/splash-screen/splash-screen.component.ts index 84fdb7f..c61cb55 100644 --- a/src/app/modules/splash-screen/splash-screen.component.ts +++ b/src/app/modules/splash-screen/splash-screen.component.ts @@ -1,25 +1,25 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit } from "@angular/core"; @Component({ - selector: 'app-splash-screen', - templateUrl: './splash-screen.component.html', - styleUrls: ['./splash-screen.component.scss'] + selector: "app-splash-screen", + templateUrl: "./splash-screen.component.html", + styleUrls: ["./splash-screen.component.scss"] }) export class SplashScreenComponent implements OnInit { timerSplashScreen = 2000; showSplashScreen = true; - textWelcome = 'BIENVENIDO A SPOT!'; - textComoEstas = '¿cómo estás?'; - textInvitamos = 'TE INVITAMOS A HACER'; - textTuPedido = 'tu pedido acá'; + textWelcome = "BIENVENIDO A SPOT!"; + textComoEstas = "¿cómo estás?"; + textInvitamos = "TE INVITAMOS A HACER"; + textTuPedido = "tu pedido acá"; - constructor() { } + constructor() {} ngOnInit() { localStorage.clear(); setTimeout(() => { this.showSplashScreen = false; }, this.timerSplashScreen); + $('body').removeClass('media-pantalla'); } - } diff --git a/src/app/shared/footer/footer.component.html b/src/app/shared/footer/footer.component.html index 42bb091..4f72870 100644 --- a/src/app/shared/footer/footer.component.html +++ b/src/app/shared/footer/footer.component.html @@ -1,7 +1,7 @@
-
-
ESTAMOS PARA AYUDARTE
+
+
REDUCIR PANTALLA
-
+
+
diff --git a/src/app/shared/header-publicidad/header-publicidad.component.scss b/src/app/shared/header-publicidad/header-publicidad.component.scss index e69de29..c584fef 100644 --- a/src/app/shared/header-publicidad/header-publicidad.component.scss +++ b/src/app/shared/header-publicidad/header-publicidad.component.scss @@ -0,0 +1,8 @@ +#headerPublicidad.media-pantalla { + max-height: 18% !important; + padding-bottom: 0 !important; +} + +#headerPad.media-pantalla { + padding: 0.3rem !important; +} diff --git a/src/app/shared/header-publicidad/header-publicidad.component.ts b/src/app/shared/header-publicidad/header-publicidad.component.ts index f8286d2..a54e745 100644 --- a/src/app/shared/header-publicidad/header-publicidad.component.ts +++ b/src/app/shared/header-publicidad/header-publicidad.component.ts @@ -25,6 +25,7 @@ export class HeaderPublicidadComponent implements OnInit { ngOnInit() { this.getPublicidades(); + this.mediaPantalla(); } getPublicidades() { @@ -60,4 +61,9 @@ export class HeaderPublicidadComponent implements OnInit { }); } + mediaPantalla() { + if ($('body').hasClass('media-pantalla')) { + $('#headerPublicidad,#headerPad').addClass('media-pantalla'); + } + } } diff --git a/src/app/shared/promocion/promocion.component.ts b/src/app/shared/promocion/promocion.component.ts index 9647852..3631025 100644 --- a/src/app/shared/promocion/promocion.component.ts +++ b/src/app/shared/promocion/promocion.component.ts @@ -34,6 +34,7 @@ export class PromocionComponent implements OnInit { this.articulosPromo[0] = res; this.getPromociones(); }, err => console.error(err)); + this.mediaPantalla(); } elegirPromo(promo: IArticulo) { @@ -57,4 +58,9 @@ export class PromocionComponent implements OnInit { this.inactiveScreen.startTimeOutInactividad(); } + mediaPantalla() { + if($('body').hasClass('media-pantalla')) { + $('.modal-content').addClass('media-pantalla'); + } + } } diff --git a/src/etc/AppSettings.ejemplo.ts b/src/etc/AppSettings.ejemplo.ts deleted file mode 100644 index b74b25f..0000000 --- a/src/etc/AppSettings.ejemplo.ts +++ /dev/null @@ -1,7 +0,0 @@ -// export const APP_SETTINGS = { - // apiDeboSuite: 'http://localhost:9900', - // puntoVenta: 9998, - // numeroPlanilla: 1111, - // codigoP: 99996, - // terminal: 101 -// } diff --git a/src/styles.scss b/src/styles.scss index 2034c9e..5def4ed 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -65,3 +65,15 @@ p { .rotate-180-neg { transform: rotate(-180deg); } + +body.media-pantalla { + height: 50% !important; + position: absolute; + bottom: 0; + width: 100%; +} + +.modal-content.media-pantalla { + margin-top: auto !important; + margin-bottom: 50px !important; +} diff --git a/tsconfig.app.json b/tsconfig.app.json index 565a11a..4b4d32e 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -2,7 +2,9 @@ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./out-tsc/app", - "types": [] + "types": [ + "jquery" + ] }, "files": [ "src/main.ts",