Fix text overflow in variable details view

gnpis · Sep 26, 2016 · c8ee78c · c8ee78c
1 parent 8199f5c
commit c8ee78c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/css/cropOntologyWidget.css b/src/css/cropOntologyWidget.css
@@ -50,21 +50,20 @@
 	padding-left: 10px;
 }
 
-.ontology-widget .details dl {
-  margin-top: 0;
+.ontology-widget .details .detail {
+	margin-bottom: 15px;
+	overflow: auto;
 }
 
-.ontology-widget .details dl dt {
+.ontology-widget .details .key {
 	font-weight: 700;
-	float: left;
 	width: 120px;
+	float: left;
 	clear: left;
 	text-align: right;
-	margin-bottom: 10px;
 }
 
-.ontology-widget .details dl dd {
-	margin-bottom: 10px;
+.ontology-widget .details .value {
 	margin-left: 130px;
 	word-wrap: break-word;
 }
diff --git a/src/js/widget.js b/src/js/widget.js
@@ -201,13 +201,26 @@ global.CropOntologyWidget = function(selector, options) {
 	function clearDetails() {
 		widget.$detailList.empty();
 	}
+	function formatKey(str) {
+		return str
+			// split camel case: insert a space before all caps
+			.replace(/([A-Z][a-z])/g, ' $1')
+			.toLowerCase().trim()
+			// uppercaser first letter
+			.replace(/^./, function(str){ return str.toUpperCase(); })
+	}
 	function appendDetails(text, data, optionalPrefix) {
 		var prefix = optionalPrefix || "";
 		if (data) {
 			if (typeof data === 'string') {
-				var key = prefix + text;
+				var key = formatKey(prefix + text);
 				var value = data;
-				widget.$detailList.append("<dt>" + key + "</dt><dd>" + data + "</dd>");
+				widget.$detailList.append(
+					'<div class="detail">'+
+						'<div class="key">' + key + '</div>'+
+						'<div class="value">' + data + '</div>'+
+					'</div>'
+				);
 			} else if (typeof data === 'object') {
 				$.each(data, function(t, d) {
 					return appendDetails(t, d, prefix + text + " - ");