Jose Pinto / wrapper-demo

Commit 895651db1cea688ffd78481071ee9094e5eaaf1c

Authored by Jose Pinto 2018-12-19 18:07:36 -0300

Exists in master

Merge branch 'master' into 'master'

Master

See merge request !27

Showing 4 changed files Show diff stats

index.html

Diff comments View file @ 895651d

 <html ng-app="appWrapperDemo">
     <head>
         <meta charset="UTF-8"/>
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
         <base href="./">
         <!--CSS-->
         <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
         <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
         <link href="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.css" rel="stylesheet"/>
         <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet"/>
         <link href="./node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>
         <link href="./css/general.css" rel="stylesheet"/>
         <!--VENDOR JS-->
         <script src="./node_modules/jquery/dist/jquery.min.js"></script>
         <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
         <script src="./node_modules/angular/angular.min.js"></script>
         <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
         <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
         <script src="./node_modules/angular-route/angular-route.min.js"></script>
         <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
         <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
         <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
         <script src="./node_modules/ladda/dist/spin.min.js"></script>
         <script src="./node_modules/ladda/dist/ladda.min.js"></script>
         <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
         <script src="./node_modules/leaflet/dist/leaflet.js"></script>
         <script src="./node_modules/ngstorage/ngStorage.min.js"></script>
         <script src="./vendor/cordovaGeolocationModule.min.js"></script>
         <script src="./node_modules/foca-abm-chofer/dist/foca-abm-chofer.min.js"></script>
         <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
         <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
         <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
         <script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script>
         <script src="./node_modules/foca-botonera-facturador/dist/foca-botonera-facturador.min.js"></script>
         <script src="./node_modules/foca-botonera-lateral/dist/foca-botonera-lateral.min.js"></script>
         <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
         <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
         <script src="./node_modules/foca-cabecera-facturador/dist/foca-cabecera-facturador.min.js"></script>
         <script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script>
         <script src="./node_modules/foca-crear-cobranza/dist/foca-crear-cobranza.min.js"></script>
         <script src="./node_modules/foca-crear-hoja-ruta/dist/foca-crear-hoja-ruta.min.js"></script>
         <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
         <script src="./node_modules/foca-crear-remito/dist/foca-crear-remito.min.js"></script>
         <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
         <script src="./node_modules/foca-filtros/dist/foca-filtros.min.js"></script>
         <script src="./node_modules/foca-hoja-ruta/dist/foca-hoja-ruta.min.js"></script>
         <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
         <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
         <script src="./node_modules/foca-modal-banco/dist/foca-modal-banco.min.js"></script>
         <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
         <script src="./node_modules/foca-modal-cheque/dist/foca-modal-cheque.min.js"></script>
         <script src="./node_modules/foca-modal-chofer/dist/foca-modal-chofer.min.js"></script>
         <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>
         <script src="./node_modules/foca-modal-detalle-hoja-ruta/dist/foca-modal-detalle-hoja-ruta.min.js"></script>
         <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
         <script src="./node_modules/foca-modal-factura/dist/foca-modal-factura.min.js"></script>
         <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
         <script src="./node_modules/foca-modal-localidad/dist/foca-modal-localidad.min.js"></script>
         <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
         <script src="./node_modules/foca-modal-nota-pedido/dist/foca-modal-nota-pedido.min.js"></script>
         <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
         <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
         <script src="./node_modules/foca-modal-provincia/dist/foca-modal-provincia.min.js"></script>
         <script src="./node_modules/foca-modal-remito/dist/foca-modal-remito.min.js"></script>
         <script src="./node_modules/foca-modal-tarifa-flete/dist/foca-modal-tarifa-flete.min.js"></script>
         <script src="./node_modules/foca-modal-transportista/dist/foca-modal-transportista.min.js"></script>
         <script src="./node_modules/foca-modal-unidad-medida/dist/foca-modal-unidad-medida.min.js"></script>
         <script src="./node_modules/foca-modal-vehiculo/dist/foca-modal-vehiculo.min.js"></script>
         <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
         <script src="./node_modules/foca-nombre-empresa/dist/foca-nombre-empresa.min.js"></script>
         <script src="./node_modules/foca-seguimiento/dist/foca-seguimiento.min.js"></script>
         <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
         <script src="./node_modules/foca-abm-vehiculo/dist/foca-abm-vehiculo.min.js"></script>
         <script src="./node_modules/foca-modal-efectivo/dist/foca-modal-efectivo.min.js"></script>
         <script src="./node_modules/foca-modal-cobrador/dist/foca-modal-cobradores.min.js"></script>
         <script src="./node_modules/foca-modal-cobranza/dist/foca-modal-cobranza.min.js"></script>
         <script src="./src/js/app.js"></script>
         <script src="./src/js/controller.js"></script>
         <script src="./src/etc/develop.js"></script>
     </head>
     <body>
         <style>
         </style>
         <foca-nombre-empresa></foca-nombre-empresa>
         <div ng-view class="container contenedor"></div>
         <div ng-controller="appWrapperDemoController" class="teclado-container container d-none d-md-block ">
-            <div class="container">
-                <div class="row">
-                    <div class="col-auto my-2 col-lg-2 offset-lg-10 d-none d-md-flex" style="min-height: 176px">
-                        <div class="px-2 mt-auto">
-                            <foca-botonera-lateral></foca-botonera-lateral>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            <foca-botonera-lateral></foca-botonera-lateral>
             <foca-teclado
                 ng-show="usarTeclado && mostrarTeclado"
                 alfanumeric="true"
                 numeric="true"
                 >
             </foca-teclado>
         </div>
     </body>
 </html>

src/sass/_botonera-lateral.scss

Diff comments View file @ 895651d

 .botonera-lateral {
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 402px;
+    &.teclado{
+        top: 449px;
+        z-index: 100000;
+    }
+    .row{
+        margin: 0 !important;
+        pointer-events: none;
+    }
-    @media (min-width: 768px){
+    .container{
-        display: grid !important;
+        @media (min-width: 768px){
+            display: grid !important;
+        }
     }
     button{
         pointer-events: all;
         background-color: #DDD;
     }
     .teclado-activar {
         background-color: #17d236 !important;
         color: #FFF !important;
     }
     button, .btn-group-toggle{
         background-color: #DDD;
         color: #000;
         text-transform: uppercase;
         min-width: 109px;
         &:hover{
             color: #FFF;
             .boton-activar-teclado{
                 color: #FFF;
             }
             background-color: #000;
         }
     }
     .btn-group-toggle{
         pointer-events: all;
         &.active{
             background-color: $primary-color;
             .boton-activar-teclado{
                 color: #FFF;
             }
         }
         .boton-activar-teclado{
             cursor: pointer;
             color: #000;
             background-color: transparent;
         }
         input{
             display: none;
         }
     }
 }
-.teclado-container > div{

src/sass/_botonera-principal.scss

Diff comments View file @ 895651d

 .botonera-principal {
     menuitem {
         display: inline-block;
         height: 130px;
         text-align: center;
         width: 180px;
         @media (max-width: 576px) {
             width: 100%;
         }
+        @media (min-width: 992px) and (max-width: 1200px){
+            width: 150px;
+        }
     }
     button {
         background-image: url('../img/botonera.png');
         border-radius: 12px;
         border-width: 0;
         height: 90px;
         position: relative;
         width: 90px;
         span {
             left: 0;
             position: absolute;
             text-align: center;
             top: 90px;
             width: 100%;
             font-size: 12px;
             color: #777777;
         }
     }
     &-menu {
+        width: 100%;
         padding-left: 90px;
         @media (max-width: 576px) {
             padding: 0;
         }
     }
     &-logo {
         width: 80%;
         opacity: .8;
         @media (max-width: 576px) {
             width: 100%;
         }
     }
     &-vacio {
         & button {
             background-position: -4380px 0;
             &:hover {
                 background-position: -4380px -90px;
             }
         }
     }
     &-abrir-turno {
         & button {
             background-position: 0 0;
             &:hover {
                 background-position: 0 -90px;
             }
         }
     }
     &-cerrar-turno {
         & button {
             background-position: -90px 0;
             &:hover {
                 background-position: -90px -90px;
             }
         }
     }
     &-caja {
         & button {
             background-position: -180px 0;
             &:hover {
                 background-position: -180px -90px;
             }
         }
     }
     &-facturador {
         & button {
             background-position: -270px 0px;
             &:hover {
                 background-position: -270px -90px;
             }
         }
     }
     &-nota-pedido {
         & button {
             background-position: -1250px 0px;
             &:hover {
                 background-position: -1250px -90px;
             }
         }
     }
     &-remito {
         & button {
             background-position: -4560px 0px;
             &:hover {
                 background-position: -4560px -90px;
             }
         }
     }
     &-hoja-ruta {
         & button {
             background-position: -4650px 0px;
             &:hover {
                 background-position: -4650px -90px;
             }
         }
     }
     &-hoja-ruta-transportista {
         & button {
             background-image: url('../img/hojaRutaVolante.png');
             background-size: 90px 90px;
             &:hover {
                 background-color: rgb(250,250,250);
             }
         }
     }
     &-seguimiento {
         & button {
             background-image: url('../img/seguimientoNotaPedido.png');
             background-size: 90px 90px;
             background-position: 15px 10px;
             &:hover {
                 background-color: rgb(250,250,250);
             }
         }
     }
     &-seguimiento-hoja-ruta {
         & button {
             background-image: url('../img/seguimientoHojaRuta.png');
             background-size: 90px 90px;
             background-position: 15px 10px;
             &:hover {
                 background-color: rgb(250,250,250);
             }
         }
     }
     &-cobranzas {
         & button {
             background-position: -1880 0px;
             &:hover {
                 background-position: -1880 -90px;
             }
         }
     }
     &-seguimiento-cobranzas {
         & button {
             background-image: url('../img/seguimientoCobranza.png');
             background-size: 90px 90px;
             background-position: 15px 10px;
             &:hover {
                 background-color: rgb(250,250,250);
             }
         }
     }
     &-vehiculo {
         & button {
             background-image: url('../img/abmVehiculos.png');
             background-size: 90px 90px;
             &:hover {
                 background-color: rgb(250,250,250);
             }
         }
     }
     &-precio-condicion {
         & button {
             background-image: url('../img/abmPrecios.png');
             background-size: 90px 90px;
             &:hover {
                 background-color: rgb(250,250,250);
             }
         }
     }
     &-chofer {
         & button {
             background-image: url('../img/abmChofer.png');
             background-size: 90px 90px;
             &:hover {
                 background-color: rgb(250,250,250);
             }
         }
     }
     .swiper-pagination {
         bottom: 0px !important;
     }
     .swiper-button-next {
         background-image: url('../img/derecha.png');
     }
     .swiper-button-prev {
         background-image: url('../img/izquierda.png');
     }
+    @media (min-width: 992px){
+        a{
+            margin-top: 2.5rem;
+        }
+    }
 }

src/sass/_swiper.scss

Diff comments View file @ 895651d

 .swiper {
     &-container {
         height: 300px;
     }
     &-slide {
         background: transparent;
         height: 400px;
         text-align: unset;
         -webkit-align-items: unset;
         align-items: unset;
     }
+    @media(max-width: 992px){
+        &-container{
+            height: 430px;
+        }
+        &-pagination{
+            background: #CCC;
+            padding: 0.5rem;
+        }
+    }
 }