Martin Macola / autoservicio

Commit 35a1764f9932ab7d0e1cccc498c82476d25d1a52

Authored by Marcelo Puebla 2019-08-08 17:56:34 -0300

Exists in master

Merge branch 'master' of git.focasoftware.com:angular/autoservicio

# Conflicts:
#	src/styles.scss

Showing 3 changed files Show diff stats

src/app/components/inicio/inicio.component.html

Diff comments View file @ 35a1764

 <div class="row m-0 fade-in">
   <div class="col-10 p-0">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
       </div>
     </div>
     <div class="row m-4 d-flex align-items-center disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
         <!-- TOOL TIp -->
         <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
           *ngIf="tooltip === true">
           <div class="arrow"></div>
           <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
           <div class="popover-content mw-100 h-100 mb-auto">
             <div class="d-flex  flex-column h-75 text-center">
               <div class="overflow-auto overflow-scroll mb-2">
                 <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
                   <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
                     <div class="col-6 p-0 text-left my-auto">
                       <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
                       <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
                     </div>
                     <div class="col-6 p-1 text-center my-auto">
                       <p class="m-0 h1 text-right">{{105 | currency}}</p>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!-- PROMOCIONES -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
             <div class="row">
               <div class="col-7">
                 <p class="h3 card-title">Promociones</p>
               </div>
               <div class="col-5 p-0">
                 <img src="../../../assets/icons/primario.promociones.png" alt="" class="icon-dim m-0">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
             <ol class="carousel-indicators m-0">
               <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
               <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
               <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
             </ol>
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
             </div>
           </div>
         </div>
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <div class="row">
               <div class="col-5">
                 <p class="h3 card-title">Ordenar</p>
               </div>
               <div class="col-7 p-0">
-                <div class="bg-white"><img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim">
+                <img src="../../../assets/icons/primario.ordenar.png" alt="" class="icon-dim">
-                </div>
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
           </div>
           <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
         </div>
       </div>
       <div class="col-md-7 d-flex align-items-end flex-column">
         <!-- CARGAR PRODUCTOS -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
             <div class="row">
               <div class="col-6">
                 <p class="h3 card-title">Cargar Productos</p>
               </div>
               <div class="col-6 p-0">
                 <img src="../../../assets//icons/escanear.png" alt="" class="icon-dim mb-2">
               </div>
             </div>
             <p class="h5 card-text text-muted font-weight-light">
               Coloque el código de<br>
               barras o QR frente al scanner.
             </p>
           </div>
           <div class="card bg-white border-0 w-75 mx-auto mb-4">
             <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
             <div class="card-body text-left p-2">
               <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
               <p class="m-0 card-text text-muted">COD. 12121222</p>
             </div>
           </div>
         </div>
         <!-- BUSCAR PRODUCTOS -->
         <div (click)="goPage('busqueda-productos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <div class="row">
               <div class="col-6">
                 <p class="h3 card-title">Buscar Productos</p>
                 <p class="h5 card-text text-muted font-weight-light">
                   Busque aquí los productos<br>
                   que no tienen código </p>
               </div>
               <div class="col-6 p-0">
                 <img src="../../../assets/icons/primario.buscar.png" alt="" class="icon-dim mb-2">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
 </div>

src/assets/scss/bootstrap-override.scss

Diff comments View file @ 35a1764

 @import "../../../node_modules/bootstrap/scss/functions";
 @import "../../../node_modules/bootstrap/scss/variables";
 $theme-colors: (
   primary: #2872ae,
   light: white
 );
 .popover{
   background-color: #2872AE !important;
   color: white !important;
 }
 .list-group-item.active {
   background-color: #2872ae !important;
   border-color: #2872ae !important;
 }
-.icon-dim{
-  height: 40px !important;
-  width: auto !important;
-  background-color: white !important;
-}
 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";

src/styles.scss

Diff comments View file @ 35a1764

1	@import "./assets/scss/animation.scss";	1	@import "./assets/scss/animation.scss";
2	@import "./assets/scss/bootstrap-override.scss";	2	@import "./assets/scss/bootstrap-override.scss";
3		3
4	html,	4	html,
5	body {	5	body {
6	background-color: #f0f0f0;	6	background-color: #f0f0f0;
7	overflow: hidden;	7	overflow: hidden;
8	}	8	}
9		9
10	.blur {	10	.blur {
11	filter: blur(10px);	11	filter: blur(10px);
12	-webkit-filter: blur(10px);	12	-webkit-filter: blur(10px);
13	}	13	}
14		14
15	.disable-user-select {	15	.disable-user-select {
16	-webkit-user-select: none;	16	-webkit-user-select: none;
17	-moz-user-select: none;	17	-moz-user-select: none;
18	-ms-user-select: none;	18	-ms-user-select: none;
19	user-select: none;	19	user-select: none;
20	}	20	}
21		21
22	.blue-gradient {	22	.blue-gradient {
23	background: linear-gradient(0deg, #8093a4, #fcfcfc);	23	background: linear-gradient(0deg, #8093a4, #fcfcfc);
24	}	24	}
25		25
26	.rounded {	26	.rounded {
27	border-radius: 1.5rem !important;	27	border-radius: 1.5rem !important;
28	}	28	}
29		29
30	.rounded-top-sm {	30	.rounded-top-sm {
31	border-top-left-radius: 0.75rem !important;	31	border-top-left-radius: 0.75rem !important;
32	border-top-right-radius: 0.75rem !important;	32	border-top-right-radius: 0.75rem !important;
33	}	33	}
34		34
35	.rounded-sm {	35	.rounded-sm {
36	border-radius: 0.75rem !important;	36	border-radius: 0.75rem !important;
37	}	37	}
38		38
39	.card-effect {	39	.card-effect {
40	&:active {	40	&:active {
41	background-color: #c9c9c9b3 !important;	41	background-color: #c9c9c9b3 !important;
42	transition: background-color 0.5s;	42	transition: background-color 0.5s;
43	}	43	}
44	&:focus {	44	&:focus {
45	background-color: #c9c9c9b3 !important;	45	background-color: #c9c9c9b3 !important;
46	transition: background-color 0.5s;	46	transition: background-color 0.5s;
47	}	47	}
48	}	48	}
49		49
50	.overflow-scroll {	50	.overflow-scroll {
51	overflow-y: auto !important;	51	overflow-y: auto !important;
52	overflow-x: hidden !important;	52	overflow-x: hidden !important;
53	&::-webkit-scrollbar {	53	&::-webkit-scrollbar {
54	width: 0.5em;	54	width: 0.5em;
55	}	55	}
56	&::-webkit-scrollbar-track {	56	&::-webkit-scrollbar-track {
57	border-radius: 10px;	57	border-radius: 10px;
58	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);	58	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
59	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);	59	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
60	}	60	}
61	&::-webkit-scrollbar-thumb {	61	&::-webkit-scrollbar-thumb {
62	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);	62	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
63	outline: 1px solid slategrey;	63	outline: 1px solid slategrey;
64	border-radius: 10px;	64	border-radius: 10px;
65	height: 12px;	65	height: 12px;
66	&:active {	66	&:active {
67	box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);	67	box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
68	-webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);	68	-webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
69	}	69	}
		70	}
		71	&::-webkit-scrollbar-corner {
		72	border-radius: 10px;
		73	}
		74	}
		75
		76	.bg-gray {
		77	background-color: #e6e6e6;
		78	}
		79
		80	.bg-primary-gradient {
		81	background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
		82	}
		83
		84	.icon-dim {
70	}	85	height: 40px !important;
71	&::-webkit-scrollbar-corner {	86	width: auto !important;
72	border-radius: 10px;	87	background-color: white !important;
73	}	88	}
74	}	89
75		90	.carousel-indicators li{
76	.bg-gray {	91	width: 10px !important;
77	background-color: #e6e6e6;	92	height: 10px !important;
78	}	93	border-radius: 15px !important;
79		94	border-top: black !important;
80	.bg-primary-gradient {	95	border-bottom: black !important;
81	background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);	96	}
82	}	97