Marcelo Puebla / autoservicio-axion

Download as
Browse Code »

Commit eca7b9d7df2459475af20b08b1901f2b38a5b8dd

Authored by Marcelo Puebla
1 parent 686e52a717
Exists in develop

Fixes visuales

Showing 2 changed files with 38 additions and 22 deletions   Show diff stats
src/app/modules/seleccion-productos/seleccion-productos.component.html
Diff comments   View file @ eca7b9d
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-md-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 26 <img draggable="false" ondragstart="return false;" (contextmenu)="false"
27 draggable="false" 27 class="h-100 d-block mx-auto rotate-90-neg" src="assets/img/ir-color.svg"
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(elem, -80)" (mouseup)="mouseup()" (mouseleave)="mouseup()"> 28 (mousedown)="scroll(elem, -80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
33 </div> 29 </div>
34 <div #elem class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y"> 30 <div #elem class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
35 <div 31 <div class="row mx-4 mb-2 h-32 justify-content-center tab"
36 class="row mx-4 mb-2 h-32 justify-content-center tab"
37 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }" 32 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
38 (click)="selectCategoria(i)" 33 (click)="selectCategoria(i)" *ngFor="let categoria of categorias; let i = index;">
39 *ngFor="let categoria of categorias; let i = index;">
40 <img class="col-12 h-50 align-self-end" src="assets/img/ir-color.svg"> 34 <img class="col-12 h-50 align-self-end" src="assets/img/ir-color.svg">
41 <small 35 <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}
42 class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}
43 </small> 36 </small>
44 </div> 37 </div>
45 </div> 38 </div>
46 <div class="col-12 h-5"> 39 <div class="col-12 h-5">
47 <img 40 <img draggable="false" ondragstart="return false;" (contextmenu)="false"
48 draggable="false" 41 class="h-100 d-block mx-auto rotate-90" src="assets/img/ir-color.svg" (mousedown)="scroll(elem, 80)"
49 ondragstart="return false;" 42 (mouseup)="mouseup()" (mouseleave)="mouseup()">
50 (contextmenu)="false"
51 class="h-100 d-block mx-auto rotate-90"
52 src="assets/img/ir-color.svg"
53 (mousedown)="scroll(elem, 80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
54 </div> 43 </div>
55 </div> 44 </div>
56 </div> 45 </div>
57 <div class="col-md-9 col-xl-10 bg-danger"> 46 <!-- LISTA DE ARTICULOS -->
47 <div class="col-md-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">
49 <!-- ARTICULO -->
50 <div class="col px-2 py-4 h-50" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
51 <div class="card h-100">
52 <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">
54 <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>
56 <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">
58 <div class="col px-0 align-self-center text-white text-right">
59 {{55 | currency}}
60 </div>
61 <div class="col-5 px-0">
62 <img class="d-block ml-auto py-1 img-ir" src="assets/img/ir.svg">
63 </div>
64 </div>
65 </div>
66 </div>
67 </div>
68 </div>
src/app/modules/seleccion-productos/seleccion-productos.component.scss
Diff comments   View file @ eca7b9d
1 $primary: #aa006b; 1 $primary: #aa006b;
2 2
3 .rounded-right { 3 .rounded-right {
4 border-top-right-radius: 1.5rem !important; 4 border-top-right-radius: 1.5rem !important;
5 border-bottom-right-radius: 1.5rem !important; 5 border-bottom-right-radius: 1.5rem !important;
6 } 6 }
7 7
8 .box-categorias { 8 .box-categorias {
9 height: calc(100% - 100px) !important; 9 height: calc(100% - 100px) !important;
10 } 10 }
11 11
12 .active { 12 .active {
13 background-color: white; 13 background-color: white;
14 border-bottom: 3px solid $primary !important; 14 border-bottom: 3px solid $primary !important;
15 } 15 }
16 16
17 .border-bottom-effect { 17 .border-bottom-effect {
18 border: none; 18 border: none;
19 position: relative; 19 position: relative;
20 &:hover { 20 &:hover {
21 border: none; 21 border: none;
22 } 22 }
23 &::after { 23 &::after {
24 content: ""; 24 content: "";
25 position: absolute; 25 position: absolute;
26 width: 0px; 26 width: 0px;
27 height: 3px; 27 height: 3px;
28 left: 50%; 28 left: 50%;
29 bottom: 0; 29 bottom: 0;
30 background-color: $primary; 30 background-color: $primary;
31 transition: all ease-in-out 0.2s; 31 transition: all ease-in-out 0.2s;
32 } 32 }
33 &:hover::after { 33 &:hover::after {
34 width: 100%; 34 width: 100%;
35 left: 0; 35 left: 0;
36 } 36 }
37 } 37 }
38
39 .card {
40 border: none;
41 }
38 42