Merge pull request #244 from xwp/enhancement/flexbox-select2

Use flexbox for post selection lookup select2 and add button
xwp · Sep 3, 2016 · 8a1f033 · 8a1f033
2 parents 1a635cb + 4b587d9
commit 8a1f033
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/css/customize-posts.css b/css/customize-posts.css
@@ -74,10 +74,31 @@
 	padding: 15px 12px;
 	margin: 0;
 	overflow: hidden;
+
+	display: -webkit-box;
+	display: -moz-box;
+	display: -ms-flexbox;
+	display: -webkit-flex;
+	display: flex;
+}
+
+.customize-posts-panel-actions > .select2-container {
+	-webkit-box-flex: 10;
+	-webkit-flex-grow: 10;
+	-moz-box-flex: 10;
+	-ms-flex-positive: 10;
+	-ms-flex: 10;
+	flex-grow: 10;
 }
 
 .customize-posts-panel-actions .add-new-post-stub {
-	float: right;
+	margin-left: 5px;
+	-webkit-box-flex: 10;
+	-webkit-flex-grow: 10;
+	-moz-box-flex: 10;
+	-ms-flex-positive: 10;
+	-ms-flex: 10;
+	flex-grow: 1;
 }
 
 .customize-posts-panel-actions .add-new-post-stub:before {

diff --git a/js/customize-posts-panel.js b/js/customize-posts-panel.js
@@ -78,7 +78,7 @@
 				},
 				multiple: false,
 				placeholder: postTypeObj.labels.search_items,
-				width: '80%' // @todo Flex box?
+				width: '80%'
 			});
 
 			panel.postSelectionLookupSelect2.on( 'select2:select', function() {