Jose Pinto / wrapper-demo

Browse Code »

Commit e918b9c82dd3f87d86133bdc60fa04b4afda90b5

Authored by Jose Pinto 2018-12-13 16:06:39 -0300

1 parent d55c7b77b5

Exists in master

Estilos nuevo diseño

Showing 10 changed files with 69 additions and 13 deletions Show diff stats

index.html

Diff comments View file @ e918b9c

src/sass/_botonera-lateral.scss

Diff comments View file @ e918b9c

 .botonera-lateral {
     >.row {
         height: 420px;
     }
+    @media (min-width: 768px){
+        display: grid !important;
+    }
 }

src/sass/_botonera-secundaria.scss

Diff comments View file @ e918b9c

1	.botonera-secundaria {	1	.botonera-secundaria {
2	background-color: rgba(0, 0, 0, 0.8);
3	.row {	2	.row {
4	border-radius: 5px;	3	border-radius: 5px;
5	overflow: hidden;	4	overflow: hidden;
6	}	5	}
7	.btn {	6	.btn {
8	border-radius: 0;	7	display: grid;
		8	border-width: 3px !important;
		9	border-radius: .7rem !important;
9	margin-right: 1px;	10	margin-right: 1px;
10	width: calc(100% - 1px);	11	width: calc(100% - 1px);
11	margin-bottom: 1px;	12	margin-bottom: 1px;
		13
		14	&:hover{
		15	background-color: #d8b07d;
		16	border-color: #e09125 !important;
		17	}
		18	img{
		19	width: 50%;
		20	margin: auto
		21	}
		22	span{
		23	font-size: 11px;
		24	margin-left: -.25rem;
		25	margin-right: -.25rem;
		26	}
12	}	27	}
13	}	28	}

src/sass/_contenedor.scss

Diff comments View file @ e918b9c

 body {
     @media (min-width: 768px) {
         background-color: #cccccc;
     }
     @media (max-width: 768px) {
         background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
     }
 }
 .contenedor {
     @media (min-width: 768px) {
         background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
         min-height: 600px;
         min-width: 800px;
     }
 }
 .grilla-articulo {
-    background-color: rgba(0, 0, 0, 0.8);
     @media (min-width: 768px) {
-        height: 430px;
+        height: 300px;
     }
 }

src/sass/_crear-nota-pedido.scss

Diff comments View file @ e918b9c

1	.crear-nota-pedido {	1	.crear-nota-pedido {
		2	background-color: #ccc;
		3
		4	padding-bottom: 2rem;
2	&-fecha {	5	&-fecha {
3	input[type="date"]::-webkit-clear-button {	6	input[type="date"]::-webkit-clear-button {
4	display: none;	7	display: none;
5	}	8	}
6	}	9	}
		10
		11	.titulares>div{
		12	display: flex;
		13	line-height: 30px;
		14	h5{
		15	line-height: 30px;
		16	}
		17	button{
		18	margin: auto;
		19	}
		20	}
7	}	21	}
8		22

src/sass/_panel-informativo.scss

Diff comments View file @ e918b9c

 .panel-informativo {
-    background: linear-gradient(#ccc, #eee);
+    background: #67615e;
+    color: #FFF;
     min-height: 32px;
     .form-group {
         margin-bottom: 5px;
     }
     .form-control-xs {
         height: calc(1.6rem);
         padding: .25rem .5rem;
         font-size: .8rem;
         line-height: 1.3;
         border-radius: .2rem;
     }
     .label {
         font-size: .8em;
     }
     .valor {
         font-size: .8em;
     }
+    .border{
+        border-width: 4px 2px !important;
+    }
     .nota-pedido {
         @media (max-width: 576px) {
             text-align: center;
         }
     }
-    .numero-pedido {
-        @media (min-width: 576px) {

src/sass/_tabla-articulos.scss

Diff comments View file @ e918b9c

 .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
+    }
 }

src/sass/_tabla.scss

Diff comments View file @ e918b9c

1	.table {	1	.table {
2	&-nonfluid {	2	&-nonfluid {
3	width: auto;	3	width: auto;
4	}	4	}
5	&-celda-total {	5	&-celda-total {
6	color: #000000;	6	color: #000000;
7	background-color: #FF9900;	7	background-color: #FF9900;
8	}	8	}
9	}	9
		10	thead th{
		11	font-size: 13px;
		12	}
		13
		14	}

src/sass/_teclado.scss

Diff comments View file @ e918b9c

 .keyboard {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     margin: auto;
     width: 855px;
     position: inherit;
     height: auto;
     border: 1px solid rgba(255, 128, 0, .4);
     background-color: rgba(0, 0, 0, .3);
     bottom: 5px;
     table {
         border-spacing: 10px;
         border-collapse: separate;
         z-index: 100000;
         td {
             touch-action: none;
         }
     }
     .letter {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 50px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .number {
         background-color: #bdbdbd;
         box-shadow: 2px 2px 3px #555555;
         width: 47px;
         height: 35px;
         text-align: center;
         font-family: "arial";
         cursor: pointer;
         color: #000;
         font-size: 22px;
         &:hover {
             background-color: #fafafa;
         }
         &:active {
             background-color: #999;
             color: #fff;
         }
     }
     .margin {
         width: 40px;
         height: 50px;
     }
 }
+.teclado-container > div{
+    position: relative;
+}
 .teclado-activar {
     background-color: #17d236;
 }
 .boton-activar-teclado {
-    margin-top: -10%;
+    top: -500px;
     position: absolute;
     z-index: 100000;
+    right: 1.5rem;
+    @media(min-width: 1200px){
+        right: 2.5rem !important;
+    }
 }

src/sass/general.scss

Diff comments View file @ e918b9c

 @import 'admin-seguimiento';
 @import 'bootstrap';
 @import 'botonera';
 @import 'botonera-lateral';
 @import 'botonera-principal';
 @import 'botonera-secundaria';
 @import 'contenedor';
 @import 'lista';
 @import 'login';
 @import 'panel-informativo';
 @import 'tabla';
 @import 'teclado';
 @import 'tabla-articulos';
 @import 'acciones-mobile';
 @import 'swiper';
 @import 'crear-nota-pedido';
 //OCULTA FLECHAS INPUT NUMBER
 input[type='number'] {
     -moz-appearance:textfield;
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
+.d-md-grid{
+    @media (min-width: 768px) {
+        display: grid !important;
+    }
+}

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="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.css" rel="stylesheet"/>	10	<link href="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.css" rel="stylesheet"/>
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="./node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>	12	<link href="./node_modules/leaflet/dist/leaflet.css" rel="stylesheet"/>
13	<link href="./css/general.css" rel="stylesheet"/>	13	<link href="./css/general.css" rel="stylesheet"/>
14		14
15	<!--VENDOR JS-->	15	<!--VENDOR JS-->
16	<script src="./node_modules/jquery/dist/jquery.min.js"></script>	16	<script src="./node_modules/jquery/dist/jquery.min.js"></script>
17	<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>	17	<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
18	<script src="./node_modules/angular/angular.min.js"></script>	18	<script src="./node_modules/angular/angular.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/angular-i18n/angular-locale_es-ar.js"></script>	20	<script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
21	<script src="./node_modules/angular-route/angular-route.min.js"></script>	21	<script src="./node_modules/angular-route/angular-route.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/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>	23	<script src="./node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.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	<script src="./node_modules/leaflet/dist/leaflet.js"></script>	28	<script src="./node_modules/leaflet/dist/leaflet.js"></script>
29	<script src="./node_modules/ngstorage/ngStorage.min.js"></script>	29	<script src="./node_modules/ngstorage/ngStorage.min.js"></script>
30	<script src="./vendor/cordovaGeolocationModule.min.js"></script>	30	<script src="./vendor/cordovaGeolocationModule.min.js"></script>
31		31
32	<script src="./node_modules/foca-abm-chofer/dist/foca-abm-chofer.min.js"></script>	32	<script src="./node_modules/foca-abm-chofer/dist/foca-abm-chofer.min.js"></script>
33	<script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>	33	<script src="./node_modules/foca-abm-plazo-pago/dist/foca-abm-plazo-pago.min.js"></script>
34	<script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>	34	<script src="./node_modules/foca-abm-precios-condiciones/dist/foca-abm-precios-condiciones.min.js"></script>
35	<script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>	35	<script src="./node_modules/foca-abm-sectores/dist/foca-abm-sectores.min.js"></script>
36	<script src="./node_modules/foca-admin-seguimiento/dist/foca-admin-seguimiento.min.js"></script>	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>	37	<script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.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-configuracion/dist/foca-configuracion.min.js"></script>	39	<script src="./node_modules/foca-configuracion/dist/foca-configuracion.min.js"></script>
40	<script src="./node_modules/foca-crear-cobranza/dist/foca-crear-cobranza.min.js"></script>	40	<script src="./node_modules/foca-crear-cobranza/dist/foca-crear-cobranza.min.js"></script>
41	<script src="./node_modules/foca-crear-hoja-ruta/dist/foca-crear-hoja-ruta.min.js"></script>	41	<script src="./node_modules/foca-crear-hoja-ruta/dist/foca-crear-hoja-ruta.min.js"></script>
42	<script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>	42	<script src="./node_modules/foca-crear-nota-pedido/dist/foca-crear-nota-pedido.min.js"></script>
43	<script src="./node_modules/foca-crear-remito/dist/foca-crear-remito.min.js"></script>	43	<script src="./node_modules/foca-crear-remito/dist/foca-crear-remito.min.js"></script>
44	<script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>	44	<script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
45	<script src="./node_modules/foca-filtros/dist/foca-filtros.min.js"></script>	45	<script src="./node_modules/foca-filtros/dist/foca-filtros.min.js"></script>
46	<script src="./node_modules/foca-hoja-ruta/dist/foca-hoja-ruta.min.js"></script>	46	<script src="./node_modules/foca-hoja-ruta/dist/foca-hoja-ruta.min.js"></script>
47	<script src="./node_modules/foca-login/dist/foca-login.min.js"></script>	47	<script src="./node_modules/foca-login/dist/foca-login.min.js"></script>
48	<script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>	48	<script src="./node_modules/foca-modal/dist/foca-modal.min.js"></script>
49	<script src="./node_modules/foca-modal-banco/dist/foca-modal-banco.min.js"></script>	49	<script src="./node_modules/foca-modal-banco/dist/foca-modal-banco.min.js"></script>
50	<script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>	50	<script src="./node_modules/foca-modal-busqueda-productos/dist/foca-busqueda-productos.min.js"></script>
51	<script src="./node_modules/foca-modal-cheque/dist/foca-modal-cheque.min.js"></script>	51	<script src="./node_modules/foca-modal-cheque/dist/foca-modal-cheque.min.js"></script>
52	<script src="./node_modules/foca-modal-chofer/dist/foca-modal-chofer.min.js"></script>	52	<script src="./node_modules/foca-modal-chofer/dist/foca-modal-chofer.min.js"></script>
53	<script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>	53	<script src="./node_modules/foca-modal-cotizacion/dist/foca-modal-cotizacion.min.js"></script>
54	<script src="./node_modules/foca-modal-detalle-hoja-ruta/dist/foca-modal-detalle-hoja-ruta.min.js"></script>	54	<script src="./node_modules/foca-modal-detalle-hoja-ruta/dist/foca-modal-detalle-hoja-ruta.min.js"></script>
55	<script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>	55	<script src="./node_modules/foca-modal-domicilio/dist/foca-modal-domicilios.min.js"></script>
56	<script src="./node_modules/foca-modal-factura/dist/foca-modal-factura.min.js"></script>	56	<script src="./node_modules/foca-modal-factura/dist/foca-modal-factura.min.js"></script>
57	<script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>	57	<script src="./node_modules/foca-modal-flete/dist/foca-modal-flete.min.js"></script>
58	<script src="./node_modules/foca-modal-localidad/dist/foca-modal-localidad.min.js"></script>	58	<script src="./node_modules/foca-modal-localidad/dist/foca-modal-localidad.min.js"></script>
59	<script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>	59	<script src="./node_modules/foca-modal-moneda/dist/foca-modal-moneda.min.js"></script>
60	<script src="./node_modules/foca-modal-nota-pedido/dist/foca-modal-nota-pedido.min.js"></script>	60	<script src="./node_modules/foca-modal-nota-pedido/dist/foca-modal-nota-pedido.min.js"></script>
61	<script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>	61	<script src="./node_modules/foca-modal-precio-condiciones/dist/foca-modal-precio-condiciones.min.js"></script>
62	<script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>	62	<script src="./node_modules/foca-modal-proveedor/dist/foca-modal-proveedor.min.js"></script>
63	<script src="./node_modules/foca-modal-provincia/dist/foca-modal-provincia.min.js"></script>	63	<script src="./node_modules/foca-modal-provincia/dist/foca-modal-provincia.min.js"></script>
64	<script src="./node_modules/foca-modal-remito/dist/foca-modal-remito.min.js"></script>	64	<script src="./node_modules/foca-modal-remito/dist/foca-modal-remito.min.js"></script>
65	<script src="./node_modules/foca-modal-tarifa-flete/dist/foca-modal-tarifa-flete.min.js"></script>	65	<script src="./node_modules/foca-modal-tarifa-flete/dist/foca-modal-tarifa-flete.min.js"></script>
66	<script src="./node_modules/foca-modal-transportista/dist/foca-modal-transportista.min.js"></script>	66	<script src="./node_modules/foca-modal-transportista/dist/foca-modal-transportista.min.js"></script>
67	<script src="./node_modules/foca-modal-vehiculo/dist/foca-modal-vehiculo.min.js"></script>	67	<script src="./node_modules/foca-modal-vehiculo/dist/foca-modal-vehiculo.min.js"></script>
68	<script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>	68	<script src="./node_modules/foca-modal-vendedores/dist/foca-modal-vendedores.min.js"></script>
69	<script src="./node_modules/foca-nombre-empresa/dist/foca-nombre-empresa.min.js"></script>	69	<script src="./node_modules/foca-nombre-empresa/dist/foca-nombre-empresa.min.js"></script>
70	<script src="./node_modules/foca-seguimiento/dist/foca-seguimiento.min.js"></script>	70	<script src="./node_modules/foca-seguimiento/dist/foca-seguimiento.min.js"></script>
71	<script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>	71	<script src="./node_modules/foca-teclado/dist/foca-teclado.min.js"></script>
72	<script src="./node_modules/foca-abm-vehiculo/dist/foca-abm-vehiculo.min.js"></script>	72	<script src="./node_modules/foca-abm-vehiculo/dist/foca-abm-vehiculo.min.js"></script>
73	<script src="./node_modules/foca-modal-efectivo/dist/foca-modal-efectivo.min.js"></script>	73	<script src="./node_modules/foca-modal-efectivo/dist/foca-modal-efectivo.min.js"></script>
74	<script src="./node_modules/foca-modal-cobrador/dist/foca-modal-cobradores.min.js"></script>	74	<script src="./node_modules/foca-modal-cobrador/dist/foca-modal-cobradores.min.js"></script>
75	<script src="./node_modules/foca-modal-cobranza/dist/foca-modal-cobranza.min.js"></script>	75	<script src="./node_modules/foca-modal-cobranza/dist/foca-modal-cobranza.min.js"></script>
76		76
77	<script src="./src/js/app.js"></script>	77	<script src="./src/js/app.js"></script>
78	<script src="./src/js/controller.js"></script>	78	<script src="./src/js/controller.js"></script>
79	<script src="./src/etc/develop.js"></script>	79	<script src="./src/etc/develop.js"></script>
80	</head>	80	</head>
81	<body>	81	<body>
82	<style>	82	<style>
83	</style>	83	</style>
84	<foca-nombre-empresa></foca-nombre-empresa>	84	<foca-nombre-empresa></foca-nombre-empresa>
85	<div ng-view class="container contenedor"></div>	85	<div ng-view class="container contenedor"></div>
86	<div ng-controller="appWrapperDemoController" class="container d-none d-md-block">	86	<div ng-controller="appWrapperDemoController" class="teclado-container container d-none d-md-block ">
87	<div	87	<div
88	class="btn-group-toggle"	88	class="btn-group-toggle"
89	data-toggle="buttons"	89	data-toggle="buttons"
90	ng-click="cambioUsoTeclado()">	90	ng-click="cambioUsoTeclado()">
91	<label	91	<label
92	class="btn btn-secondary active boton-activar-teclado"	92	class="btn btn-secondary active boton-activar-teclado"
93	ng-class="{'teclado-activar': usarTeclado}">	93	ng-class="{'teclado-activar': usarTeclado}">
94	<input	94	<input
95	type="checkbox"	95	type="checkbox"
96	autocomplete="off"	96	autocomplete="off"
97	>	97	>
98	<i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>	98	<i class="fa fa-keyboard-o fa-3x" aria-hidden="true"></i>
99	</label>	99	</label>
100	</div>	100	</div>
101	<foca-teclado	101	<foca-teclado
102	ng-show="usarTeclado && mostrarTeclado"	102	ng-show="usarTeclado && mostrarTeclado"
103	alfanumeric="true"	103	alfanumeric="true"
104	numeric="true"	104	numeric="true"
105	>	105	>
106	</foca-teclado>	106	</foca-teclado>
107	</div>	107	</div>
108	</body>	108	</body>
109	</html>	109	</html>
110		110