Luigi / wrapper-demo

Browse Code »

Commit 36c3cbfae6faa76de4fcf4e0cfe5e5ddd9230b75

Authored by Jose Pinto 2018-12-17 11:14:21 -0300

1 parent 68f0df5669

Exists in master

Styles nuevo diseño responsive

Showing 4 changed files with 34 additions and 0 deletions Show diff stats

index.html

Diff comments View file @ 36c3cbf

 <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-principal/dist/foca-botonera-principal.min.js"></script>
+        <script src="./node_modules/foca-botonera-facturador/dist/foca-botonera-facturador.min.js"></script>
         <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.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-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="btn-group-toggle"
                 data-toggle="buttons"
                 ng-click="cambioUsoTeclado()">
                 <label
                     class="btn btn-secondary active boton-activar-teclado"
                     ng-class="{'teclado-activar': usarTeclado}">
                     <input
                         type="checkbox"
                         autocomplete="off"
                         >
                         <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
                 </label>
             </div>
             <foca-teclado
                 ng-show="usarTeclado && mostrarTeclado"
                 alfanumeric="true"
                 numeric="true"
                 >
             </foca-teclado>
         </div>
     </body>
 </html>

src/sass/_botonera-secundaria.scss

Diff comments View file @ 36c3cbf

 .botonera-secundaria {
     .row {
         border-radius: 5px;
         overflow: hidden;
     }
     .btn {
         display: grid;
         border-width: 3px !important;
         border-radius: .7rem !important;
         margin-right: 1px;
         width: calc(100% - 1px);
         margin-bottom: 1px;
         &:hover{
             background-color: #d8b07d;
             border-color: #e09125 !important;
         }
+        &:focus{
+            box-shadow: 0 0 0 0.2rem rgb(216, 176, 125);
+        }
         img{
             width: 50%;
             margin: auto
         }
         span{
             font-size: 11px;
             margin-left: -.25rem;
             margin-right: -.25rem;
         }
     }
+    @media(max-width: 992px){
+        .btn{
+            font-weight: 700;
+        }
+    }
 }

src/sass/_foca-crear.scss

Diff comments View file @ 36c3cbf

 .foca-crear{
     background: #CCC;
     .titulares>div{
         display: flex;
         line-height: 30px;
         h5{
             line-height: 30px;
         }
         button{
             margin: auto;
             margin-right: 0;
         }
+        @media(max-width: 992px){
+            border-top: none !important;
+            border-right: none !important;
+            border-left: none !important;
+            border-bottom: 2px solid #FFF !important;
+            &:last-child{
+                border-left: 2px solid #FFF !important;
+            }
+            &:first-child{
+                border-top: 2px solid #FFF !important;
+            }
+        }
     }
     @media(min-width: 992px){
         padding-bottom: 2rem;
         &.one-row{
             padding-bottom: 8rem !important;
         }
     }
 }

src/sass/_tabla-articulos.scss

Diff comments View file @ 36c3cbf

 .tabla-articulo {
     max-height: 420px;
     background-color: #67615e;
     color: #FFF;
     tr {
         display: inline-table;
         table-layout: fixed;
     }
     tbody {
         overflow-y: auto;
         max-height: 280px;
         display: block;
     }
     thead > tr > th {
         line-height: 30px
     }
+    @media(max-width: 992px){
+        tr{
+            display: block;
+            span{
+                line-height: 35px;
+            }
+        }
+        tfoot tr{
+            display: flex;
+        }
+    }
 }