Mauricio Cattafi / autoservicio

Browse Code »

Commit 10485e5068071df8f7a3beec55cdb0302fb1b0ef

Authored by Marcelo Puebla 2019-08-19 10:19:21 -0300

1 parent a84978cc8a

Exists in master and in 1 other branch

Arreglo en imagen de fondo.

Showing 3 changed files with 5 additions and 3 deletions Show diff stats

src/app/components/cancelar-compra/cancelar-compra.component.html

Diff comments View file @ 10485e5

-<div class="container-fluid p-0 background-image">
+<div class="container-fluid p-0">
+  <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
   <div class="row m-0">
     <div class="col p-0">
       <div class="vh-100 fade-in d-flex align-content-strech flex-wrap disable-user-select">
         <!-- HEADER -->
         <div class="row m-0 w-100 bg-primary-gradient-horizontal">
           <div class="col-6 bg-white rounded-bottom-right">
             <div class="row h-100">
               <div class="col d-flex align-items-center">
                 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
               </div>
             </div>
           </div>
         </div>
         <!-- INFO -->
         <div class="row m-0 w-100">
           <div class="col-4 offset-2">
             <div class="row h-100">
               <div class="col-12 py-4">
                 <div class="card h-100 rounded">
                   <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-auto mb-4">
                   <div class="mb-auto mt-4">
                     <p class="display-3 card-text text-center font-weight-bold">
                       Atención
                     </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
           <div class="col-6 text-center text-white my-auto">
             <p class="display-3 font-weight-bold mb-5">
               Usted esta a punto<br>de cancelar su compra
             </p>
             <p class="display-4 m-0">
               Perderá los datos y<br>productos ya ingresados
             </p>
             <div class="d-flex justify-content-center mt-2">
               <button
                 type="button"
                 class="btn btn-lg btn-light shadow mr-4"
                 (click)="volverPreviousPage()">
                 <span class="pr-2">Volver a mi compra</span>
                 <i class="fa fa-undo text-warning"></i>
               </button>
               <button
                 type="button"
                 class="btn btn-lg btn-light shadow ml-4"
                 (click)="limpiarCarritoYvolver()">
                 <span class="pr-2">Si, terminar</span>
                 <i class="fa fa-times text-danger"></i>
               </button>
             </div>
           </div>
         </div>
         <!-- FOOTER -->
         <div class="row m-0 w-100 bg-gray">
           <div class="col-6 bg-white offset-6 rounded-top-left">
             <div class="row h-100">
               <div class="col d-flex align-items-center">
                 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

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

Diff comments View file @ 10485e5

-<div class="container-fluid p-0 background-image">
+<div class="container-fluid p-0">
+  <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
   <div class="row m-0">
     <div class="col p-0">
       <div
         class="vh-100 fade-in d-flex align-content-between flex-wrap disable-user-select"
         [routerLink]="['/inicio']">
         <!-- HEADER -->
         <div class="row m-0 w-100 bg-primary-gradient-horizontal">
           <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>
         <!-- INFO DE BIENVENIDA -->
         <div class="row w-100">
           <div class="col-4 offset-2">
             <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-100">
           </div>
           <div class="col-6 text-center text-white my-auto">
             <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p>
             <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p>
           </div>
         </div>
         <!-- FOOTER -->
         <div class="row m-0 w-100 bg-gray">
           <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>
       </div>
     </div>
   </div>
 </div>

src/styles.scss

Diff comments View file @ 10485e5

 @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: 1em;
   }
   &::-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;
 }
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }
 .background-image {
-  background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
   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;
 }