Martin Macola / wrapper-demo

Download as
Browse Code »

Commit fdaadca10ec6720ebb5a55b47df804d4db1ea58c

Authored by Nicolás Guarnieri
1 parent 4ce9fe3e7c
Exists in master and in 1 other branch develop

arreglos estilo para mobile

Showing 5 changed files with 30 additions and 4 deletions   Show diff stats
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 href="css/general.css" rel="stylesheet"/> 10 <link href="css/general.css" rel="stylesheet"/>
11 11
12 <!--VENDOR JS--> 12 <!--VENDOR JS-->
13 <script src="./node_modules/jquery/dist/jquery.min.js"></script> 13 <script src="./node_modules/jquery/dist/jquery.min.js"></script>
14 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 14 <script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
15 <script src="./node_modules/angular/angular.min.js"></script> 15 <script src="./node_modules/angular/angular.min.js"></script>
16 <script src="./node_modules/angular-route/angular-route.min.js"></script> 16 <script src="./node_modules/angular-route/angular-route.min.js"></script>
17 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script> 17 <script src="./node_modules/angular-cookies/angular-cookies.min.js"></script>
18 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 18 <script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
19 <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script> 19 <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
20 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script> 20 <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
21 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script> 21 <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
22 22
23 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 23 <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
24 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script> 24 <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
25 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script> 25 <script src="./node_modules/foca-turno-apertura/dist/foca-turno-apertura.min.js"></script>
26 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script> 26 <script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
27 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script> 27 <script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
28 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script> 28 <script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
29 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script> 29 <script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
30 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script> 30 <script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
31 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script> 31 <script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
32 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script> 32 <script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
33 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script> 33 <script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
34 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script> 34 <script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
35 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script> 35 <script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
36 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script> 36 <script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
37 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script> 37 <script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
38 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script> 38 <script src="./node_modules/foca-busqueda-cliente/dist/foca-busqueda-cliente.min.js"></script>
39 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script> 39 <script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
40 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script> 40 <script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
41 41
42 <!-- BUILD --> 42 <!-- BUILD -->
43 <script src="./src/js/app.js"></script> 43 <script src="./src/js/app.js"></script>
44 <script src="./src/etc/develop.js"></script> 44 <script src="./src/etc/develop.js"></script>
45 <!-- /BUILD --> 45 <!-- /BUILD -->
46 46
47 </head> 47 </head>
48 <body> 48 <body>
49 <style> 49 <style>
50 </style> 50 </style>
51 <botonera-horizontal></botonera-horizontal> 51 <botonera-horizontal></botonera-horizontal>
52 <div ng-view class="container contenedor"></div> 52 <div ng-view class="container contenedor"></div>
53 <div class="container contenedor-teclado"> 53 <div class="container contenedor-teclado d-none d-sm-block">
54 <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado"> 54 <div class="btn-group-toggle" data-toggle="buttons" ng-click="mostrarTeclado = !mostrarTeclado">
55 <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}"> 55 <label class="btn btn-secondary active" ng-class="{'teclado-activar': mostrarTeclado}">
56 <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i> 56 <input type="checkbox" autocomplete="off"><i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
57 </label> 57 </label>
58 </div> 58 </div>
59 <foca-teclado ng-show="mostrarTeclado" alfanumeric="true" numeric="true"></foca-teclado> 59 <foca-teclado ng-show="mostrarTeclado" alfanumeric="true" numeric="true"></foca-teclado>
60 </div> 60 </div>
61 </body> 61 </body>
62 </html> 62 </html>
63 63
src/sass/_acciones-mobile.scss
Diff comments   View file @ fdaadca
File was created 1 .acciones-mobile {
2 line-height: 2.5em;
3 color: orange;
4 font-size: 1.25em
5 }
src/sass/_bootstrap.scss
Diff comments   View file @ fdaadca
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
Diff comments   View file @ fdaadca
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 .contenedor-teclado { 14 .contenedor-teclado {
12 background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3); 15 background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
13 height: 300px; 16 height: 300px;
14 } 17 }
15 18
16 .grilla-articulo { 19 .grilla-articulo {
17 background-color: rgba(0, 0, 0, 0.8); 20 background-color: rgba(0, 0, 0, 0.8);
18 height: 430px; 21 @media (min-width: 768px) {
22 height: 430px;
23 }
19 } 24 }
20 25
21 .crear-nota-pedido { 26 .crear-nota-pedido {
22 form { 27 form {
23 margin-bottom: 0; 28 margin-bottom: 0;
24 } 29 }
25 table { 30 table {
26 margin-bottom: 0; 31 margin-bottom: 0;
27 } 32 }
28 } 33 }
29 34
src/sass/general.scss
Diff comments   View file @ fdaadca
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 14