Mauricio Cattafi / autoservicio

Commit d66b329942979eb2c219153aece6f27e461f811f

Authored by Eric Fernandez 2019-09-11 12:02:49 -0300

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !110

Showing 2 changed files Show diff stats

src/app/components/home/home.component.html

Diff comments View file @ d66b329

 <div class="container-fluid p-0">
   <img
     src="{{apiImagenes}}/imagenes/homeBackground.jpg"
     class="background-image vh-100 w-100">
-  <div class="row m-0">
+  <div
-    <div class="col p-0">
+    class="fade-in vh-100 d-flex align-content-between flex-wrap disable-user-select"
-      <div
+    [routerLink]="['/inicio']">
-        class="vh-100 fade-in d-flex align-items-start flex-column disable-user-select"
-        [routerLink]="['/inicio']">
-        <!-- HEADER -->
+    <!-- HEADER -->
-        <div class="row m-0 w-100 bg-primary-gradient-horizontal">
+    <div class="vh-15 d-flex flex-row flex-wrap m-0 w-100 bg-primary-gradient-horizontal">
-          <div class="col-6 bg-white p-3 rounded-bottom-right">
+      <div class="h-100 w-50 bg-white rounded-bottom-right">
-            <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
+        <img class="h-100 p-2 m-auto d-block" src="{{apiImagenes}}/imagenes/logoempresa.png">
-          </div>
+      </div>
-        </div>
+    </div>
-        <!-- INFO DE BIENVENIDA -->
-        <div class="row my-auto mx-0 h-75 w-100">
-          <div class="col-6 col-lg-8 my-auto p-3 h-100">
-            <div class="embed-responsive embed-responsive-16by9">
-              <iframe
-                class="embed-responsive-item rounded fade-in"
-                src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
-              </iframe>
-            </div>
-          </div>
-          <div class="col-6 col-lg-4 text-center text-white my-auto">
-            <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
-            <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
-          </div>
-        </div>
-        <!-- FOOTER -->
+    <!-- INFO DE BIENVENIDA -->
-        <div class="row m-0 w-100 bg-gray">
+    <div class="d-flex h-50 flex-row flex-wrap justify-content-around align-items-center w-100 m-3">
-          <div class="col-6 bg-white offset-6 p-3 rounded-top-left">
+      <iframe
-            <img class="w-25 mx-auto d-block" src="{{apiImagenes}}/imagenes/logodebo.png">
+        class="w-50 h-100 rounded fade-in"
-          </div>
+        src="https://www.youtube.com/embed/vb8ZcalBDyw?&autoplay=1&loop=1&playlist=vb8ZcalBDyw&controls=0&showinfo=0&mute=1">
-        </div>
+      </iframe>
+      <div class="w-auto text-center text-white">
+        <p class="display-4 font-weight-bold m-0">¡BIENVENIDO!</p>
+        <p class="display-4 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p>
+      </div>
+    </div>

src/styles.scss

Diff comments View file @ d66b329

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
   height: 100%;
   background: linear-gradient(0deg, #e6e6e6, #fff);
   font-family: bahnschrift;
   overflow: hidden !important;
 }
 .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.75em;
   }
   &::-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 $primary;
       -webkit-box-shadow: inset 0 0 8px $primary;
     }
   }
   &::-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;
 }
 .vh-50 {
-  min-height: auto !important;
   max-height: 50vh !important;
 }
+.vh-15 {
+  max-height: 15vh !important;
+}
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }
 .background-image {
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;
 }
 .rounded-bottom-right {
   border-bottom-right-radius: 10rem;
   &:before {
     border-radius: 0 40px 40px 0;
     background-color: #fff;
   }
 }
 .rounded-top-left {
   border-top-left-radius: 10rem;
 }
 .bg-gray {
   background-color: #cccccc;
 }
 .cdk-overlay-container {
   position: absolute;
   top: 65%;
   width: 100%;
 }
 .min-h-40 {
   min-height: 40px;
 }
 .min-h-55 {
   min-height: 55px;
 }
 .pagination {
   justify-content: center !important;
   display: flex !important;
 }
 .z-index-0 {
   z-index: 0;
 }
 .w-15 {