Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit cf9ca4f1f64129a694ce8ee6b17e16ef8542a481

Authored by Eric Fernandez
2 parents d3c8406c74 64e50ad625
Exists in master and in 1 other branch validar_pve

Merge branch 'master' into 'master' 

Master(mpuebla)

See merge request !10
Showing 4 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ cf9ca4f
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">Búsqueda</p> 9 <p class="h5 py-1 bg-light text-muted text-center">
10 Búsqueda
11 <i class="fa fa-search"></i>
12 </p>
10 </div> 13 </div>
11 </div> 14 </div>
12 15
13 <div class="row m-4 d-flex align-items-center"> 16 <div class="row m-4 disable-user-select">
14 17
15 <div class="col-sm-7"> 18 <!-- FILTROS -->
16 <!-- SEARCH INPUT --> 19 <div class="col-sm-2">
17 <div class="form-group search"> 20 <div class="text-center">
18 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 21 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
19 <input
20 type="text"
21 class="form-control form-control-lg rounded-pill px-5"
22 placeholder="Búsqueda productos">
23 </div> 22 </div>
23 <ul class="list-group">
24 <li class="list-group-item list-group-item-action my-1 py-2 h6">
25 Combos y Promociones
26 </li>
27 <li
28 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm font-weight-bold">
29 Todos
30 </li>
31 <li
32 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
33 Bebidas
34 </li>
35 <li
36 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
37 Sandwichería
38 </li>
39 <li
40 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
41 Panaderia
42 </li>
43 <li
44 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
45 Golosinas
46 </li>
47 <li
48 class="list-group-item list-group-item-action my-1 p-2 h6 shadow-sm">
49 Tabaqueria
50 </li>
51 </ul>
52 </div>
24 53
25 <div class="row pr-3 vh-50 overflow-scroll"> 54 <!-- SEARCH INPUT -->
55 <div class="col-sm-10">
56
57 <div class="form-group row search">
58 <div class="col-sm-10">
59 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
60 <input
61 type="text"
62 class="form-control form-control-lg shadow-sm rounded-pill px-5"
63 placeholder="Búsqueda productos">
64 </div>
65 <!-- BOTON VOLVER -->
66 <div class="col-sm-2">
67 <button
68 type="button"
69 class="btn btn-light btn-lg shadow-sm"
70 [routerLink]="['/inicio']">
71 <span class="font-weight-normal h6">Volver&nbsp;&nbsp;</span>
72 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
73 </button>
74 </div>
75 </div>
76
77 <!-- LISTA DE PRODUCTOS -->
78 <div class="row pr-3 vh-50 overflow-scroll disable-user-select">
26 <div 79 <div
27 class="col-4 p-2" 80 class="col-4 p-2"
28 *ngFor="let producto of productos"> 81 *ngFor="let producto of productos">
29 <div class="card card-effect bg-white rounded-sm shadow border-0"> 82 <div class="card card-effect bg-white rounded-sm shadow border-0">
30 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto"> 83 <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
31 <div class="card-body"> 84 <div class="card-body p-2">
32 <p class="h5 text-left m-0">{{producto.variable}}</p> 85 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
33 <div class="text-left"> 86 <div class="row justify-content-between m-0">
34 <p class="m-0"><small>ASDASDSADASDSA</small></p> 87 <div class="col-12 p-0">
35 <p class="m-0"><small>COD. 1222</small></p> 88 <div class="text-left">
89 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
90 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
91 </div>
92 </div>
93 <div class="col-12 my-auto pt-2 pr-2 p-0">
94 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
95 </div>
36 </div> 96 </div>
37 </div> 97 </div>
38 </div> 98 </div>
39
40 </div> 99 </div>
41 </div> 100 </div>
42
43 </div> 101 </div>
102
44 </div> 103 </div>
45 104
src/app/components/inicio/inicio.component.html
Diff comments   View file @ cf9ca4f
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"> 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 <!-- PROMOCIONES --> 16 <!-- PROMOCIONES -->
17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left p-4"> 18 <div class="card-body text-left p-4">
19 <p class="h3 card-title">Promociones</p> 19 <p class="h3 card-title">Promociones</p>
20 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 20 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
21 </div> 21 </div>
22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel"> 22 <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
23 <ol class="carousel-indicators m-0"> 23 <ol class="carousel-indicators m-0">
24 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li> 24 <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
25 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li> 25 <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li> 26 <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
27 </ol> 27 </ol>
28 <div class="carousel-inner"> 28 <div class="carousel-inner">
29 <div class="carousel-item active"> 29 <div class="carousel-item active">
30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 30 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
31 </div> 31 </div>
32 <div class="carousel-item"> 32 <div class="carousel-item">
33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 33 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
34 </div> 34 </div>
35 <div class="carousel-item"> 35 <div class="carousel-item">
36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="..."> 36 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
37 </div> 37 </div>
38 </div> 38 </div>
39 </div> 39 </div>
40 </div> 40 </div>
41 41
42 <!-- ORDENAR --> 42 <!-- ORDENAR -->
43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 43 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
44 <div class="card-body text-left p-4"> 44 <div class="card-body text-left p-4">
45 <p class="h3 card-title">Ordenar</p> 45 <p class="h3 card-title">Ordenar</p>
46 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 46 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
47 </div> 47 </div>
48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg"> 48 <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
49 </div> 49 </div>
50 50
51 </div> 51 </div>
52 52
53 <div class="col-md-7 d-flex align-items-end flex-column"> 53 <div class="col-md-7 d-flex align-items-end flex-column">
54 54
55 <!-- CARGAR PRODUCTOS --> 55 <!-- CARGAR PRODUCTOS -->
56 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 56 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
57 <div class="card-body text-left p-4"> 57 <div class="card-body text-left p-4">
58 <p class="h3 card-title">Cargar Productos</p> 58 <p class="h3 card-title">Cargar Productos</p>
59 <p class="h5 card-text text-muted font-weight-light"> 59 <p class="h5 card-text text-muted font-weight-light">
60 Coloque el código de<br> 60 Coloque el código de<br>
61 barras o QR frente al scanner. 61 barras o QR frente al scanner.
62 </p> 62 </p>
63 </div> 63 </div>
64 <div class="card bg-white border-0 w-75 mx-auto mb-4"> 64 <div class="card bg-white border-0 w-75 mx-auto mb-4">
65 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg"> 65 <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
66 <div class="card-body text-left p-2"> 66 <div class="card-body text-left p-2">
67 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p> 67 <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
68 <p class="m-0 card-text text-muted">COD. 12121222</p> 68 <p class="m-0 card-text text-muted">COD. 12121222</p>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 72
73 <!-- BUSCAR PRODUCTOS --> 73 <!-- BUSCAR PRODUCTOS -->
74 <div 74 <div
75 (click)="goPage('busqueda-productos')" 75 (click)="goPage('busqueda-productos')"
76 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 76 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
77 <div class="card-body text-left p-4"> 77 <div class="card-body text-left p-4">
78 <p class="h3 card-title">Buscar Productos</p> 78 <p class="h3 card-title">Buscar Productos</p>
79 <p class="h5 card-text text-muted font-weight-light"> 79 <p class="h5 card-text text-muted font-weight-light">
80 Busque aquí los productos<br> 80 Busque aquí los productos<br>
81 que no tienen código 81 que no tienen código
82 </p> 82 </p>
83 </div> 83 </div>
84 </div> 84 </div>
85 85
86 </div> 86 </div>
87 87
88 </div> 88 </div>
89 89
90 </div> 90 </div>
91 91
92 <!-- SIDEBAR --> 92 <!-- SIDEBAR -->
93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar> 93 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
94 </div> 94 </div>
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ cf9ca4f
File was created 1 @import "../../../node_modules/bootstrap/scss/functions";
2 @import "../../../node_modules/bootstrap/scss/variables";
3
4 $theme-colors: (
5 primary: red,
6 light: white,
7 );
8
9 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";
10
1 @import "./assets/scss/animation.scss"; 1 @import "./assets/scss/animation.scss";
2 @import "./assets/scss/bootstrap-override.scss";
2 3
3 html, body { 4 html,
5 body {
4 background-color: rgb(245, 245, 245); 6 background-color: rgb(245, 245, 245);
5 overflow: hidden; 7 overflow: hidden;
6 } 8 }
7 9
8 .blur { 10 .blur {
9 filter: blur(10px); 11 filter: blur(10px);
10 -webkit-filter: blur(10px); 12 -webkit-filter: blur(10px);
11 } 13 }
12 14
13 .disable-user-select { 15 .disable-user-select {
14 -webkit-user-select: none; 16 -webkit-user-select: none;
15 -moz-user-select: none; 17 -moz-user-select: none;
16 -ms-user-select: none; 18 -ms-user-select: none;
17 user-select: none; 19 user-select: none;
18 } 20 }
19 21
20 .blue-gradient { 22 .blue-gradient {
21 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252)); 23 background: linear-gradient(0deg, rgb(20, 56, 68), rgb(252, 252, 252));
22 } 24 }
23 25
24 .rounded { 26 .rounded {
25 border-radius: 1.5rem !important; 27 border-radius: 1.5rem !important;
26 } 28 }
27 29
28 .rounded-sm { 30 .rounded-sm {
29 border-radius: 0.75rem !important; 31 border-radius: 0.75rem !important;
30 } 32 }
31 33
32 .card-effect { 34 .card-effect {
33 &:active, 35 &:active,
34 img { 36 img {
35 background-color: #c9c9c9b3 !important; 37 background-color: #c9c9c9b3 !important;
36 transition: background-color 0.5s; 38 transition: background-color 0.5s;
37 } 39 }
38 &:focus, 40 &:focus,
39 img { 41 img {
40 background-color: #c9c9c9b3 !important; 42 background-color: #c9c9c9b3 !important;
41 transition: background-color 0.5s; 43 transition: background-color 0.5s;
42 } 44 }
43 } 45 }
44 46
45 .overflow-scroll { 47 .overflow-scroll {
46 overflow-y: scroll !important; 48 overflow-y: scroll !important;
47 overflow-x: hidden !important; 49 overflow-x: hidden !important;
48 &::-webkit-scrollbar { 50 &::-webkit-scrollbar {
49 width: 0.5em; 51 width: 0.5em;
50 } 52 }
51 &::-webkit-scrollbar-track { 53 &::-webkit-scrollbar-track {
52 border-radius: 10px; 54 border-radius: 10px;
53 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4); 55 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
54 } 56 }
55 &::-webkit-scrollbar-thumb { 57 &::-webkit-scrollbar-thumb {
56 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7); 58 -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
57 outline: 1px solid slategrey; 59 outline: 1px solid slategrey;
58 border-radius: 10px; 60 border-radius: 10px;
59 height: 12px; 61 height: 12px;
60 &:active{ 62 &:active {
61 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9); 63 -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
62 } 64 }
63 } 65 }
64 &::-webkit-scrollbar-corner { 66 &::-webkit-scrollbar-corner {
65 border-radius: 10px; 67 border-radius: 10px;
66 } 68 }
67 }
69 }