DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Styling popup

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

1
content.js
View File

@@ -31,6 +31,7 @@ $(document).ready( function() {
chrome.runtime.sendMessage({command: "alreadyContains",unique: $(this).find('td[data-th="Unique"]').text()}, function(response) {
if(response.alreadyContains){
//DO SOMETHING IF ALREADY CONTAINS
console.log("ALREADY CONTAINS IN THIS 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;
}

36
popup.html
View File

@@ -2,36 +2,18 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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>
<link rel="stylesheet" href="popup.css">
</head>
<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="popup.js"></script>
<h2 id='headertext'>Saved Courses</h2>
<ul id= "courseList" style="list-style-type: none;padding: 5px;"></ul>
</body>
</html>

17
popup.js
View File

@@ -6,10 +6,10 @@ chrome.storage.sync.get('savedCourses', function(data) {
for(var i = 0; i<between.length;i++){
text+="Conflict between: "+between[i][0].coursename + " and "+between[i][1].coursename+"\n";
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;
@@ -26,17 +26,20 @@ chrome.storage.sync.get('savedCourses', function(data) {
else if(status.includes("closed") || status.includes("cancelled")){
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);
}
});
$(document).keydown(function(e) {
if (e.keyCode == 67) {
$(document).ready(function() {
$("#clear").click(function(){
clear();
}
});
});
function clear(){
chrome.storage.sync.set({savedCourses: []});
console.log("cleared");

19
todo
View File

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