Styling popup
This commit is contained in:
@@ -31,6 +31,7 @@ $(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");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
76
popup.css
Normal file
76
popup.css
Normal 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;
|
||||||
|
}
|
||||||
36
popup.html
36
popup.html
@@ -2,36 +2,18 @@
|
|||||||
<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>
|
||||||
|
<div class="card" id="header">
|
||||||
|
<h2 id='headertext'>Saved Courses</h2>
|
||||||
|
<div id="buttons" style="padding: 10px 0px 5px 10px;">
|
||||||
|
<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="jquery-3.3.1.min.js"></script>
|
||||||
<script src="popup.js"></script>
|
<script src="popup.js"></script>
|
||||||
<h2 id='headertext'>Saved Courses</h2>
|
|
||||||
<ul id= "courseList" style="list-style-type: none;padding: 5px;"></ul>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
17
popup.js
17
popup.js
@@ -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
19
todo
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user