Commit 19939d4e6ed4473938c0deafc9814f9ac8dda903

Authored by Nicolás Guarnieri
Exists in master

Merge branch 'master' into 'master'

arreglos estilo para mobile

See merge request Wrappers/wrapper-demo!26
1 <html ng-app="appWrapperDemo"> 1 <html ng-app="appWrapperDemo">
2 <head> 2 <head>
3 <meta charset="UTF-8"/> 3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5 <base href="./"> 5 <base href="./">
6 6
7 <!--CSS--> 7 <!--CSS-->
8 <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> 8 <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
9 <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 9 <link href="./node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
10 <link rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css"> 10 <link rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css">
11 <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet"> 11 <link href="./node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
12 <link href="css/general.css" rel="stylesheet"/> 12 <link href="css/general.css" rel="stylesheet"/>
13 13
14 <!--VENDOR JS--> 14 <!--VENDOR JS-->
15 <script src="./node_modules/jquery/dist/jquery.min.js"></script> 15 <script src="./node_modules/jquery/dist/jquery.min.js"></script>
16 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 16 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
17 <script src="./node_modules/angular/angular.min.js"></script> 17 <script src="./node_modules/angular/angular.min.js"></script>
18 <script src="./node_modules/angular-route/angular-route.min.js"></script> 18 <script src="./node_modules/angular-route/angular-route.min.js"></script>
19 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script> 19 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
20 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 20 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
21 <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script> 21 <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
22 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script> 22 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
23 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script> 23 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
24 <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script> 24 <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
25 <script src="./node_modules/ladda/dist/spin.min.js"></script> 25 <script src="./node_modules/ladda/dist/spin.min.js"></script>
26 <script src="./node_modules/ladda/dist/ladda.min.js"></script> 26 <script src="./node_modules/ladda/dist/ladda.min.js"></script>
27 <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script> 27 <script src="./node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
28 28
29 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 29 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
30 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script> 30 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
31 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script> 31 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
32 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script> 32 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
33 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script> 33 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
34 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script> 34 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
35 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script> 35 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
36 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script> 36 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
37 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script> 37 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
38 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script> 38 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
39 <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script> 39 <script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>
40 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script> 40 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
41 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script> 41 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
42 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script> 42 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
43 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script> 43 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
44 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script> 44 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
45 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script> 45 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
46 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script> 46 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
47 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script> 47 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
48 48
49 <!-- BUILD --> 49 <!-- BUILD -->
50 <script src="./src/js/app.js"></script> 50 <script src="./src/js/app.js"></script>
51 <script src="./src/js/controller.js"></script> 51 <script src="./src/js/controller.js"></script>
52 <script src="./src/etc/develop.js"></script> 52 <script src="./src/etc/develop.js"></script>
53 <!-- /BUILD --> 53 <!-- /BUILD -->
54 54
55 </head> 55 </head>
56 <body> 56 <body>
57 <style> 57 <style>
58 </style> 58 </style>
59 <botonera-horizontal></botonera-horizontal> 59 <botonera-horizontal></botonera-horizontal>
60 <div ng-view class="container contenedor"></div> 60 <div ng-view class="container contenedor"></div>
61 <div ng-controller="appWrapperDemoController" class="container"> 61 <div ng-controller="appWrapperDemoController" class="container d-none d-sm-block">
62 <div 62 <div
63 class="btn-group-toggle" 63 class="btn-group-toggle"
64 data-toggle="buttons" 64 data-toggle="buttons"
65 ng-click="mostrarTeclado = !mostrarTeclado"> 65 ng-click="mostrarTeclado = !mostrarTeclado">
66 <label 66 <label
67 class="btn btn-secondary active boton-activar-teclado" 67 class="btn btn-secondary active boton-activar-teclado"
68 ng-class="{'teclado-activar': mostrarTeclado}"> 68 ng-class="{'teclado-activar': mostrarTeclado}">
69 <input 69 <input
70 type="checkbox" 70 type="checkbox"
71 autocomplete="off" 71 autocomplete="off"
72 > 72 >
73 <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i> 73 <i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
74 </label> 74 </label>
75 </div> 75 </div>
76 <foca-teclado 76 <foca-teclado
77 ng-show="mostrarTeclado && hasFocus" 77 ng-show="mostrarTeclado && hasFocus"
78 alfanumeric="true" 78 alfanumeric="true"
79 numeric="true" 79 numeric="true"
80 > 80 >
81 </foca-teclado> 81 </foca-teclado>
82 </div> 82 </div>
83 </body> 83 </body>
84 </html> 84 </html>
85 85
src/sass/_acciones-mobile.scss
File was created 1 .acciones-mobile {
2 line-height: 2.5em;
3 color: orange;
4 font-size: 1.25em
5 }
src/sass/_bootstrap.scss
1 .active{ 1 .active{
2 color: #fff; 2 color: #fff;
3 text-decoration: none; 3 text-decoration: none;
4 outline: 0; 4 outline: 0;
5 background-color: #337ab7; 5 background-color: #337ab7;
6 } 6 }
7 .btn-xs { 7 .btn-xs {
8 padding: .15rem .5rem; 8 padding: .15rem .5rem;
9 font-size: .8rem; 9 font-size: .8rem;
10 line-height: 1.5; 10 line-height: 1.5;
11 border-radius: .2rem; 11 border-radius: .2rem;
12 }
13 .no-border-bottom {
14 border-bottom: 0 !important;
15 }
16 .no-border-top {
17 border-top: 0 !important;
18 }
19 .no-border {
20 border: 0 !important;
21 }
22 .margin-bottom-mobile {
23 margin-bottom: 2.5em !important;
24 }
25 .tamaño-boton {
26 width:44px;
12 } 27 }
src/sass/_contenedor.scss
1 body { 1 body {
2 background-color: #cccccc; 2 background-color: #cccccc;
3 } 3 }
4 4
5 .contenedor { 5 .contenedor {
6 background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); 6 background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
7 min-height: 600px; 7 @media (min-width: 768px) {
8 min-width: 800px; 8 min-height: 600px;
9 min-width: 800px;
10 }
11
9 } 12 }
10 13
11 .grilla-articulo { 14 .grilla-articulo {
12 background-color: rgba(0, 0, 0, 0.8); 15 background-color: rgba(0, 0, 0, 0.8);
13 height: 430px; 16 @media (min-width: 768px) {
17 height: 430px;
18 }
14 } 19 }
15 20
src/sass/general.scss
1 @import 'bootstrap'; 1 @import 'bootstrap';
2 @import 'botonera'; 2 @import 'botonera';
3 @import 'botonera-lateral'; 3 @import 'botonera-lateral';
4 @import 'botonera-principal'; 4 @import 'botonera-principal';
5 @import 'botonera-secundaria'; 5 @import 'botonera-secundaria';
6 @import 'contenedor'; 6 @import 'contenedor';
7 @import 'lista'; 7 @import 'lista';
8 @import 'login'; 8 @import 'login';
9 @import 'panel-informativo'; 9 @import 'panel-informativo';
10 @import 'tabla'; 10 @import 'tabla';
11 @import 'teclado'; 11 @import 'teclado';
12 @import 'tabla-articulos'; 12 @import 'tabla-articulos';
13 @import 'acciones-mobile';
13 @import 'swiper'; 14 @import 'swiper';
14 @import 'crear-nota-pedido'; 15 @import 'crear-nota-pedido';
15 16