basic buttons, styling

content.js

@@ -2,6 +2,7 @@ var grades;
 
 var coursename;
 var profname;
+var profinit;
 var profurl;
 var department;
 var course_nbr;
@@ -9,10 +10,8 @@ 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(8)").after('<th scope=col>Dist</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 class=topbuttons><button class=matbut> RMP </button><button class=matbut> eCIS </button><button class=matbut> Save Course </button></div></div></div><div class=card><div class=cardcontainer><h2 class=description></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></h2></div></div><div class=card><div class=cardcontainer><div id=chart></div></div></div></div>'
-
 	$("#container").prepend(modhtml);
 	//console.log(grades);
 	
@@ -29,7 +28,6 @@ $(document).ready( function() {
 	    		let lastname = profname.split(',')[0];
 	    		rating = "Hello";
 	    	}
-	    	$(this).find('td').eq(4).after('<td data-th="Rating"><a href="http://example.com">'+rating+'</a></td>');
 	    	$(this).append('<td data-th="Dist"><input type="image" class="distButton" style="vertical-align: bottom;" width="30" height="30" src='+chrome.extension.getURL('disticon.png')+' /></td>');
 	    }
 	});	
@@ -53,6 +51,7 @@ function getCourseInfo(row){
 		if($(this).is(row)){
 			profurl = $(this).find('td a').prop('href');
 			profname = $(this).find('td').eq(4).text().split(', ')[0];
+			profinit = $(this).find('td').eq(4).text().split(',')[1];
 			return false;
 		}
 	});
@@ -74,7 +73,14 @@ function getDistribution(){
 }
 
 function openDialog(dep,cls,sem,professor,res){
-	var data = res.values[0];
+	var data;
+	if(typeof res == 'undefined'){
+		data = new Array();
+	}
+	else{
+		//TODO: Have placeholder chart for when database doesn't have 
+		data = res.values[0];
+	}
 	var modal = document.getElementById('myModal');
 	var span = document.getElementsByClassName("close")[0];
 	modal.style.display = "block";
@@ -86,7 +92,7 @@ function openDialog(dep,cls,sem,professor,res){
 		console.log(res.values);
 	}
 	else{
-		name = profname.substring(0,1)+profname.substring(1).toLowerCase();
+		name = profinit+". "+profname.substring(0,1)+profname.substring(1).toLowerCase();
 	}
 
 	$(".profname").text("with "+ name);
@@ -94,9 +100,7 @@ function openDialog(dep,cls,sem,professor,res){
 	span.onclick = function() {
 		modal.style.display = "none";
 	}
-	if(typeof data == 'undefined'){
 
-	}
 	chart = Highcharts.chart('chart', {
 		chart: {
 			type: 'column',

styles.css

@@ -20,6 +20,7 @@
     width: 50%;
 }
 
+
 /* The Close Button */
 .close {
     color: #aaaaaa;
@@ -47,6 +48,7 @@
     margin-left: 5px;
     padding-bottom: 5px;
     font-size: medium;
+    margin-top: 10px;
     font-weight: bold;
 }
 
@@ -82,3 +84,60 @@
     text-decoration: none;
     cursor: pointer;
 }
+
+.topbuttons .matbut {
+    display:inline-block;
+}
+
+/* Material style */
+.matbut {
+  border: none;
+  cursor: pointer;
+  color: white;
+  margin: 10px 10px 10px 0px;
+  padding: 10px 10px;
+  border-radius: 2px;
+  font-size: medium;
+  font-style: bold;
+  box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);
+  background: #FF9800;
+}
+
+/* Ripple magic */
+.matbut{
+  position: relative;
+  overflow: hidden;
+}
+
+.matbut:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 5px;
+  height: 5px;
+  background: rgba(255, 255, 255, .5);
+  opacity: 0;
+  border-radius: 100%;
+  transform: scale(1, 1) translate(-50%);
+  transform-origin: 50% 50%;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0, 0);
+    opacity: 1;
+  }
+  20% {
+    transform: scale(25, 25);
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+    transform: scale(40, 40);
+  }
+}
+
+.matbut:focus:not(:active)::after {
+  animation: ripple 1s ease-out;
+}