showing badges for ranges of properties

Author: Gaurav SinghaRoy

app/views/query/class_properties.js.erb

@@ -5,12 +5,12 @@ $("#btn_properties_properties_datatype_more").hide("fast");
 $("#qb_properties_properties_datatype_loading").hide("fast");
 $("#property_main_properties_datatype_group").html("");
 <%@properties[:data_type].each do |p|%>
-	var html = "<div href='javascript:void(0);' class='property-subclass-individual list-group-item clickable' uri='<%=p['uri']%>' display-name='<%=p['label']%>' clicked='false' onclick=\"QueryBuilder.properties.property_click('<%=p['uri']%>','<%=p['label']%>','datatype')\" ><div class='row'><div class='col-md-5'><%=p['label']%></div><div class='col-md-5'><%=p['range']['label']%></div><div class='col-md-2'><span class='badge'><%=p['count']%></span></div></div></div>";
+	var html = "<div href='javascript:void(0);' class='property-subclass-individual list-group-item clickable' uri='<%=p['uri']%>' display-name='<%=p['label']%>' clicked='false' onclick=\"QueryBuilder.properties.property_click('<%=p['uri']%>','<%=p['label']%>','datatype')\" ><div class='row'><div class='col-md-5'><%=p['label']%></div><div class='col-md-5'><span class='badge span-property-range span-property-range-data' ><%=p['range']['label']%></span></div><div class='col-md-2'><span class='badge'><%=p['count']%></span></div></div></div>";
 	$(list_group_datatype).append(html);
 <%end%>
 $("#qb_properties_properties_object_loading").hide("fast");
 $("#property_main_properties_object_group").html("");
 <%@properties[:object_type].each do |p|%>
-	var html = "<div href='javascript:void(0);' class='property-subclass-individual list-group-item' uri='<%=p['uri']%>' display-name='<%=p['label']%>' clicked='false' onclick=\"QueryBuilder.properties.property_click('<%=p['uri']%>','<%=p['label']%>','object')\" ><div class='row'><div class='col-md-5'><%=p['label']%></div><div class='col-md-5'><%=p['range']['label'].capitalize%></div><div class='col-md-2'><span class='badge'><%=p['count']%></span></div></div></div>";
+	var html = "<div href='javascript:void(0);' class='property-subclass-individual list-group-item' uri='<%=p['uri']%>' display-name='<%=p['label']%>' clicked='false' onclick=\"QueryBuilder.properties.property_click('<%=p['uri']%>','<%=p['label']%>','object')\" ><div class='row'><div class='col-md-5'><%=p['label']%></div><div class='col-md-5'><span class='badge span-property-range span-property-range-object'><%=p['range']['label'].capitalize%></span></div><div class='col-md-2'><span class='badge'><%=p['count']%></span></div></div></div>";
 	$(list_group_object).append(html);
 <%end%>