From cdcea7046e6622ffc7bc1abb6ca7b34cb65b185c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Wei=C3=9F?= <bitbucket@jonathanweiss.net>
Date: Thu, 5 Jun 2014 17:49:07 +0200
Subject: [PATCH 1/2] Fix position of close button on small screens

---
 CHANGELOG.md              | 2 +-
 plugins/modal-maxwidth.js | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 952c63e..83a5ffe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,7 @@
 # Changelog
 
 ## HEAD
-
+* Fix position of close button on small screens
 * Fix max-width plugin to work on all sizes and listen to resize
 
 ## 1.1.3 - 05.06.2014
diff --git a/plugins/modal-maxwidth.js b/plugins/modal-maxwidth.js
index 398dbd4..26b9dcf 100644
--- 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,12 +66,17 @@
 	var _scaleLower = function () {
 		var innerWidth = global.innerWidth || document.documentElement.clientWidth;
 		var element = CSSModal.activeElement;
+		var closeButtonMarginRight = '-' + Math.floor(_currentMaxWidth / 2);
 
 		// Skip if there is no max width or the window is wider
 		if (!_currentMaxWidth || innerWidth > _currentMaxWidth) {
 			return;
 		}
 
+		if (innerWidth < MODAL_SMALL_BREAKPOINT) {
+			closeButtonMarginRight = 10;
+		}
+
 		// Window width minus margin left and right
 		_margin = parseInt(element.getAttribute('data-cssmodal-margin'), 10) || _margin;
 		_currentMaxWidth = innerWidth - (_margin * 2);
@@ -80,7 +87,7 @@
 		'}' +
 
 		'[data-cssmodal-maxwidth] .modal-close:after {' +
-			'margin-right: -' + (_currentMaxWidth / 2) + 'px !important;' +
+			'margin-right: ' + closeButtonMarginRight + 'px !important;' +
 		'}', element.id);
 	};
 

From c75b141f476125a79e23dadcc16550ddd6e1d454 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonathan=20Wei=C3=9F?= <bitbucket@jonathanweiss.net>
Date: Thu, 5 Jun 2014 18:02:25 +0200
Subject: [PATCH 2/2] The call order of _scale() and _scaleLower() is now
 respected

---
 plugins/modal-maxwidth.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/plugins/modal-maxwidth.js b/plugins/modal-maxwidth.js
index 26b9dcf..caa83e8 100644
--- a/plugins/modal-maxwidth.js
+++ b/plugins/modal-maxwidth.js
@@ -66,21 +66,22 @@
 	var _scaleLower = function () {
 		var innerWidth = global.innerWidth || document.documentElement.clientWidth;
 		var element = CSSModal.activeElement;
-		var closeButtonMarginRight = '-' + Math.floor(_currentMaxWidth / 2);
+		var closeButtonMarginRight = 10;
 
 		// Skip if there is no max width or the window is wider
 		if (!_currentMaxWidth || innerWidth > _currentMaxWidth) {
 			return;
 		}
 
-		if (innerWidth < MODAL_SMALL_BREAKPOINT) {
-			closeButtonMarginRight = 10;
-		}
 
 		// 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;' +
@@ -107,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;