Martin Macola / autoservicio

Browse Code »

Commit 9a5e1c64339d97348a8f07e6aa5fe0b81406a524

Authored by Marcelo Puebla 2019-08-15 15:41:31 -0300

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

-<div class="container-fluid">
+<div class="container-fluid background-image">
   <div class="row">
     <div class="col p-0">
-      <div class="vh-100 d-flex align-items-start flex-column disable-user-select">
+      <div class="vh-100 d-flex align-content-between flex-wrap disable-user-select">
         <!-- HEADER -->
-        <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
+        <div class="row m-0 w-100 bg-primary-gradient-horizontal">
-          <p class="text-white text-center">HEADER</p>
+          <div class="col-6 bg-white p-5 rounded-bottom-right">
+            <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
+          </div>
         </div>
-        <div class="h-100 w-100 position-relative">
+        <!-- INFO DE BIENVENIDA -->
-          <div class="background-image blur"></div>
+        <div class="row w-100">
-          <div class="row position-absolute w-100 h-100">
+          <div class="col-4 offset-2">
-            <div class="col-5 my-auto">
+            <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100">
-              <!-- CAROUSEL -->
+          </div>
-              <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
+          <div class="col-6 text-center text-white my-auto">
-                <div class="carousel-inner">
+            <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
-                  <div class="carousel-item active">
+            <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p>
-                    <img class="m-auto img-fluid d-block w-75"
-                      src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
-                      alt="">
-                  </div>
-                  <div class="carousel-item">
-                    <img class="m-auto img-fluid d-block w-75"
-                      src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQWhHnLeoxWeJeiBKvVg-9zDzppOVX_AY5tXpRuS7If0mzb_01b"
-                      alt="">
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-7 my-auto">
-              <div class="text-center text-white">
-                <h1 class="display-2 font-weight-bold">¡BIENVENIDO!</h1>
-                <h1 class="display-3 font-weight-bold">Toque la pantalla<br>para comenzar.</h1>
-              </div>
-            </div>
           </div>
         </div>
         <!-- FOOTER -->
-        <div class="bg-dark py-1 py-sm-2 py-lg-5 w-100">
+        <div class="row m-0 w-100 bg-gray">
-          <p class="text-white text-center">FOOTER</p>
+          <div class="col-6 bg-white offset-6 p-5 rounded-top-left">
+            <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
+          </div>
         </div>

src/app/components/home/home.component.scss

Diff comments View file @ 9a5e1c6

1	.background-image {	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	background-repeat: no-repeat;	3	background-repeat: no-repeat;
4	background-size: cover;	4	background-size: cover;
5	position: absolute;	5	}
6	width: 100%;	6
7	height: 100%;	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	}
9		26

src/app/components/home/home.component.ts

Diff comments View file @ 9a5e1c6

 import { Component, OnInit, HostListener } from '@angular/core';
 import { Router } from '@angular/router';
+import { appSettings } from 'src/etc/AppSettings';
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
 export class HomeComponent implements OnInit {
+  private apiUrl: string = appSettings.apiUrl;
   constructor(private router: Router) { }
   ngOnInit() {
   }
   @HostListener('document:click', ['$event'])
   documentClick(event: MouseEvent) {
     this.router.navigate(['/inicio']);
   }
 }

src/styles.scss

Diff comments View file @ 9a5e1c6

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
   background-color: #f0f0f0;
   font-family: bahnschrift;
 }
 .blur {
   filter: blur(10px);
   -webkit-filter: blur(10px);
 }
 .disable-user-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .blue-gradient {
   background: linear-gradient(0deg, #ffffff00, $white);
 }
 .rounded {
   border-radius: 1.5rem !important;
 }
 .rounded-top-sm {
   border-top-left-radius: 0.75rem !important;
   border-top-right-radius: 0.75rem !important;
 }
 .rounded-sm {
   border-radius: 0.75rem !important;
 }
 .card-effect {
   &:active {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
   &:focus {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
 }
 .overflow-scroll {
   overflow-y: auto !important;
   overflow-x: hidden !important;
   &::-webkit-scrollbar {
     width: 0.5em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     background-color: $white;
   }
   &::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     outline: 1px solid slategrey;
     border-radius: 10px;
     height: 12px;
     &:active {
       box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
       -webkit-box-shadow: inset 0 0 8px rgba(255, 0, 0, 0.9);
     }
   }
   &::-webkit-scrollbar-corner {
     border-radius: 10px;
   }
 }
 .bg-gray {
   background-color: #e6e6e6;
 }
 .bg-primary-gradient {
   background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
+.bg-primary-gradient-horizontal {
+  background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
+}
 .icon-dim {
   height: 40px !important;
   width: auto !important;
   background-color: white !important;
 }
 .text-purple {
   color: $purple;
 }
 .vh-70 {
   min-height: auto !important;
   max-height: 70vh !important;
 }
 .vh-60 {
   min-height: auto !important;
   max-height: 60vh !important;
 }
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }