Fixing issue with mobile dropdowns in Pagination

Formstone · Oct 23, 2016 · 1e12d22 · 1e12d22
1 parent 7e22474
commit 1e12d22
Show file tree

Hide file tree

Showing 15 changed files with 25 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,8 +7,11 @@
 * Added Viewer component
 * Added file chunking to Upload
 * Added load error event to Background
+* Added `jumpItem` method to Carousel
+* Aliased `jump`, `previous`, and `next` methods to `jumpPage`, `previousPage`, and `nextPage` in Carousel
 * Fixed protocol agnostic YouTube thumbnail in Background
 * Fixed Navigation styles in fs-light base theme
+* Fixed issue with mobile dropdown options in Pagination
 
 ### 1.2.2
 

diff --git a/demo/_src/pages/components/carousel.md b/demo/_src/pages/components/carousel.md
diff --git a/demo/components/carousel.html b/demo/components/carousel.html
@@ -667,7 +667,7 @@ <h3>Single - Fade</h3>
 &Tab;&lt;div&gt;5&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 							<pre><code class="language-javascript">$(".carousel").carousel({
-	matchWidth: false
+	single: true
 });</code></pre>
 							<pre><code class="language-css">.carousel .fs-carousel-item {
 	opacity: 0;

diff --git a/demo/css/demo.css b/demo/css/demo.css
diff --git a/demo/css/site-ie8.css b/demo/css/site-ie8.css
diff --git a/demo/css/site.css b/demo/css/site.css
diff --git a/demo/js/site.js b/demo/js/site.js
diff --git a/dist/css/pagination.css b/dist/css/pagination.css
diff --git a/dist/css/themes/light.css b/dist/css/themes/light.css
diff --git a/dist/js/pagination.js b/dist/js/pagination.js
diff --git a/docs/json/carousel.json b/docs/json/carousel.json
diff --git a/src/docs/carousel.html b/src/docs/carousel.html
@@ -572,7 +572,7 @@ <h3>Single - Fade</h3>
 &Tab;&lt;div&gt;5&lt;/div&gt;
 &lt;/div&gt;</code></pre>
 		<pre><code class="language-javascript">$(".carousel").carousel({
-	matchWidth: false
+	single: true
 });</code></pre>
 		<pre><code class="language-css">.carousel .fs-carousel-item {
 	opacity: 0;

diff --git a/src/js/pagination.js b/src/js/pagination.js
@@ -30,9 +30,9 @@
 		html += '<div class="' + RawClasses.position + '" aria-hidden="true">';
 		html += '<span class="' + RawClasses.current + '">0</span>';
 		html += ' ' + data.labels.count + ' ';
-		html += '<span class="' + RawClasses.total + '">0</span>';
-		html += '</div>';
-		html += '<select class="' + RawClasses.select + '" tabindex="-1" aria-hidden="true"></select>';
+		html += '<span class="' + RawClasses.total + '">0</span>';
+		html += '<select class="' + RawClasses.select + '" tabindex="-1" aria-hidden="true"></select>';
+		html += '</div>';
 
 		data.thisClasses = [RawClasses.base, data.theme, data.customClass];
 
@@ -68,7 +68,7 @@
 
 		this.on(Events.click, Classes.page, data, onPageClick)
 			.on(Events.click, Classes.control, data, onControlClick)
-			.on(Events.click, Classes.position, data, onPositionClick)
+			// .on(Events.click, Classes.position, data, onPositionClick)
 			.on(Events.change, Classes.select, data, onPageSelect);
 
 		$.fsMediaquery("bind", data.rawGuid, data.mq, {

diff --git a/src/less/pagination.less b/src/less/pagination.less
@@ -188,19 +188,21 @@
 	}
 
 	&-mobile &-position {
+		position: relative;
+
 		display: block;
 	}
 
 	&-mobile &-select {
 		height: 100%;
-		width: 50%;
+		width: 100%;
 
 		position: absolute;
 		top: 0;
 		right: 0;
 		bottom: 0;
 		left: 0;
-		z-index: -1;
+		z-index: 1;
 
 		display: block;
 		margin: auto;

diff --git a/src/less/themes/light/pagination.less b/src/less/themes/light/pagination.less
@@ -188,6 +188,9 @@
 	}
 
 	&-mobile.@{theme_name} &-position {
+		position: relative;
+
+		margin: 0 (@fs-pagination-height * 1.5);
 		text-align: center;
 	}