Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 6b010faac446b8849c4c9b2f269df26dde73a492

Authored by Marcelo Puebla
1 parent eca7b9d7df
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Fix de responsividad

Showing 4 changed files with 41 additions and 28 deletions   Show diff stats
src/app/modules/footer/footer.component.html
Diff comments   View file @ 6b010fa
1 <div class="row mx-0 h-100 justify-content-around bg-white"> 1 <div class="row mx-0 h-100 justify-content-around bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light rounded-left"> 3 <div class="btn-effect row mx-0 bg-light rounded-left">
4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div> 4 <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
5 <div class="col-auto p-0 bg-primary rounded-right"> 5 <div class="col-auto p-0 bg-primary rounded-right d-none d-sm-block">
6 <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg"> 6 <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
7 </div> 7 </div>
8 </div> 8 </div>
9 </div> 9 </div>
10 <div 10 <div
11 class="btn-effect col-auto align-self-center px-0 bg-white" 11 class="btn-effect col-auto align-self-center px-0 bg-white"
12 (click)="goBack()"> 12 (click)="goBack()">
13 <div class="row mx-0 bg-light rounded-left"> 13 <div class="row mx-0 bg-light rounded-left">
14 <div class="col-auto align-self-center text-primary">VOLVER</div> 14 <div class="col-auto align-self-center text-primary">VOLVER</div>
15 <div class="col-auto p-0 bg-primary rounded-right"> 15 <div class="col-auto p-0 bg-primary rounded-right d-none d-sm-block">
16 <img class="p-2 img-volver" src="assets/img/icono-volver.svg"> 16 <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
17 </div> 17 </div>
18 </div> 18 </div>
19 </div> 19 </div>
20 </div> 20 </div>
21 21
src/app/modules/seleccion-productos/seleccion-productos.component.html
Diff comments   View file @ 6b010fa
1 <div class="h-92 bg-white"> 1 <div class="h-92 bg-white">
2 <!-- PUBLICIDADES --> 2 <!-- PUBLICIDADES -->
3 <div class="row mx-0 h-10"> 3 <div class="row mx-0 h-10">
4 <div class="col-12 p-3 h-100"> 4 <div class="col-12 p-3 h-100">
5 <div class="bg-dark h-100"></div> 5 <div class="bg-dark h-100"></div>
6 </div> 6 </div>
7 </div> 7 </div>
8 <div class="h-90"> 8 <div class="h-90">
9 <!-- CABECERA --> 9 <!-- CABECERA -->
10 <div class="row mx-4 h-auto border border-primary rounded-sm"> 10 <div class="row mx-4 h-auto border border-primary rounded-sm">
11 <div class="col-12 p-2 align-self-center"> 11 <div class="col-12 p-2 align-self-center">
12 <div class="px-3"> 12 <div class="px-3">
13 <span class="">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</span> 13 <span class="">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</span>
14 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 <!-- CUERPO --> 17 <!-- CUERPO -->
18 <div class="row mr-4 h-75"> 18 <div class="row mr-4 h-75">
19 <div class="col-12 h-100 px-0 py-3"> 19 <div class="col-12 h-100 px-0 py-3">
20 <div class="row mx-0 h-100"> 20 <div class="row mx-0 h-100">
21 <!-- FILTRO CATEGORIAS --> 21 <!-- FILTRO CATEGORIAS -->
22 <div class="col-md-3 col-xl-2 h-100"> 22 <div class="col-5 col-sm-3 col-xl-2 h-100">
23 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p> 23 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
24 <div class="row mx-0 h-94 align-items-center"> 24 <div class="row mx-0 h-94 align-items-center">
25 <div class="col-12 h-5"> 25 <div class="col-12 h-5">
26 <img draggable="false" ondragstart="return false;" (contextmenu)="false" 26 <img
27 class="h-100 d-block mx-auto rotate-90-neg" src="assets/img/ir-color.svg" 27 draggable="false"
28 (mousedown)="scroll(elem, -80)" (mouseup)="mouseup()" (mouseleave)="mouseup()"> 28 ondragstart="return false;"
29 (contextmenu)="false"
30 class="h-100 d-block mx-auto rotate-90-neg"
31 src="assets/img/ir-color.svg"
32 (mousedown)="scroll(templateCategorias, -80)"
33 (mouseup)="mouseup()"
34 (mouseleave)="mouseup()">
29 </div> 35 </div>
30 <div #elem class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 36 <!-- CATEGORIAS -->
31 <div class="row mx-4 mb-2 h-32 justify-content-center tab" 37 <div
38 #templateCategorias
39 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
40 <div
41 class="row mx-4 mb-2 h-32 justify-content-center tab"
32 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 42 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
33 (click)="selectCategoria(i)" *ngFor="let categoria of categorias; let i = index;"> 43 (click)="selectCategoria(i)"
34 <img class="col-12 h-50 align-self-end" src="assets/img/ir-color.svg"> 44 *ngFor="let categoria of categorias; let i = index;">
35 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}} 45 <img
36 </small> 46 class="col-12 h-50 align-self-end d-none d-sm-block"
47 src="assets/img/ir-color.svg">
48 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
37 </div> 49 </div>
38 </div> 50 </div>
39 <div class="col-12 h-5"> 51 <div class="col-12 h-5">
40 <img draggable="false" ondragstart="return false;" (contextmenu)="false" 52 <img
41 class="h-100 d-block mx-auto rotate-90" src="assets/img/ir-color.svg" (mousedown)="scroll(elem, 80)" 53 draggable="false"
42 (mouseup)="mouseup()" (mouseleave)="mouseup()"> 54 ondragstart="return false;"
55 (contextmenu)="false"
56 class="h-100 d-block mx-auto rotate-90"
57 src="assets/img/ir-color.svg"
58 (mousedown)="scroll(templateCategorias, 80)"
59 (mouseup)="mouseup()"
60 (mouseleave)="mouseup()">
43 </div> 61 </div>
44 </div> 62 </div>
45 </div> 63 </div>
46 <!-- LISTA DE ARTICULOS --> 64 <!-- LISTA DE ARTICULOS -->
47 <div class="col-md-9 col-xl-10 pb-3 h-80 align-self-center scroll-y"> 65 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
48 <div class="row row-cols-2 row-cols-sm-3 row-cols-xl-4 h-100"> 66 <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
49 <!-- ARTICULO --> 67 <!-- ARTICULO -->
50 <div class="col px-2 py-4 h-50" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]"> 68 <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
51 <div class="card h-100"> 69 <div class="card h-100">
52 <img src="assets/img/ir-color.svg" class="card-img-top h-55"> 70 <img src="assets/img/ir-color.svg" class="card-img-top h-55">
53 <div class="row mx-0 py-1 h-45 justify-content-center"> 71 <div class="row mx-0 py-1 h-auto justify-content-center">
54 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p> 72 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
55 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p> 73 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
56 <div class="col-12 px-1 align-self-end btn-effect h-auto"> 74 <div class="col-12 px-1 align-self-end btn-effect h-auto">
57 <div class="row mx-0 justify-content-between bg-primary badge-pill"> 75 <div class="row mx-0 justify-content-between bg-primary badge-pill">
58 <div class="col px-0 align-self-center text-white text-right"> 76 <div class="col px-0 align-self-center text-white text-right">
59 {{55 | currency}} 77 {{55 | currency}}
60 </div> 78 </div>
61 <div class="col-5 px-0"> 79 <div class="col-5 px-0">
62 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg"> 80 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
63 </div> 81 </div>
64 </div> 82 </div>
65 </div> 83 </div>
66 </div> 84 </div>
67 </div> 85 </div>
68 </div> 86 </div>
69 </div> 87 </div>
70 </div> 88 </div>
71 </div> 89 </div>
72 </div> 90 </div>
73 </div> 91 </div>
74 <div class="row mx-0 h-20 bg-primary"> 92 <div class="row mx-0 h-20 bg-primary">
75 93
76 </div> 94 </div>
77 </div> 95 </div>
78 96
79 </div> 97 </div>
src/scss/styles-bootstrap.scss
Diff comments   View file @ 6b010fa
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9; 8 $light: #e6e7e9;
9
10 $theme-colors: ( 9 $theme-colors: (
11 primary: $primary, 10 primary: $primary,
12 secondary: $secondary, 11 secondary: $secondary,
13 info: $info, 12 info: $info,
14 light: $light 13 light: $light
15 ); 14 );
15 $border-radius: 1.5rem !default;
16 $border-radius-lg: 2.5rem !default;
17 $border-radius-sm: 0.5rem !default;
16 18
17 @import "node_modules/bootstrap/scss/bootstrap"; 19 @import "node_modules/bootstrap/scss/bootstrap";
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/typography.scss";
2 @import "scss/height-width.scss"; 3 @import "scss/height-width.scss";
3 @import "scss/animations.scss"; 4 @import "scss/animations.scss";
4 @import "scss/icons.scss"; 5 @import "scss/icons.scss";
5 @import "node_modules/bootstrap/scss/_variables.scss"; 6 @import "node_modules/bootstrap/scss/_variables.scss";
6 7
7 @font-face { 8 @font-face {
8 font-family: "Gotham"; 9 font-family: "Gotham";
9 font-style: normal; 10 font-style: normal;
10 font-weight: normal; 11 font-weight: normal;
11 src: url("assets/fonts/gotham-medium.woff") format("woff"); 12 src: url("assets/fonts/gotham-medium.woff") format("woff");
12 } 13 }
13 14
14 html, 15 html,
15 body { 16 body {
16 min-height: 100vh; 17 min-height: 100vh;
17 max-height: 100vh; 18 max-height: 100vh;
18 height: 100vh; 19 height: 100vh;
19 background-color: #fcf2e3; 20 background-color: #fcf2e3;
20 font-family: "Gotham"; 21 font-family: "Gotham";
21 overflow: hidden; 22 overflow: hidden;
22 user-select: none; 23 user-select: none;
23 } 24 }
24 25
25 .btn-effect { 26 .btn-effect {
26 transition: all 0.3s; 27 transition: all 0.3s;
27 &:hover { 28 &:hover {
28 cursor: pointer; 29 cursor: pointer;
29 opacity: 0.7; 30 opacity: 0.7;
30 } 31 }
31 &:active { 32 &:active {
32 transform: scale(1.02); 33 transform: scale(1.02);
33 } 34 }
34 } 35 }
35 36
36 .cursor-pointer { 37 .cursor-pointer {
37 cursor: pointer; 38 cursor: pointer;
38 } 39 }
39 40
40 p { 41 p {
41 margin: 0 !important; 42 margin: 0 !important;
42 } 43 }
43 44
44 .rounded {
45 border-radius: 1.5rem !important;
46 }
47
48 .rounded-sm {
49 border-radius: 0.5rem !important;
50 }
51
52 .img-in-top { 45 .img-in-top {
53 position: absolute; 46 position: absolute;
54 top: -35px; 47 top: -35px;
55 left: 50%; 48 left: 50%;
56 height: 70px; 49 height: 70px;
57 -webkit-transform: translateX(-50%); 50 -webkit-transform: translateX(-50%);
58 transform: translateX(-50%); 51 transform: translateX(-50%);
59 } 52 }
60 53
61 .rotate-90 { 54 .rotate-90 {
62 transform: rotate(90deg); 55 transform: rotate(90deg);
63 } 56 }
64 57
65 .rotate-90-neg { 58 .rotate-90-neg {
66 transform: rotate(-90deg); 59 transform: rotate(-90deg);
67 } 60 }
68 61
69 .scroll-y { 62 .scroll-y {
70 overflow-y: auto; 63 overflow-y: auto;
71 scrollbar-width: none; 64 scrollbar-width: none;
72 &::-webkit-scrollbar { 65 &::-webkit-scrollbar {
73 display: none; 66 display: none;
74 } 67 }
75 } 68 }