Martin Macola / autoservicio

Download as
Browse Code »

Commit 9a5e1c64339d97348a8f07e6aa5fe0b81406a524

Authored by Marcelo Puebla
1 parent 2bb2c4fb9b
Exists in master

Arreglo de pantalla home.

Showing 4 changed files with 49 additions and 38 deletions   Show diff stats
src/app/components/home/home.component.html
Diff comments   View file @ 9a5e1c6
1   -<div class="container-fluid">
  1 +<div class="container-fluid background-image">
2 2 <div class="row">
3 3 <div class="col p-0">
4   - <div class="vh-100 d-flex align-items-start flex-column disable-user-select">
5   -
  4 + <div class="vh-100 d-flex align-content-between flex-wrap disable-user-select">
  5 +
6 6 <!-- HEADER -->
7   - <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
8   - <p class="text-white text-center">HEADER</p>
  7 + <div class="row m-0 w-100 bg-primary-gradient-horizontal">
  8 + <div class="col-6 bg-white p-5 rounded-bottom-right">
  9 + <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
  10 + </div>
9 11 </div>
10 12  
11   - <div class="h-100 w-100 position-relative">
12   - <div class="background-image blur"></div>
13   - <div class="row position-absolute w-100 h-100">
14   - <div class="col-5 my-auto">
15   - <!-- CAROUSEL -->
16   - <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
17   - <div class="carousel-inner">
18   - <div class="carousel-item active">
19   - <img class="m-auto img-fluid d-block w-75"
20   - src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
21   - alt="">
22   - </div>
23   - <div class="carousel-item">
24   - <img class="m-auto img-fluid d-block w-75"
25   - src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
26   - alt="">
27   - </div>
28   - </div>
29   - </div>
30   - </div>
31   - <div class="col-7 my-auto">
32   - <div class="text-center text-white">
33   - <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
34   - <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
35   - </div>
36   - </div>
  13 + <!-- INFO DE BIENVENIDA -->
  14 + <div class="row w-100">
  15 + <div class="col-4 offset-2">
  16 + <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100">
  17 + </div>
  18 + <div class="col-6 text-center text-white my-auto">
  19 + <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
  20 + <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p>
37 21 </div>
38 22 </div>
39 23  
40 24 <!-- FOOTER -->
41   - <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
42   - <p class="text-white text-center">FOOTER</p>
  25 + <div class="row m-0 w-100 bg-gray">
  26 + <div class="col-6 bg-white offset-6 p-5 rounded-top-left">
  27 + <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
  28 + </div>
43 29 </div>
  30 +
44 31 </div>
45 32 </div>
46 33 </div>
47   -</div>
48 34 \ No newline at end of file
  35 +</div>
src/app/components/home/home.component.scss
Diff comments   View file @ 9a5e1c6
1 1 .background-image {
2   - background-image: url(http://www.nortecorrientes.com/content/bucket/7/304027w980.jpg);
  2 + background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
3 3 background-repeat: no-repeat;
4 4 background-size: cover;
5   - position: absolute;
6   - width: 100%;
7   - height: 100%;
  5 +}
  6 +
  7 +.w-20 {
  8 + width: 20% !important;
  9 +}
  10 +
  11 +.rounded-bottom-right {
  12 + border-bottom-right-radius: 10rem;
  13 + &:before {
  14 + border-radius: 0 40px 40px 0;
  15 + background-color: #fff;
  16 + }
  17 +}
  18 +
  19 +.rounded-top-left {
  20 + border-top-left-radius: 10rem;
  21 +}
  22 +
  23 +.bg-gray {
  24 + background-color: #cccccc;
8 25 }
src/app/components/home/home.component.ts
Diff comments   View file @ 9a5e1c6
1 1 import { Component, OnInit, HostListener } from '@angular/core';
2 2 import { Router } from '@angular/router';
  3 +import { appSettings } from 'src/etc/AppSettings';
3 4  
4 5 @Component({
5 6 selector: 'app-home',
... ... @@ -8,6 +9,8 @@ import { Router } from &#39;@angular/router&#39;;
8 9 })
9 10 export class HomeComponent implements OnInit {
10 11  
  12 + private apiUrl: string = appSettings.apiUrl;
  13 +
11 14 constructor(private router: Router) { }
12 15  
13 16 ngOnInit() {
... ... @@ -84,6 +84,10 @@ body {
84 84 background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
85 85 }
86 86  
  87 +.bg-primary-gradient-horizontal {
  88 + background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
  89 +}
  90 +
87 91 .icon-dim {
88 92 height: 40px !important;
89 93 width: auto !important;