Commit a182bde67f3884a2e5b37128aba9cf4cca2f5fa4
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
foca-botonera-lateral y cambio de estilos See merge request !25
Showing
9 changed files
Show diff stats
index.html
| ... | ... | @@ -34,8 +34,9 @@ |
| 34 | 34 | <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script> |
| 35 | 35 | <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script> |
| 36 | 36 | <script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script> |
| 37 | - <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script> | |
| 38 | 37 | <script src="./node_modules/foca-botonera-facturador/dist/foca-botonera-facturador.min.js"></script> |
| 38 | + <script src="./node_modules/foca-botonera-lateral/dist/foca-botonera-lateral.min.js"></script> | |
| 39 | + <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script> | |
| 39 | 40 | <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script> |
| 40 | 41 | <script src="./node_modules/foca-cabecera-facturador/dist/foca-cabecera-facturador.min.js"></script> |
| 41 | 42 | <script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script> |
| ... | ... | @@ -86,19 +87,14 @@ |
| 86 | 87 | <foca-nombre-empresa></foca-nombre-empresa> |
| 87 | 88 | <div ng-view class="container contenedor"></div> |
| 88 | 89 | <div ng-controller="appWrapperDemoController" class="teclado-container container d-none d-md-block "> |
| 89 | - <div | |
| 90 | - class="btn-group-toggle" | |
| 91 | - data-toggle="buttons" | |
| 92 | - ng-click="cambioUsoTeclado()"> | |
| 93 | - <label | |
| 94 | - class="btn btn-secondary active boton-activar-teclado" | |
| 95 | - ng-class="{'teclado-activar': usarTeclado}"> | |
| 96 | - <input | |
| 97 | - type="checkbox" | |
| 98 | - autocomplete="off" | |
| 99 | - > | |
| 100 | - Teclado | |
| 101 | - </label> | |
| 90 | + <div class="container"> | |
| 91 | + <div class="row"> | |
| 92 | + <div class="col-auto my-2 col-lg-2 offset-lg-10 d-none d-md-flex" style="min-height: 176px"> | |
| 93 | + <div class="px-2 mt-auto"> | |
| 94 | + <foca-botonera-lateral></foca-botonera-lateral> | |
| 95 | + </div> | |
| 96 | + </div> | |
| 97 | + </div> | |
| 102 | 98 | </div> |
| 103 | 99 | <foca-teclado |
| 104 | 100 | ng-show="usarTeclado && mostrarTeclado" |
package.json
| ... | ... | @@ -35,6 +35,7 @@ |
| 35 | 35 | "foca-abm-vehiculo": "git+ssh://git@debonline.dyndns.org:npm/foca-abm-vehiculo.git", |
| 36 | 36 | "foca-admin-seguimiento": "git+ssh://git@debonline.dyndns.org:npm/foca-admin-seguimiento.git", |
| 37 | 37 | "foca-botonera-principal": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-principal.git", |
| 38 | + "foca-botonera-lateral": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-lateral.git", | |
| 38 | 39 | "foca-botonera-facturador": "git+ssh://git@debonline.dyndns.org:npm/foca-botonera-facturador.git", |
| 39 | 40 | "foca-busqueda-cliente": "git+ssh://git@debonline.dyndns.org:npm/foca-busqueda-cliente.git", |
| 40 | 41 | "foca-cabecera-facturador": "git+ssh://git@debonline.dyndns.org:npm/foca-cabecera-facturador.git", |
src/js/app.js
| ... | ... | @@ -17,8 +17,9 @@ angular.module('appWrapperDemo', [ |
| 17 | 17 | 'focaAbmVehiculo', |
| 18 | 18 | 'focaAbmChofer', |
| 19 | 19 | 'focaAdminSeguimiento', |
| 20 | - 'focaBotoneraPrincipal', | |
| 21 | 20 | 'focaBotoneraFacturador', |
| 21 | + 'focaBotoneraLateral', | |
| 22 | + 'focaBotoneraPrincipal', | |
| 22 | 23 | 'focaBusquedaCliente', |
| 23 | 24 | 'focaBusquedaProductos', |
| 24 | 25 | 'focaCabeceraFacturador', |
src/sass/_botonera-lateral.scss
| 1 | 1 | .botonera-lateral { |
| 2 | - >.row { | |
| 3 | - height: 420px; | |
| 4 | - } | |
| 5 | 2 | |
| 6 | 3 | @media (min-width: 768px){ |
| 7 | 4 | display: grid !important; |
| 8 | 5 | } |
| 6 | + | |
| 7 | + button{ | |
| 8 | + pointer-events: all; | |
| 9 | + background-color: #DDD; | |
| 10 | + } | |
| 11 | + | |
| 12 | + .teclado-activar { | |
| 13 | + background-color: #17d236 !important; | |
| 14 | + color: #FFF !important; | |
| 15 | + } | |
| 16 | + | |
| 17 | + button, .btn-group-toggle{ | |
| 18 | + background-color: #DDD; | |
| 19 | + color: #000; | |
| 20 | + text-transform: uppercase; | |
| 21 | + min-width: 109px; | |
| 22 | + &:hover{ | |
| 23 | + color: #FFF; | |
| 24 | + .boton-activar-teclado{ | |
| 25 | + color: #FFF; | |
| 26 | + } | |
| 27 | + background-color: #000; | |
| 28 | + } | |
| 29 | + } | |
| 30 | + | |
| 31 | + | |
| 32 | + .btn-group-toggle{ | |
| 33 | + pointer-events: all; | |
| 34 | + &.active{ | |
| 35 | + background-color: $primary-color; | |
| 36 | + .boton-activar-teclado{ | |
| 37 | + color: #FFF; | |
| 38 | + } | |
| 39 | + } | |
| 40 | + | |
| 41 | + .boton-activar-teclado{ | |
| 42 | + cursor: pointer; | |
| 43 | + color: #000; | |
| 44 | + background-color: transparent; | |
| 45 | + } | |
| 46 | + | |
| 47 | + input{ | |
| 48 | + display: none; | |
| 49 | + } | |
| 50 | + } | |
| 51 | +} | |
| 52 | +.teclado-container > div{ | |
| 53 | + pointer-events: none; | |
| 54 | + position: absolute; | |
| 55 | + z-index: 100000; | |
| 56 | + left: 0; | |
| 57 | + right: 0; | |
| 58 | + top: 449px; | |
| 59 | + .row{ | |
| 60 | + margin: 0 !important; | |
| 61 | + pointer-events: none; | |
| 62 | + } | |
| 63 | + | |
| 9 | 64 | } |
src/sass/_botonera-secundaria.scss
| ... | ... | @@ -33,4 +33,22 @@ |
| 33 | 33 | font-weight: 700; |
| 34 | 34 | } |
| 35 | 35 | } |
| 36 | + @media(min-width: 1200px){ | |
| 37 | + .btn{ | |
| 38 | + min-height: 85px; | |
| 39 | + } | |
| 40 | + } | |
| 41 | + | |
| 42 | + @media(min-width: 992px) and (max-width: 1200px){ | |
| 43 | + .btn{ | |
| 44 | + min-height: 73px; | |
| 45 | + } | |
| 46 | + } | |
| 47 | + | |
| 48 | + @media(min-width: 768px) and (max-width: 992px){ | |
| 49 | + .btn{ | |
| 50 | + min-height: 62px; | |
| 51 | + } | |
| 52 | + } | |
| 53 | + | |
| 36 | 54 | } |
src/sass/_contenedor.scss
| ... | ... | @@ -2,18 +2,13 @@ body { |
| 2 | 2 | @media (min-width: 768px) { |
| 3 | 3 | background-color: #cccccc; |
| 4 | 4 | } |
| 5 | - @media (max-width: 768px) { | |
| 6 | - background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); | |
| 7 | - } | |
| 8 | 5 | } |
| 9 | 6 | |
| 10 | 7 | .contenedor { |
| 11 | 8 | @media (min-width: 768px) { |
| 12 | - background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); | |
| 13 | 9 | min-height: 600px; |
| 14 | 10 | min-width: 800px; |
| 15 | 11 | } |
| 16 | - | |
| 17 | 12 | } |
| 18 | 13 | |
| 19 | 14 | .grilla-articulo { |
src/sass/_swiper.scss
src/sass/_teclado.scss
| ... | ... | @@ -65,19 +65,3 @@ |
| 65 | 65 | height: 50px; |
| 66 | 66 | } |
| 67 | 67 | } |
| 68 | -.teclado-container > div{ | |
| 69 | - position: relative; | |
| 70 | -} | |
| 71 | -.teclado-activar { | |
| 72 | - background-color: #17d236; | |
| 73 | -} | |
| 74 | -.boton-activar-teclado { | |
| 75 | - top: -450px; | |
| 76 | - position: absolute; | |
| 77 | - z-index: 100000; | |
| 78 | - right: 1.6rem; | |
| 79 | - | |
| 80 | - @media(min-width: 1200px){ | |
| 81 | - right: 2.5rem !important; | |
| 82 | - } | |
| 83 | -} |
src/sass/general.scss