Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit baf9a0338de725805b35f2d71a4257bc01b0ce6b

Authored by Marcelo Puebla
2 parents 6e356f4f62 5898996f28
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master (Joel Vitelli)

See merge request !16
Showing 7 changed files   Show diff stats
src/app/components/inicio/inicio.component.html
Diff comments   View file @ baf9a03
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-10 p-0"> 2 <div class="col-10 p-0">
3 <!-- TOP HEADER --> 3 <!-- TOP HEADER -->
4 <app-header></app-header> 4 <app-header></app-header>
5 5
6 <!-- NOMBRE DE SECCION --> 6 <!-- NOMBRE DE SECCION -->
7 <div class="row m-0"> 7 <div class="row m-0">
8 <div class="col-12 p-0"> 8 <div class="col-12 p-0">
9 <p class="h5 py-1 bg-light text-muted text-center">Inicio</p> 9 <p class="h5 py-1 bg-light text-muted text-center">Inicio</p>
10 </div> 10 </div>
11 </div> 11 </div>
12 12
13 <div class="row m-4 d-flex align-items-center disable-user-select"> 13 <div class="row m-4 d-flex align-items-center disable-user-select">
14 <div class="col-md-5 d-flex align-items-end flex-column"> 14 <div class="col-md-5 d-flex align-items-end flex-column">
15 15
16 <!-- TOOL TIp --> 16 <!-- TOOL TIp -->
17 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" 17 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
18 *ngIf="tooltip === true"> 18 *ngIf="tooltip === true">
19 <div class="arrow"></div> 19 <div class="arrow"></div>
20 <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4> 20 <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
21 <div class="popover-content mw-100 h-100 mb-auto"> 21 <div class="popover-content mw-100 h-100 mb-auto">
22 <div class="d-flex flex-column h-75 text-center"> 22 <div class="d-flex flex-column h-75 text-center">
23 <div class="overflow-auto overflow-scroll mb-2"> 23 <div class="overflow-auto overflow-scroll mb-2">
24 24
25 <div class="card bg-white rounded-sm shadow border-0 black-text my-3"> 25 <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
26 <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded"> 26 <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
27 <div class="col-6 p-0 text-left my-auto"> 27 <div class="col-6 p-0 text-left my-auto">
28 <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p> 28 <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
29 <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p> 29 <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
30 </div> 30 </div>
31 <div class="col-6 p-1 text-center my-auto"> 31 <div class="col-6 p-1 text-center my-auto">
32 <p class="m-0 h1 text-right">{{105 | currency}}</p> 32 <p class="m-0 h1 text-right">{{105 | currency}}</p>
33 </div> 33 </div>
34 </div> 34 </div>
35 </div> 35 </div>
36 36
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- PROMOCIONES --> 42 <!-- PROMOCIONES -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
44 <div class="card-body text-left p-4"> 44 <div class="card-body text-left p-4">
45 <p class="h3 card-title">Promociones</p> 45 <div class="row">
46 <div class="col-7">
47 <p class="h3 card-title">Promociones</p>
48 </div>
49 <div class="col-5 p-0">
50 <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0">
51 </div>
52 </div>
46 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 53 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
47 </div> 54 </div>
48 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 55 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
49 <ol class="carousel-indicators m-0"> 56 <ol class="carousel-indicators m-0">
50 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> 57 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
51 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> 58 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
52 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> 59 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
53 </ol> 60 </ol>
54 <div class="carousel-inner"> 61 <div class="carousel-inner">
55 <div class="carousel-item active"> 62 <div class="carousel-item active">
56 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 63 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
57 </div> 64 </div>
58 <div class="carousel-item"> 65 <div class="carousel-item">
59 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 66 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
60 </div> 67 </div>
61 <div class="carousel-item"> 68 <div class="carousel-item">
62 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 69 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
63 </div> 70 </div>
64 </div> 71 </div>
65 </div> 72 </div>
66 </div> 73 </div>
67 74
68 <!-- ORDENAR --> 75 <!-- ORDENAR -->
69 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 76 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
70 <div class="card-body text-left p-4"> 77 <div class="card-body text-left p-4">
71 <p class="h3 card-title">Ordenar</p> 78 <div class="row">
79 <div class="col-5">
80 <p class="h3 card-title">Ordenar</p>
81 </div>
82 <div class="col-7 p-0">
83 <div class="bg-white"><img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim">
84 </div>
85 </div>
86 </div>
87
72 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 88 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
73 </div> 89 </div>
74 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 90 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
75 </div> 91 </div>
76 92
77 </div> 93 </div>
78 94
79 <div class="col-md-7 d-flex align-items-end flex-column"> 95 <div class="col-md-7 d-flex align-items-end flex-column">
80 96
81 <!-- CARGAR PRODUCTOS --> 97 <!-- CARGAR PRODUCTOS -->
82 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 98 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
83 <div class="card-body text-left p-4"> 99 <div class="card-body text-left p-4">
84 <p class="h3 card-title">Cargar Productos</p> 100 <div class="row">
101 <div class="col-6">
102 <p class="h3 card-title">Cargar Productos</p>
103 </div>
104 <div class="col-6 p-0">
105 <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2">
106 </div>
107 </div>
85 <p class="h5 card-text text-muted font-weight-light"> 108 <p class="h5 card-text text-muted font-weight-light">
86 Coloque el código de<br> 109 Coloque el código de<br>
87 barras o QR frente al scanner. 110 barras o QR frente al scanner.
88 </p> 111 </p>
89 </div> 112 </div>
90 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 113 <div class="card bg-white border-0 w-75 mx-auto mb-4">
91 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> 114 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
92 <div class="card-body text-left p-2"> 115 <div class="card-body text-left p-2">
93 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 116 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
94 <p class="m-0 card-text text-muted">COD. 12121222</p> 117 <p class="m-0 card-text text-muted">COD. 12121222</p>
95 </div> 118 </div>
96 </div> 119 </div>
97 </div> 120 </div>
98 121
99 <!-- BUSCAR PRODUCTOS --> 122 <!-- BUSCAR PRODUCTOS -->
100 <div (click)="goPage('busqueda-productos')" 123 <div (click)="goPage('busqueda-productos')"
101 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 124 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
102 <div class="card-body text-left p-4"> 125 <div class="card-body text-left p-4">
103 <p class="h3 card-title">Buscar Productos</p> 126 <div class="row">
104 <p class="h5 card-text text-muted font-weight-light"> 127 <div class="col-6">
105 Busque aquí los productos<br> 128 <p class="h3 card-title">Buscar Productos</p>
106 que no tienen código 129 <p class="h5 card-text text-muted font-weight-light">
107 </p> 130 Busque aquí los productos<br>
131 que no tienen código </p>
132 </div>
133 <div class="col-6 p-0">
134 <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2">
135 </div>
136 </div>
137
108 </div> 138 </div>
109 </div> 139 </div>
110 140
111 </div> 141 </div>
112 142
113 </div> 143 </div>
114 144
115 </div> 145 </div>
116 146
117 <!-- SIDEBAR --> 147 <!-- SIDEBAR -->
118 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 148 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
119 </div> 149 </div>
src/app/components/inicio/inicio.component.scss
Diff comments   View file @ baf9a03
1 .bs-example-popover .popover { 1 .bs-example-popover .popover {
2 position: relative; 2 position: relative;
3 display: block; 3 display: block;
4 float: left; 4 float: left;
5 background-color: #2872ae; 5 background-color: #2872ae;
6 } 6 }
7 7
8 .arrow { 8 .arrow {
9 top: 50%; 9 top: 50%;
10 right: -11px; 10 right: -11px;
11 margin-top: -11px; 11 margin-top: -11px;
12 border-left-color: #999; 12 border-left-color: #999;
13 border-left-color: rgba(0, 0, 0, 0.25); 13 border-left-color: rgba(0, 0, 0, 0.25);
14 border-right-width: 0; 14 border-right-width: 0;
15 width: 0; 15 width: 0;
16 height: 0; 16 height: 0;
17 border-top: 20px solid transparent; 17 border-top: 20px solid transparent;
18 border-bottom: 20px solid transparent; 18 border-bottom: 20px solid transparent;
19 border-left: 20px solid #2872AE; 19 border-left: 20px solid #2872AE;
20 top: 50%; 20 top: 50%;
21 right: -23px; 21 right: -23px;
22 margin-top: -11px; 22 margin-top: -11px;
23 23
24 } 24 }
25 25
26 .black-text { 26 .black-text {
27 color: black; 27 color: black;
28 } 28 }
29
30
29 31
src/assets/icons/escanear.png
Diff comments   View file @ baf9a03

8.51 KB
src/assets/icons/primario.buscar.png
Diff comments   View file @ baf9a03

8.82 KB
src/assets/icons/primario.ordenar.png
Diff comments   View file @ baf9a03

6.55 KB
src/assets/icons/primario.promociones.png
Diff comments   View file @ baf9a03

9.35 KB
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ baf9a03
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 3
4 $theme-colors: ( 4 $theme-colors: (
5 primary: #2872ae, 5 primary: #2872ae,
6 light: white 6 light: white
7 ); 7 );
8 8
9 .popover{ 9 .popover{
10 background-color: #2872AE !important; 10 background-color: #2872AE !important;
11 color: white !important; 11 color: white !important;
12 } 12 }
13 13
14 .list-group-item.active { 14 .list-group-item.active {
15 background-color: #2872ae !important; 15 background-color: #2872ae !important;
16 border-color: #2872ae !important; 16 border-color: #2872ae !important;
17 } 17 }
18 18
19 .icon-dim{
20 height: 40px !important;
21 width: auto !important;
22 background-color: white !important;
23 }
24
19 @import "../../../node_modules/bootstrap/scss/bootstrap.scss"; 25 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";
20 26