adjust template and style to allow thumbnail rows to justify

ExactTarget · Nov 15, 2014 · 6971a97 · 6971a97
1 parent 07b7a47
commit 6971a97
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/js/repeater-thumbnail.js b/js/repeater-thumbnail.js
@@ -8,7 +8,7 @@
 
 // -- BEGIN UMD WRAPPER PREFACE --
 
-// For more information on UMD visit: 
+// For more information on UMD visit:
 // https://github.com/umdjs/umd/blob/master/jqueryPlugin.js
 
 (function (factory) {
@@ -90,7 +90,8 @@
 			thumbnail_infiniteScroll: false,
 			thumbnail_itemRendered: null,
 			thumbnail_selectable: false,
-			thumbnail_template: '<div class="thumbnail repeater-thumbnail"><img height="75" src="{{src}}" width="65"><span>{{name}}</span></div>'
+			// span space required for justified rows
+			thumbnail_template: '<div class="thumbnail repeater-thumbnail"><img height="75" src="{{src}}" width="65"><span>{{name}}</span></div><span>&nbsp;</span>'
 		});
 
 		//EXTENSION DEFINITION
@@ -203,4 +204,4 @@
 
 // -- BEGIN UMD WRAPPER AFTERWORD --
 }));
-// -- END UMD WRAPPER AFTERWORD --
+// -- END UMD WRAPPER AFTERWORD --
diff --git a/less/repeater-thumbnail.less b/less/repeater-thumbnail.less
@@ -1,12 +1,16 @@
 .repeater-thumbnail {
 	border: 1px solid #ddd;
 	color: #666;
-	float: left;
+	display: inline-block;
 	min-height: 110px;
 	min-width: 100px;
 	margin: 8px 7px;
 	text-align: center;
 
+	&:after {
+		content: ' ';
+	}
+
 	&.selectable {
 		&:hover {
 			background: #d9edf7;
@@ -35,10 +39,20 @@
 		padding: 6px;
 		width: 100%;
 
+		position: relative;
+		text-align: justify;
+		text-size: 0.1px;
+
+		&:after {
+			display: inline-block;
+			width: 100%;
+			content: '';
+		}
+
 		div.empty {
 			font-style: italic;
 			padding: 20px 10px;
 			text-align: center;
 		}
 	}
-}
+}