Fixed calendar class filter highlighting

hourglass/client/main/main.css

@@ -822,6 +822,31 @@ input, textarea {
   }
 }
 
+@keyframes neonglow {
+	from {
+    text-shadow: 
+    0 0 10px #fff, 
+    0 0 20px #fff, 
+    0 0 30px #fff, 
+    0 0 40px #228DFF, 
+    0 0 70px #228DFF, 
+    0 0 80px #228DFF, 
+    0 0 100px #228DFF, 
+    0 0 150px #228DFF;
+  }
+  to {
+    text-shadow: 
+    0 0 5px #fff, 
+    0 0 10px #fff, 
+    0 0 15px #fff, 
+    0 0 20px #228DFF, 
+    0 0 35px #228DFF, 
+    0 0 40px #228DFF, 
+    0 0 50px #228DFF, 
+    0 0 75px #228DFF;
+  }
+}
+
 #disableFilter {
 	font-size: 90%;
 	margin: 0 0 0 23% !important;
@@ -1224,4 +1249,15 @@ input, textarea {
 
 #requestSubmit:hover {
 	background-color: rgba(0,0,0,0.15);
+}
+
+.scaled {
+	-webkit-transform: scale(1.12);
+	-ms-transform: scale(1.12);
+	transform: scale(1.12);
+
+	-webkit-transition: transform 0.4s ease;  
+	-moz-transition: transform 0.4s ease; 
+	-ms-transition: transform 0.4s ease;
+	transition: transform 0.4s ease; 
 }

hourglass/client/main/main.html

@@ -274,14 +274,14 @@
 </template>
 
 <template name="classModeWork">
-    <div class="workCard" workid="{{_id}}" style="{{scale}}">
+    <div class="workCard{{scale}}" workid="{{_id}}">
         <div class="cWorkType" style="background-color:{{typeColor}}"></div>
         <div class="cWorkCont">
             <p class="cWorkName">{{name}}</p>
             <span class="cWorkDate" style="font-weight:{{cardDate}}">{{dueDate}}</span>
 			<div style="float:right">
 				<i class="fa fa-thumbs-up" aria-hidden="true"></i>	
-				<span>{{confirmationLength}} </span>
+				<span>{{confirmationLength}}</span>
 				<i class="fa fa-thumbs-down" aria-hidden="true"></i> 
 				<span>{{reportLength}}</span> 
 			</div>

hourglass/client/main/main.js

@@ -92,6 +92,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
         return [];
     } else {
         var array = [];
+        var refetch = true;
         var courses = Session.get("user").classes;
         var classDisp = Session.get("classDisp"); // Get sidebar class filter.
         var hide = Session.get("user").preferences.timeHide;
@@ -160,8 +161,9 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
                 thisWork[j].reportLength = thisWork[j].reports.length;
 
                 var hoverHighlight = Session.get("classDispHover"); // Highlight/scale related class works on hover.
-                if (hoverHighlight !== null && hoverHighlight === found._id && Session.equals("mode","classes")) {
-                    thisWork[j].scale = "-ms-transform: scale(1.12)-webkit-transform: scale(1.12);transform: scale(1.12)";
+                if (hoverHighlight !== null && hoverHighlight === found._id) {
+                    thisWork[j].scale = " scaled";
+                    refetch = false;
                 } else {
                     thisWork[j].scale = "";
                 }
@@ -170,7 +172,7 @@ Template.registerHelper('myClasses', () => { // Gets all classes and respective
         }
         Session.set("noclass", false);
         Session.set("calendarClasses", array);
-        Session.set("refetchEvents", true);
+        Session.set("refetchEvents", refetch);
         return array;
     }
 });
@@ -270,7 +272,6 @@ Template.main.helpers({
                             currClass.moderators.indexOf(Meteor.userId()) !== -1 ||
                             currClass.banned.indexOf(Meteor.userId()) !== -1
                         ) inRole = true;
-
                         events.push({
                             id: work._id,
                             start: work.realDate.toISOString().slice(0, 10),
@@ -303,6 +304,12 @@ Template.main.helpers({
                 Session.set("currentReadableWork", thisReadWork);
                 openDivFade(document.getElementsByClassName("overlay")[0]);
             },
+            eventMouseover: function (event, jsEvent, view) {
+                this.style.boxShadow = "inset 0 0 0 99999px rgba(255,255,255,0.2)"
+            },
+            eventMouseout: function (event, jsEvent, view) {  
+                this.style.boxShadow = "";
+            },
             dayClick: function(date, jsEvent, view) { // On-click for each day.
                 if (jsEvent.target.className.includes("fc-past") || Session.get("noclass")) return;
                 Session.set("calCreWork", true);
@@ -331,11 +338,8 @@ Template.main.helpers({
     highlight() { // Calendar highlight/scale option.
         var hoverHighlight = Session.get("classDispHover");
         var works = document.getElementsByClassName("workevent");
-        var work = $('.workevent');
         if (hoverHighlight === null) {
-            work.css('-webkit-transform', '');
-            work.css('-ms-transform', '');
-            work.css('transform', '');
+            $(".workevent").toggleClass("scaled",false);
             return;
         }
 
@@ -343,16 +347,7 @@ Template.main.helpers({
             var id = works[i].className;
             var index = id.indexOf("workevent");
             id = id.substring(index + 10, index + 27);
-            console.log(id);
-            if (id === hoverHighlight) {
-                works[i].style.webkitTransform = 'scale(1.12)';
-                works[i].style.msTransform = 'scale(1.12)';
-                works[i].style.transform = 'scale(1.12)';
-            } else {
-                works[i].style.webkitTransform = '';
-                works[i].style.msTransform = '';
-                works[i].style.transform = '';
-            }
+            $("."+id).toggleClass("scaled",true);
         }
         return;
     },