Styling popup

This commit is contained in:
Sriram Hariharan
2018-07-10 22:11:58 -05:00
parent 34cd9fc3c5
commit 0a7a38b81d
5 changed files with 113 additions and 46 deletions

View File

@@ -31,11 +31,12 @@ $(document).ready( function() {
chrome.runtime.sendMessage({command: "alreadyContains",unique: $(this).find('td[data-th="Unique"]').text()}, function(response) { chrome.runtime.sendMessage({command: "alreadyContains",unique: $(this).find('td[data-th="Unique"]').text()}, function(response) {
if(response.alreadyContains){ if(response.alreadyContains){
//DO SOMETHING IF ALREADY CONTAINS //DO SOMETHING IF ALREADY CONTAINS
console.log("ALREADY CONTAINS IN THIS ROW");
} }
}); });
} }
}); });
$(".distButton").click(function(){ $(".distButton").click(function(){
var row = $(this).closest('tr'); var row = $(this).closest('tr');
getCourseInfo(row); getCourseInfo(row);

76
popup.css Normal file
View File

@@ -0,0 +1,76 @@
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
margin:5px;
}
.card:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
h2 {
padding: 10px 0px 0 10px;
}
li {
width: 350px;
}
body{
min-width: 350px;
min-height: 400px;
}
.matbut {
border: none;
outline: none;
cursor: pointer;
color: white;
margin: 10px 10px 10px 0px;
padding: 10px 10px;
border-radius: 10px;
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;
}

View File

@@ -1,37 +1,19 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style> <link rel="stylesheet" href="popup.css">
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
transition: 0.3s;
margin:5px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
}
.container {
padding: 2px 16px;
}
h2 {
padding-left: 5px;
}
li {
width: 350px;
}
body{
min-width: 350px;
}
</style>
</head> </head>
<body> <body>
<script src="jquery-3.3.1.min.js"></script> <div class="card" id="header">
<script src="popup.js"></script> <h2 id='headertext'>Saved Courses</h2>
<h2 id='headertext'>Saved Courses</h2> <div id="buttons" style="padding: 10px 0px 5px 10px;">
<ul id= "courseList" style="list-style-type: none;padding: 5px;"></ul> <button id="clear" class="matbut" style="background:#4CAF50">click me</button>
<button id="clear" class="matbut" style="background:#FFC107">click me</button>
</div>
</div>
<ul id= "courseList" style="list-style-type: none;padding: 5px;"></ul>
<script src="jquery-3.3.1.min.js"></script>
<script src="popup.js"></script>
</body> </body>
</html> </html>

View File

@@ -6,10 +6,10 @@ chrome.storage.sync.get('savedCourses', function(data) {
for(var i = 0; i<between.length;i++){ for(var i = 0; i<between.length;i++){
text+="Conflict between: "+between[i][0].coursename + " and "+between[i][1].coursename+"\n"; text+="Conflict between: "+between[i][0].coursename + " and "+between[i][1].coursename+"\n";
if(i != between.length-1){ if(i != between.length-1){
text+= "<br></br>"; text+= "<br>";
} }
} }
$("#headertext").append("<p style='font-size:small;color:red;'>"+text+"</>"); $("#courseList").prepend("<p style='font-size:small; font-weight:bold; color:red; margin:5px;'>"+text+"</>");
} }
}); });
var courses = data.savedCourses; var courses = data.savedCourses;
@@ -26,17 +26,20 @@ chrome.storage.sync.get('savedCourses', function(data) {
else if(status.includes("closed") || status.includes("cancelled")){ else if(status.includes("closed") || status.includes("cancelled")){
color = "#F44336"; color = "#F44336";
} }
var listhtml = "<li style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'> <div style='display:-webkit-inline-box;'><h2 style='padding:5px; font-size:medium;'>"+courses[i].unique+"</h2><div class='card'><div class='container' style='background:"+color+"''><h4 style='color:white'><b>"+courses[i].coursename+"</b></h4> </div></div><div> </li>"; var department = courses[i].coursename.substring(0,courses[i].coursename.search(/\d/)-2);
var course_nbr = courses[i].coursename.substring(courses[i].coursename.search(/\d/),courses[i].coursename.indexOf(" ",courses[i].coursename.search(/\d/)));
var profname = courses[i].profname.substring(0,1)+courses[i].profname.substring(1).toLowerCase();
var listhtml = "<li style='padding: 0px 5px 5px 5px; overflow-y: auto;max-height:400px;'><div class='card'><div class='container' style='background:"+color+"''><h4 style='color:white; margin:5px; font-size:large;'><b>"+department + " "+course_nbr+"<span style='font-size:medium'>"+" with </span><span style='font-size:medium'>"+profname+"</span></b></h4></div></div></li>";
$("#courseList").append(listhtml); $("#courseList").append(listhtml);
} }
}); });
$(document).keydown(function(e) { $(document).ready(function() {
if (e.keyCode == 67) { $("#clear").click(function(){
clear(); clear();
}
}); });
});
function clear(){ function clear(){
chrome.storage.sync.set({savedCourses: []}); chrome.storage.sync.set({savedCourses: []});
console.log("cleared"); console.log("cleared");

19
todo
View File

@@ -1,18 +1,21 @@
TODO: TODO as of 7/10/18:
- undefined prof, show all possible profs from past? - undefined prof, show all possible profs from past? (DIFFERENT IF NO PROF)
DIFFERENT IF NO PROF
- Online classes/no location - Online classes/no location
- Schedule Conflicts
- save image of modal? - save image of modal?
- no place
- Degree plan? - Degree plan?
- default message save courses
- eureka integration
- underline Courses maybe? click to go to using the planner link thing - underline Courses maybe? click to go to using the planner link thing
- when almost everything is blank: M 379H as example
- schedule generator - schedule generator
- FIX POP UP CARD NOT FILLING FULL LENGTH - show schedule conflicts on the course page
-added/removing/action toasts
CLEAN UP: CLEAN UP:
Everything lmao Everything lmao
KNOWN BUGS: KNOWN BUGS:
- FIX POP UP CARD NOT FILLING FULL LENGTH
IN-PROGRESS: IN-PROGRESS:
@@ -20,7 +23,7 @@ IN-PROGRESS:
FIXED/DONE since 7/7/18: FIXED/DONE as of 7/10/18:
- Scrolling Modal :| - Scrolling Modal :|
- Description - Description
- no Data (prof hasn't taught that class before) - no Data (prof hasn't taught that class before)
@@ -36,3 +39,5 @@ FIXED/DONE since 7/7/18:
- Saving courses - Saving courses
- waitlist/closed/open colors - waitlist/closed/open colors
- popup.html - popup.html
- Schedule Conflicts
- when almost everything is blank: M 379H as example