mejoras en mobile para botonera y modales

Nicolás Guarnieri
1 parent bb50dfbc3e
Showing 5 changed files with 42 additions and 3 deletions Show diff stats
index.html
package.json
src/sass/_bootstrap.scss
src/sass/_botonera-principal.scss
src/sass/_contenedor.scss
@@ -58,7 +58,7 @@
         </style>
         <botonera-horizontal></botonera-horizontal>
         <div ng-view class="container contenedor"></div>
-        <div ng-controller="appWrapperDemoController" class="container d-none d-sm-block">
+        <div ng-controller="appWrapperDemoController" class="container d-none d-md-block">
             <div
                 class="btn-group-toggle"
                 data-toggle="buttons"
@@ -52,6 +52,7 @@
         "gulp-angular-templatecache": "^2.2.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-uglify": "^3.0.1",
+        "gulp-uglify-es": "^1.0.4",
         "jquery": "^3.3.1",
         "ladda": "1.0.6",
         "node-sass": "^4.9.4",
@@ -24,4 +24,24 @@
 }
 .tamaño-boton {
     width:44px;
+}
+.modal-content {
+    @media (max-width: 576px) {
+        height: auto;
+        height: 100%;
+        border-radius: 0;
+    }
+}
+.modal-dialog {
+    @media (max-width: 576px) {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+}
+.modal-body {
+    @media (max-width: 576px) {
+        overflow-y: auto;
+    }
 }
 \ No newline at end of file
@@ -4,6 +4,9 @@
         height: 130px;
         text-align: center;
         width: 180px;
+        @media (max-width: 576px) {
+            width: 100%;
+        }
     }
     button {
         background-image: url('../img/botonera.png');
@@ -24,10 +27,16 @@
     }
     &-menu {
         padding-left: 90px;
+        @media (max-width: 576px) {
+            padding: 0;
+        }
     }
     &-logo {
         width: 80%;
         opacity: .8;
+        @media (max-width: 576px) {
+            width: 100%;
+        }
     }
     &-vacio {
         & button {
@@ -77,4 +86,8 @@
             }
         }
     }
+    
+    .swiper-pagination {
+        bottom: 0px !important;
+    }
 }
 body {
-    background-color: #cccccc;
+    @media (min-width: 768px) {
+        background-color: #cccccc;
+    }
+    @media (max-width: 768px) {
+        background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
+    }
 }
  
 .contenedor {
-    background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
     @media (min-width: 768px) {
+        background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
         min-height: 600px;
         min-width: 800px;
     }
...	...	@@ -58,7 +58,7 @@
58	58	</style>
59	59	<botonera-horizontal></botonera-horizontal>
60	60	<div ng-view class="container contenedor"></div>
61		- <div ng-controller="appWrapperDemoController" class="container d-none d-sm-block">
	61	+ <div ng-controller="appWrapperDemoController" class="container d-none d-md-block">
62	62	<div
63	63	class="btn-group-toggle"
64	64	data-toggle="buttons"
...	...	@@ -52,6 +52,7 @@
52	52	"gulp-angular-templatecache": "^2.2.1",
53	53	"gulp-htmlmin": "^5.0.1",
54	54	"gulp-uglify": "^3.0.1",
	55	+ "gulp-uglify-es": "^1.0.4",
55	56	"jquery": "^3.3.1",
56	57	"ladda": "1.0.6",
57	58	"node-sass": "^4.9.4",
...	...	@@ -24,4 +24,24 @@
24	24	}
25	25	.tamaño-boton {
26	26	width:44px;
	27	+}
	28	+.modal-content {
	29	+ @media (max-width: 576px) {
	30	+ height: auto;
	31	+ height: 100%;
	32	+ border-radius: 0;
	33	+ }
	34	+}
	35	+.modal-dialog {
	36	+ @media (max-width: 576px) {
	37	+ width: 100%;
	38	+ height: 100%;
	39	+ margin: 0;
	40	+ padding: 0;
	41	+ }
	42	+}
	43	+.modal-body {
	44	+ @media (max-width: 576px) {
	45	+ overflow-y: auto;
	46	+ }
27	47	}
28	48	\ No newline at end of file
...	...	@@ -4,6 +4,9 @@
4	4	height: 130px;
5	5	text-align: center;
6	6	width: 180px;
	7	+ @media (max-width: 576px) {
	8	+ width: 100%;
	9	+ }
7	10	}
8	11	button {
9	12	background-image: url('../img/botonera.png');
...	...	@@ -24,10 +27,16 @@
24	27	}
25	28	&-menu {
26	29	padding-left: 90px;
	30	+ @media (max-width: 576px) {
	31	+ padding: 0;
	32	+ }
27	33	}
28	34	&-logo {
29	35	width: 80%;
30	36	opacity: .8;
	37	+ @media (max-width: 576px) {
	38	+ width: 100%;
	39	+ }
31	40	}
32	41	&-vacio {
33	42	& button {
...	...	@@ -77,4 +86,8 @@
77	86	}
78	87	}
79	88	}
	89	+
	90	+ .swiper-pagination {
	91	+ bottom: 0px !important;
	92	+ }
80	93	}
1	1	body {
2		- background-color: #cccccc;
	2	+ @media (min-width: 768px) {
	3	+ background-color: #cccccc;
	4	+ }
	5	+ @media (max-width: 768px) {
	6	+ background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
	7	+ }
3	8	}
4	9
5	10	.contenedor {
6		- background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
7	11	@media (min-width: 768px) {
	12	+ background-image: radial-gradient(circle at 50% 50%, #ebecf1, #abaec3);
8	13	min-height: 600px;
9	14	min-width: 800px;
10	15	}