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
... ... @@ -2,7 +2,7 @@
2 2 <div class="col-auto align-self-center px-0 bg-white">
3 3 <div class="btn-effect row mx-0 bg-light rounded-left">
4 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 6 <img class="p-2 img-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
7 7 </div>
8 8 </div>
... ... @@ -12,7 +12,7 @@
12 12 (click)="goBack()">
13 13 <div class="row mx-0 bg-light rounded-left">
14 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 16 <img class="p-2 img-volver" src="assets/img/icono-volver.svg">
17 17 </div>
18 18 </div>
src/app/modules/seleccion-productos/seleccion-productos.component.html
Diff comments   View file @ 6b010fa
... ... @@ -19,38 +19,56 @@
19 19 <div class="col-12 h-100 px-0 py-3">
20 20 <div class="row mx-0 h-100">
21 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 23 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
24 24 <div class="row mx-0 h-94 align-items-center">
25 25 <div class="col-12 h-5">
26   - <img draggable="false" ondragstart="return false;" (contextmenu)="false"
27   - class="h-100 d-block mx-auto rotate-90-neg" src="assets/img/ir-color.svg"
28   - (mousedown)="scroll(elem, -80)" (mouseup)="mouseup()" (mouseleave)="mouseup()">
  26 + <img
  27 + draggable="false"
  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 35 </div>
30   - <div #elem class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
31   - <div class="row mx-4 mb-2 h-32 justify-content-center tab"
  36 + <!-- CATEGORIAS -->
  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 42 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
33   - (click)="selectCategoria(i)" *ngFor="let categoria of categorias; let i = index;">
34   - <img class="col-12 h-50 align-self-end" src="assets/img/ir-color.svg">
35   - <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}
36   - </small>
  43 + (click)="selectCategoria(i)"
  44 + *ngFor="let categoria of categorias; let i = index;">
  45 + <img
  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 49 </div>
38 50 </div>
39 51 <div class="col-12 h-5">
40   - <img draggable="false" ondragstart="return false;" (contextmenu)="false"
41   - class="h-100 d-block mx-auto rotate-90" src="assets/img/ir-color.svg" (mousedown)="scroll(elem, 80)"
42   - (mouseup)="mouseup()" (mouseleave)="mouseup()">
  52 + <img
  53 + draggable="false"
  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 61 </div>
44 62 </div>
45 63 </div>
46 64 <!-- 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">
  65 + <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
  66 + <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
49 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 69 <div class="card h-100">
52 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 72 <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
55 73 <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
56 74 <div class="col-12 px-1 align-self-end btn-effect h-auto">
src/scss/styles-bootstrap.scss
Diff comments   View file @ 6b010fa
... ... @@ -6,12 +6,14 @@ $primary: #aa006b;
6 6 $secondary: #00acd8;
7 7 $info: #f4b223;
8 8 $light: #e6e7e9;
9   -
10 9 $theme-colors: (
11 10 primary: $primary,
12 11 secondary: $secondary,
13 12 info: $info,
14 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 19 @import "node_modules/bootstrap/scss/bootstrap";
1 1 @import "scss/styles-bootstrap.scss";
  2 +@import "scss/typography.scss";
2 3 @import "scss/height-width.scss";
3 4 @import "scss/animations.scss";
4 5 @import "scss/icons.scss";
... ... @@ -41,14 +42,6 @@ p {
41 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 45 .img-in-top {
53 46 position: absolute;
54 47 top: -35px;