formating the date start/end of each show in the accordian.

airtime_mvc/public/css/playouthistory.css

@@ -41,3 +41,29 @@ table.dataTable tbody tr {
 .his-selected.odd {
     background-color: rgba(255, 136, 56, 1);
 }
+
+.show-title, .show-time {
+    display:inline-block;
+    font-size:13px;
+}
+.show-title {
+    font-weight: bold;
+    margin: 0 8px;
+}
+
+.show-date {
+    font-size:12px;
+    color: #363636;
+    margin: 0 5px;
+}
+
+.show-time {
+    font-size:12px;
+    color: #363636;
+    margin: 0 5px;
+}
+        
+.push-right {
+    float:right;
+    margin-right:5px;
+}

airtime_mvc/public/js/airtime/playouthistory/historytable.js

@@ -180,15 +180,17 @@ var AIRTIME = (function(AIRTIME) {
     	template = 
     		"<h3>" +
     	      "<a href='#'>" +
-    	        "<span><%= name %></span>" +
+    	        "<span class='show-title'><%= name %></span>" +
-  			    "<span><%= starts %></span>" +
+    	        "<span class='push-right'>" +
-  			    "<span><%= ends %></span>" +
+    	          "<span class='show-date'><%= date %></span>" +
+  			      "<span class='show-time'><%= startTime %></span>" +
+  			      "-" +
+  			      "<span class='show-time'><%= endTime %></span>" +
+  			    "</span>" +
     	      "</a>" +
     	    "</h3>" +
     	 "<div " +
     	    "data-instance='<%= instance %>' " +
-	        "data-starts='<%= starts %>' " +
-	        "data-ends='<%= ends %>'" +
     	 "></div>";
     	
     	template = _.template(template);
@@ -220,7 +222,8 @@ var AIRTIME = (function(AIRTIME) {
     		i, 
     		len, 
     		$accordSection,
-    		show;
+    		show,
+    		tmp;
     	
     	$showList
     		.accordion( "destroy" )
@@ -228,12 +231,14 @@ var AIRTIME = (function(AIRTIME) {
     	
     	for (i = 0, len = oShows.length; i < len; i++) {
     		show = oShows[i];
+    		tmp = show.starts.split(" ");
     		
     		$accordSection = createShowAccordSection({
     			instance: show.instance_id,
     			name: show.name,
-    			starts: show.starts,
+    			date: tmp[0],
-    			ends: show.ends
+    			startTime: tmp[1],
+    			endTime: show.ends.split(" ").pop()
     		});
     		
     		$showList.append($accordSection);