Merge branch 'fix-closebutton-positon-on-small-screens'

Conflicts: CHANGELOG.md
drublic · Jun 5, 2014 · 3ee3658 · 3ee3658
2 parents 554215a + c75b141
commit 3ee3658
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## HEAD
+* Fix position of close button on small screens
 
 ## 1.1.4 - 05.06.2014
 * Fix max-width plugin to work on all sizes and listen to resize

diff --git a/plugins/modal-maxwidth.js b/plugins/modal-maxwidth.js
@@ -18,6 +18,8 @@
 	// can be overwritten with `data-cssmodal-margin` attribute
 	var _margin = 20;
 
+	var MODAL_SMALL_BREAKPOINT = 480;
+
 	/**
 	 * Include styles into the DOM
 	 * @param {string} rule Styles to inject into the DOM
@@ -64,23 +66,29 @@
 	var _scaleLower = function () {
 		var innerWidth = global.innerWidth || document.documentElement.clientWidth;
 		var element = CSSModal.activeElement;
+		var closeButtonMarginRight = 10;
 
 		// Skip if there is no max width or the window is wider
 		if (!_currentMaxWidth || innerWidth > _currentMaxWidth) {
 			return;
 		}
 
+
 		// Window width minus margin left and right
 		_margin = parseInt(element.getAttribute('data-cssmodal-margin'), 10) || _margin;
 		_currentMaxWidth = innerWidth - (_margin * 2);
 
+		if (innerWidth > MODAL_SMALL_BREAKPOINT) {
+			closeButtonMarginRight = '-' + Math.floor(_currentMaxWidth / 2);
+		}
+
 		_injectStyles('[data-cssmodal-maxwidth] .modal-inner {' +
 			'max-width: ' + _currentMaxWidth + 'px;' +
 			'margin-left: -' + (_currentMaxWidth / 2) + 'px;' +
 		'}' +
 
 		'[data-cssmodal-maxwidth] .modal-close:after {' +
-			'margin-right: -' + (_currentMaxWidth / 2) + 'px !important;' +
+			'margin-right: ' + closeButtonMarginRight + 'px !important;' +
 		'}', element.id);
 	};
 
@@ -100,11 +108,15 @@
 		/*
 		 * Assign basic event handlers
 		 */
-		CSSModal.on('cssmodal:show', document, _scale);
-		CSSModal.on('cssmodal:show', document, _scaleLower);
-
-		CSSModal.on('resize', window, _scale);
-		CSSModal.on('resize', window, _scaleLower);
+		CSSModal.on('cssmodal:show', document, function () {
+			_scale();
+			_scaleLower();
+		});
+
+		CSSModal.on('resize', window, function () {
+			_scale();
+			_scaleLower();
+		});
 
 		// Public API
 		return _api;