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

Marcelo Puebla
2 parents 75c9170361 6e356f4f62
Showing 6 changed files Show diff stats
src/app/components/inicio/inicio.component.html
src/app/components/inicio/inicio.component.scss
src/app/components/inicio/inicio.component.ts
src/app/components/sidebar/sidebar.component.html
src/app/components/sidebar/sidebar.component.ts
src/assets/scss/bootstrap-override.scss
@@ -13,6 +13,32 @@
     <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">
@@ -71,8 +97,7 @@
         </div>
  
         <!-- BUSCAR PRODUCTOS -->
-        <div
-          (click)="goPage('busqueda-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">
             <p class="h3 card-title">Buscar Productos</p>
@@ -91,4 +116,4 @@
  
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
 -</div>
+</div>
 \ No newline at end of file
@@ -0,0 +1,28 @@
+.bs-example-popover .popover {
+  position: relative;
+  display: block;
+  float: left;
+  background-color: #2872ae;
+}
+
+.arrow {
+  top: 50%;
+  right: -11px;
+  margin-top: -11px;
+  border-left-color: #999;
+  border-left-color: rgba(0, 0, 0, 0.25);
+  border-right-width: 0;
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid #2872AE;
+  top: 50%;
+  right: -23px;
+  margin-top: -11px;
+
+}
+
+.black-text {
+  color: black;
+}
@@ -10,6 +10,8 @@ export class InicioComponent implements OnInit {
  
   constructor(private router: Router) { }
  
+  tooltip:boolean = false;
+
   ngOnInit() {
   }
  
 <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
  
   <h4 class="border-bottom border-white"> Mi compra </h4>
-  <div class="overflow-auto mb-2">
-    <div class="card my-2 bg-primary border-0"  *ngFor="let prod of productos; let i = index">
+  <div class="overflow-auto overflow-scroll mb-2">
+    <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
       <img src="{{prod.img}}" class="card-img-top" alt="...">
       <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
         <div class="col-8 p-0 text-left my-auto">
@@ -19,7 +19,7 @@ export class SidebarComponent implements OnInit {
       "desc": "Galletas Oreo",
       "cod": 225412,
       "precio": 15,
-      "img": "./assets/descarga.jpg",
+      "img": "./assets/img/descarga.jpg",
       "cantidad": 1
     },
     {
@@ -27,7 +27,7 @@ export class SidebarComponent implements OnInit {
       "desc": "Coca cola 500ml",
       "cod": 512632,
       "precio": 40,
-      "img": "./assets/descarga.jpg",
+      "img": "./assets/img/descarga.jpg",
       "cantidad": 1
     },
     {
@@ -35,7 +35,7 @@ export class SidebarComponent implements OnInit {
       "desc": "Pancho grande",
       "cod": 775987,
       "precio": 45,
-      "img": "./assets/descarga.jpg",
+      "img": "./assets/img/descarga.jpg",
       "cantidad": 1
     }
   ];
@@ -6,6 +6,11 @@ $theme-colors: (
   light: white
 );
  
+.popover{
+  background-color: #2872AE !important;
+  color: white !important;
+}
+
 .list-group-item.active {
   background-color: #2872ae !important;
   border-color: #2872ae !important;
...	...	@@ -13,6 +13,32 @@
13	13	<div class="row m-4 d-flex align-items-center disable-user-select">
14	14	<div class="col-md-5 d-flex align-items-end flex-column">
15	15
	16	+ <!-- TOOL TIp -->
	17	+ <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
	18	+ *ngIf="tooltip === true">
	19	+ <div class="arrow"></div>
	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">
	22	+ <div class="d-flex flex-column h-75 text-center">
	23	+ <div class="overflow-auto overflow-scroll mb-2">
	24	+
	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">
	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>
	29	+ <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
	30	+ </div>
	31	+ <div class="col-6 p-1 text-center my-auto">
	32	+ <p class="m-0 h1 text-right">{{105 \| currency}}</p>
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+
	37	+ </div>
	38	+ </div>
	39	+ </div>
	40	+ </div>
	41	+
16	42	<!-- PROMOCIONES -->
17	43	<div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18	44	<div class="card-body text-left p-4">
...	...	@@ -71,8 +97,7 @@
71	97	</div>
72	98
73	99	<!-- BUSCAR PRODUCTOS -->
74		- <div
75		- (click)="goPage('busqueda-productos')"
	100	+ <div (click)="goPage('busqueda-productos')"
76	101	class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
77	102	<div class="card-body text-left p-4">
78	103	<p class="h3 card-title">Buscar Productos</p>
...	...	@@ -91,4 +116,4 @@
91	116
92	117	<!-- SIDEBAR -->
93	118	<app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
94	119	-</div>
	120	+</div>
95	121	\ No newline at end of file
...	...	@@ -0,0 +1,28 @@
	1	+.bs-example-popover .popover {
	2	+ position: relative;
	3	+ display: block;
	4	+ float: left;
	5	+ background-color: #2872ae;
	6	+}
	7	+
	8	+.arrow {
	9	+ top: 50%;
	10	+ right: -11px;
	11	+ margin-top: -11px;
	12	+ border-left-color: #999;
	13	+ border-left-color: rgba(0, 0, 0, 0.25);
	14	+ border-right-width: 0;
	15	+ width: 0;
	16	+ height: 0;
	17	+ border-top: 20px solid transparent;
	18	+ border-bottom: 20px solid transparent;
	19	+ border-left: 20px solid #2872AE;
	20	+ top: 50%;
	21	+ right: -23px;
	22	+ margin-top: -11px;
	23	+
	24	+}
	25	+
	26	+.black-text {
	27	+ color: black;
	28	+}
...	...	@@ -10,6 +10,8 @@ export class InicioComponent implements OnInit {
10	10
11	11	constructor(private router: Router) { }
12	12
	13	+ tooltip:boolean = false;
	14	+
13	15	ngOnInit() {
14	16	}
15	17
1	1	<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
2	2
3	3	<h4 class="border-bottom border-white"> Mi compra </h4>
4		- <div class="overflow-auto mb-2">
5		- <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
	4	+ <div class="overflow-auto overflow-scroll mb-2">
	5	+ <div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6	6	<img src="{{prod.img}}" class="card-img-top" alt="...">
7	7	<div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8	8	<div class="col-8 p-0 text-left my-auto">
...	...	@@ -19,7 +19,7 @@ export class SidebarComponent implements OnInit {
19	19	"desc": "Galletas Oreo",
20	20	"cod": 225412,
21	21	"precio": 15,
22		- "img": "./assets/descarga.jpg",
	22	+ "img": "./assets/img/descarga.jpg",
23	23	"cantidad": 1
24	24	},
25	25	{
...	...	@@ -27,7 +27,7 @@ export class SidebarComponent implements OnInit {
27	27	"desc": "Coca cola 500ml",
28	28	"cod": 512632,
29	29	"precio": 40,
30		- "img": "./assets/descarga.jpg",
	30	+ "img": "./assets/img/descarga.jpg",
31	31	"cantidad": 1
32	32	},
33	33	{
...	...	@@ -35,7 +35,7 @@ export class SidebarComponent implements OnInit {
35	35	"desc": "Pancho grande",
36	36	"cod": 775987,
37	37	"precio": 45,
38		- "img": "./assets/descarga.jpg",
	38	+ "img": "./assets/img/descarga.jpg",
39	39	"cantidad": 1
40	40	}
41	41	];
...	...	@@ -6,6 +6,11 @@ $theme-colors: (
6	6	light: white
7	7	);
8	8
	9	+.popover{
	10	+ background-color: #2872AE !important;
	11	+ color: white !important;
	12	+}
	13	+
9	14	.list-group-item.active {
10	15	background-color: #2872ae !important;
11	16	border-color: #2872ae !important;