Martin Macola / autoservicio

Download as
Browse Code ยป

Commit 280cecb5bc4f97d5a23aea96f519070fd1669b9d

Authored by =
1 parent 1671dbe8c7
Exists in master

Tooltip

Showing 4 changed files with 96 additions and 13 deletions   Show diff stats
src/app/components/inicio/inicio.component.html
Diff comments   View file @ 280cecb
... ... @@ -13,6 +13,79 @@
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" *ngIf="tooltip === true">
  18 + <div class="arrow"></div>
  19 + <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
  20 + <div class="popover-content mw-100 h-100 mb-auto">
  21 + <div class="d-flex flex-column h-75 text-center">
  22 + <div class="overflow-auto overflow-scroll mb-2">
  23 +
  24 + <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
  25 + <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
  26 + <div class="col-6 p-0 text-left my-auto">
  27 + <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
  28 + <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
  29 + </div>
  30 + <div class="col-6 p-1 text-center my-auto">
  31 + <p class="m-0 h1 text-right">{{105 | currency}}</p>
  32 + </div>
  33 + </div>
  34 + </div>
  35 +
  36 + <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
  37 + <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
  38 + <div class="col-6 p-0 text-left my-auto">
  39 + <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
  40 + <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
  41 + </div>
  42 + <div class="col-6 p-1 text-center my-auto">
  43 + <p class="m-0 h1 text-right">{{105 | currency}}</p>
  44 + </div>
  45 + </div>
  46 + </div>
  47 +
  48 + <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
  49 + <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
  50 + <div class="col-6 p-0 text-left my-auto">
  51 + <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
  52 + <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
  53 + </div>
  54 + <div class="col-6 p-1 text-center my-auto">
  55 + <p class="m-0 h1 text-right">{{105 | currency}}</p>
  56 + </div>
  57 + </div>
  58 + </div>
  59 +
  60 + <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
  61 + <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
  62 + <div class="col-6 p-0 text-left my-auto">
  63 + <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
  64 + <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
  65 + </div>
  66 + <div class="col-6 p-1 text-center my-auto">
  67 + <p class="m-0 h1 text-right">{{105 | currency}}</p>
  68 + </div>
  69 + </div>
  70 + </div>
  71 +
  72 + <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
  73 + <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
  74 + <div class="col-6 p-0 text-left my-auto">
  75 + <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
  76 + <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
  77 + </div>
  78 + <div class="col-6 p-1 text-center my-auto">
  79 + <p class="m-0 h1 text-right">{{105 | currency}}</p>
  80 + </div>
  81 + </div>
  82 + </div>
  83 +
  84 + </div>
  85 + </div>
  86 + </div>
  87 + </div>
  88 +
16 89 <!-- PROMOCIONES -->
17 90 <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 91 <div class="card-body text-left p-4">
... ... @@ -38,16 +111,6 @@
38 111 </div>
39 112 </div>
40 113 </div>
41   - <!-- TOOL TIp -->
42   -
43   - <div class="popover left bs-example-popover">
44   - <div class="arrow"></div>
45   - <h3 class="popover-title">Popover left</h3>
46   - <div class="popover-content">
47   - <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
48   - </div>
49   - </div>
50   -
51 114  
52 115 <!-- ORDENAR -->
53 116 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
... ... @@ -79,7 +142,7 @@
79 142 </div>
80 143 </div>
81 144 </div>
82   -
  145 +
83 146 <!-- BUSCAR PRODUCTOS -->
84 147 <div (click)="goPage('busqueda-productos')"
85 148 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
... ... @@ -100,4 +163,4 @@
100 163  
101 164 <!-- SIDEBAR -->
102 165 <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
103 166 -</div>
  167 +</div>
104 168 \ No newline at end of file
src/app/components/inicio/inicio.component.scss
Diff comments   View file @ 280cecb
... ... @@ -2,7 +2,7 @@
2 2 position: relative;
3 3 display: block;
4 4 float: left;
5   - margin: 20px;
  5 + background-color: #2872ae;
6 6 }
7 7  
8 8 .arrow {
... ... @@ -12,4 +12,17 @@
12 12 border-left-color: #999;
13 13 border-left-color: rgba(0, 0, 0, 0.25);
14 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;
15 28 }
src/app/components/inicio/inicio.component.ts
Diff comments   View file @ 280cecb
... ... @@ -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  
src/assets/scss/bootstrap-override.scss
Diff comments   View file @ 280cecb
... ... @@ -6,4 +6,9 @@ $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 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";