- Agregué el componente swiper.

- Agregué imágenes izquierda, derecha y logo. - Actualicé imagen de botonera. - Modifiqué estilos de la botonera principal.

- Agregué el componente swiper.
- Agregué imágenes izquierda, derecha y logo. - Actualicé imagen de botonera. - Modifiqué estilos de la botonera principal.
Pablo Marco del Pont
1 parent d87dfc57f3
Showing 10 changed files with 42 additions and 13 deletions Show diff stats
img/botonera.png
img/derecha.png
img/izquierda.png
img/logo.png
index.html
package.json
src/js/app.js
src/sass/_botonera-principal.scss
src/sass/_swiper.scss
src/sass/general.scss
@@ -7,6 +7,7 @@
         <!--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 rel="stylesheet" href="node_modules/angular-ui-swiper/dist/angular-ui-swiper.css">
         <link href="css/general.css" rel="stylesheet"/>
  
         <!--VENDOR JS-->
@@ -19,6 +20,7 @@
         <script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
         <script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
         <script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
+        <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
  
         <script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
         <script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
@@ -26,6 +26,7 @@
         "angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
         "angular-route": "^1.7.5",
         "angular-sanitize": "^1.7.5",
+        "angular-ui-swiper": "^2.3.8",
         "bootstrap": "^4.1.3",
         "foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git",
         "foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git",
@@ -2,6 +2,7 @@ angular.module(&#39;appWrapperDemo&#39;, [
     'ngCookies',
     'ngRoute',
     'ui.bootstrap',
+    'ui.swiper',
     'focaAbmPlazoPago',
     'focaAbmPreciosCondiciones',
     'focaAbmSectores',
 .botonera-principal {
-    margin: 0;
-    padding-left: 30px;
-    padding-top: 30px;
-    & menuitem {
+    menuitem {
         display: inline-block;
         height: 130px;
         text-align: center;
         width: 180px;
     }
-    & button {
+    button {
         background-image: url('../img/botonera.png');
         border-radius: 12px;
         border-width: 0;
         height: 90px;
         position: relative;
         width: 90px;
+        span {
+            left: 0;
+            position: absolute;
+            text-align: center;
+            top: 90px;
+            width: 100%;
+            font-size: 12px;
+            color: #777777;
+        }
     }
-    & span {
-        left: 0;
-        position: absolute;
-        text-align: center;
-        top: 90px;
-        width: 100%;
-        font-size: 12px;
-        color: #777777;
+    &-menu {
+        padding-left: 90px;
+    }
+    &-logo {
+        width: 80%;
+        opacity: .8;
+    }
+    &-vacio {
+        & button {
+            background-position: -4380px 0;
+            &:hover {
+                background-position: -4380px -90px;
+            }
+        }
     }
     &-abrir-turno {
         & button {
@@ -0,0 +1,12 @@
+.swiper {
+    &-container {
+        height: 400px;
+    }
+    &-slide {
+        background: transparent;
+        height: 400px;
+        text-align: unset;
+        -webkit-align-items: unset;
+        align-items: unset;
+    }
+}
@@ -10,3 +10,4 @@
 @import 'tabla';
 @import 'teclado';
 @import 'tabla-articulos';
+@import 'swiper';
...	...	@@ -7,6 +7,7 @@
7	7	<!--CSS-->
8	8	<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
9	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	11	<link href="css/general.css" rel="stylesheet"/>
11	12
12	13	<!--VENDOR JS-->
...	...	@@ -19,6 +20,7 @@
19	20	<script src="./node_modules/angular-on-screen-keyboard/dist/angular-on-screen-keyboard.min.js"></script>
20	21	<script src="./node_modules/angular-sanitize/angular-sanitize.min.js"></script>
21	22	<script src="./node_modules/angular-i18n/angular-locale_es-ar.js"></script>
	23	+ <script src="./node_modules/angular-ui-swiper/dist/angular-ui-swiper.js"></script>
22	24
23	25	<script src="./node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
24	26	<script src="./node_modules/foca-botonera-principal/dist/foca-botonera-principal.min.js"></script>
...	...	@@ -26,6 +26,7 @@
26	26	"angular-on-screen-keyboard": "git+https://github.com/ericf97/angular-on-screen-keyboard.git",
27	27	"angular-route": "^1.7.5",
28	28	"angular-sanitize": "^1.7.5",
	29	+ "angular-ui-swiper": "^2.3.8",
29	30	"bootstrap": "^4.1.3",
30	31	"foca-abm-plazo-pago": "git+https://debo.suite.repo/modulos-npm/foca-abm-plazo-pago.git",
31	32	"foca-abm-precios-condiciones": "git+https://debo.suite.repo/modulos-npm/foca-abm-precios-condiciones.git",
...	...	@@ -2,6 +2,7 @@ angular.module('appWrapperDemo', [
2	2	'ngCookies',
3	3	'ngRoute',
4	4	'ui.bootstrap',
	5	+ 'ui.swiper',
5	6	'focaAbmPlazoPago',
6	7	'focaAbmPreciosCondiciones',
7	8	'focaAbmSectores',
1	1	.botonera-principal {
2		- margin: 0;
3		- padding-left: 30px;
4		- padding-top: 30px;
5		- & menuitem {
	2	+ menuitem {
6	3	display: inline-block;
7	4	height: 130px;
8	5	text-align: center;
9	6	width: 180px;
10	7	}
11		- & button {
	8	+ button {
12	9	background-image: url('../img/botonera.png');
13	10	border-radius: 12px;
14	11	border-width: 0;
15	12	height: 90px;
16	13	position: relative;
17	14	width: 90px;
	15	+ span {
	16	+ left: 0;
	17	+ position: absolute;
	18	+ text-align: center;
	19	+ top: 90px;
	20	+ width: 100%;
	21	+ font-size: 12px;
	22	+ color: #777777;
	23	+ }
18	24	}
19		- & span {
20		- left: 0;
21		- position: absolute;
22		- text-align: center;
23		- top: 90px;
24		- width: 100%;
25		- font-size: 12px;
26		- color: #777777;
	25	+ &-menu {
	26	+ padding-left: 90px;
	27	+ }
	28	+ &-logo {
	29	+ width: 80%;
	30	+ opacity: .8;
	31	+ }
	32	+ &-vacio {
	33	+ & button {
	34	+ background-position: -4380px 0;
	35	+ &:hover {
	36	+ background-position: -4380px -90px;
	37	+ }
	38	+ }
27	39	}
28	40	&-abrir-turno {
29	41	& button {
...	...	@@ -0,0 +1,12 @@
	1	+.swiper {
	2	+ &-container {
	3	+ height: 400px;
	4	+ }
	5	+ &-slide {
	6	+ background: transparent;
	7	+ height: 400px;
	8	+ text-align: unset;
	9	+ -webkit-align-items: unset;
	10	+ align-items: unset;
	11	+ }
	12	+}
...	...	@@ -10,3 +10,4 @@
10	10	@import 'tabla';
11	11	@import 'teclado';
12	12	@import 'tabla-articulos';
	13	+@import 'swiper';