more styling, description, basic animations

content.js

@@ -2,14 +2,16 @@ var grades;
 
 var coursename;
 var profname;
+var profurl;
 var department;
 var course_nbr;
+var description;
 $(document).ready( function() {
 	loadDataBase();
 	//make heading
 	$("table thead th:nth-child(5)").after('<th scope=col>Rating</th>');
 	$("table thead th:nth-child(10)").after('<th scope=col>Dist</th>');
-	var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer><h2 class=title>Computer Fluency (C S 302)</h2><h2 class=profname>with Bruce Porter</h2></div></div><div class=card><div class=cardcontainer><h2 class=subtitle>First part of a two-part sequence in programming. Fundamental concepts of structured programming; procedures and data structures with a focus on problem solving strategies and implementation; introduction to concepts of informal specification, informal reasoning about program behavior, debugging, and ad hoc testing.Only one of the following courses may be counted: Computer Science 303E,305J, 312, 312H. Credit for Computer Science 312 may not be earned aftera student has received credit for Computer Science 314 or 314H.Prerequisite: Credit with a grade of at least C- or registration for Mathematics 408C, 408K, or 408N.</h2></div></div><div class=card><div class=cardcontainer><div id=chart></div></div></div></div>'
+	var modhtml = '<div class=modal id=myModal><div class=modal-content><span class=close>×</span><div class=card><div class=cardcontainer><h2 class=title>Computer Fluency (C S 302)</h2><h2 class=profname>with Bruce Porter</h2></div></div><div class=card><div class=cardcontainer><h2 class=description style = "min-height: 100px;"></h2></div></div><div class=card><div class=cardcontainer><div id=chart></div></div></div></div>'
 
 	$("#container").prepend(modhtml);
 	//console.log(grades);
@@ -20,7 +22,6 @@ $(document).ready( function() {
 		} else if($(this).has('th').length == 0){
 			var rating;
 			var profname = $(this).find('td').eq(4).text() + "";
-			// var profurl = $(this).find('td a').prop('href');
 			if(profname == ""){
 	    		//console.log("No Professor");
 	    		rating = "No Prof :(";
@@ -50,10 +51,12 @@ function getCourseInfo(row){
 			coursename = $(this).find('td').text() + "";
 		}
 		if($(this).is(row)){
+			profurl = $(this).find('td a').prop('href');
 			profname = $(this).find('td').eq(4).text().split(',')[0];
 			return false;
 		}
 	});
+	getDescription();
 	department = coursename.substring(0,coursename.search(/\d/)-2);
 	//console.log(department);
 	course_nbr = coursename.substring(coursename.search(/\d/),coursename.indexOf(" ",coursename.search(/\d/)));
@@ -72,12 +75,20 @@ function getDistribution(){
 
 function openDialog(dep,cls,sem,professor,data){
 	data = data.values[0];
-	getDescription();
 	var modal = document.getElementById('myModal');
 	var span = document.getElementsByClassName("close")[0];
 	modal.style.display = "block";
-	$(".title").text(coursename);
-	$(".profname").text("with "+profname.substring(0,1)+profname.substring(1).toLowerCase());
+
+	$(".title").text(prettifyTitle());
+	var name;
+	if(profname == ""){
+		name = "Undecided Professor ";
+	}
+	else{
+		name = profname.substring(0,1)+profname.substring(1).toLowerCase();
+	}
+
+	$(".profname").text("with "+ name);
 	console.log(coursename);
 	span.onclick = function() {
 		modal.style.display = "none";
@@ -160,15 +171,31 @@ function openDialog(dep,cls,sem,professor,data){
 	}	
 }
 
+function prettifyTitle(){
+	val = department.length+course_nbr.length+3;
+	output = coursename.substring(val).replace(/\b\w*/g, function(txt){
+        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+    });
+    return output + " ("+department+" "+course_nbr+")";	
+}
+
 function getDescription(){
 	chrome.runtime.sendMessage({
 		method: "GET",
 		action: "xhttp",
-    url: "https://utdirect.utexas.edu/apps/registrar/course_schedule/20189/51315/",
+		url: profurl,
 		data: ""
 	}, function(response) {
 		if(response){
-    	console.log(response);
+			var output="";
+			var object = $('<div/>').html(response).contents();
+			object.find('#details > p').each(function(){
+				output+=$(this).text()+"<br></>";
+			});
+			description = output;
+			$(".description").animate({'opacity': 0}, 400, function(){
+        		$(this).html(description).animate({'opacity': 1}, 300);    
+   			});
 		}
 	});
 

styles.css

@@ -36,13 +36,7 @@
     margin:0px 0px 5spx 0px;
 
 }
-.subtitle {
-    padding: 5px;
-    font-size: small;
-    font-weight: normal;
-
-}
-.subtitle.profname{
+.description {
     padding: 5px;
     font-size: small;
     font-weight: normal;
@@ -57,9 +51,9 @@
 }
 
 #chart {
-	min-width: 310px;
+	min-width: auto;
 	max-width: 800px;
-	height: 300px;
+	height: 250px;
 	margin: 0 auto
 }
 
@@ -78,6 +72,7 @@
 /* Add some padding inside the card container */
 .cardcontainer {
     padding: 2px 16px;
+    transition:width 300ms ease-in-out, height 300ms ease-in-out;
 }