display course department and number with unique for the conflict popup

css/styles.css

@@ -244,10 +244,10 @@
   background-color: black;
   background:rgba(1,1,1,0.5);
   color: #fff;
-  text-align: center;
+  text-align: left;
   border-radius: 6px;
   font-size: 10px;
-  max-width: 50px;
+  max-width: 100px;
   margin-left: 5px;
   padding: 5px 10px;
   z-index: 2;

js/courseCatalog.js

@@ -34,7 +34,7 @@ if (!$("#kw_results_table").length) {
 	$("#container").prepend(Template.Main.modal());
 	$("#myModal").prepend("<div id='snackbar'>save course popup...</div>");
 
-	// now add to the table 
+	// now add to the table
 	$("table thead th:last-child").after('<th scope=col>Plus</th>');
 	$('table').find('tr').each(function () {
 		if (!($(this).find('td').hasClass("course_header")) && $(this).has('th').length == 0) {
@@ -216,14 +216,15 @@ function updateTextHighlighting(tds, canHighlight, isConflict, alreadyContains,
 		}
 		return false;
 	}).map(function(course){
-		return course.unique;
+		let { name, department, number} = seperateCourseNameParts(course.coursename);
+		return `${department} ${number} (${course.unique})`;
 	});
 	if(isConflict && unique_list.length){
 		if(conflict_texts){
 			row.find('.tooltiptext').remove();
 		}
 		row.addClass('tooltip');
-		row.append(`<span class='tooltiptext'><span style='text-decoration: underline;'>Conflicts:</span> ${unique_list.join(',\n')}</span>`);
+		row.append(`<span class='tooltiptext'><span style='text-decoration: underline;'>Conflicts:<br></span> ${unique_list.join('<br>')}</span>`);
 	} else {
 		row.removeClass('tooltip');
 		conflict_texts.remove();
@@ -609,4 +610,3 @@ $(window).scroll(function () {
 	if ($(document).height() <= $(window).scrollTop() + $(window).height() + 150)
 		loadNextPages();
 });
-

js/util.js

@@ -54,6 +54,19 @@ function capitalizeString(string) {
     return output.trim();
 }
 
+function seperateCourseNameParts(name) {
+    let num_index = name.search(/\d/);
+    department = name.substring(0, num_index).trim();
+    number = name.substring(num_index, name.indexOf(" ", num_index)).trim();
+    name = capitalizeString(name.substring(name.indexOf(" ", num_index)).trim());
+    return {
+        name: name,
+        department: department,
+        number: number
+    }
+}
+
+
 function seperateDays(date, simple=false) {
     let arr = [];
     for (var i = 0; i < date.length; i++) {
@@ -99,18 +112,6 @@ function prettifyDaysText(arr) {
     return output
 }
 
-function seperateCourseNameParts(name) {
-    let num_index = name.search(/\d/);
-    department = name.substring(0, num_index).trim();
-    number = name.substring(num_index, name.indexOf(" ", num_index)).trim();
-    name = capitalizeString(name.substring(name.indexOf(" ", num_index)).trim());
-    return {
-        name: name,
-        department: department,
-        number: number
-    }
-}
-
 function isIndividualCoursePage(){
     return $("#textbook_button").length != 0;
 }
@@ -371,4 +372,4 @@ function buildChartConfig(data) {
 
 function canNotRegister(status, register_link) {
     return status.includes("closed") || status.includes("cancelled") || !status || !register_link
-}
+}