Merge pull request #1262 from python-discord/feat/timeline-css-rewrite

Timeline CSS refactor

1 files changed, 34 insertions, 24 deletions

diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js
index 2ff7df57..df0ef585 100644
--- a/pydis_site/static/js/timeline/main.js
+++ b/pydis_site/static/js/timeline/main.js
@@ -2,9 +2,10 @@
   // Vertical Timeline - by CodyHouse.co (modified)
 	function VerticalTimeline( element ) {
 		this.element = element;
-		this.blocks = this.element.getElementsByClassName("cd-timeline__block");
-		this.images = this.element.getElementsByClassName("cd-timeline__img");
-		this.contents = this.element.getElementsByClassName("cd-timeline__content");
+		this.blocks = this.element.getElementsByClassName("timeline-item");
+		this.images = this.element.getElementsByClassName("timeline-icon");
+		this.contents = this.element.getElementsByClassName("timeline-content");
+		this.dates = this.element.getElementsByClassName("timeline-date");
 		this.offset = 0.8;
 		this.hideBlocks();
 	};
@@ -18,8 +19,9 @@
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
 				if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
-					self.images[i].classList.add("cd-timeline__img--hidden");
-					self.contents[i].classList.add("cd-timeline__content--hidden");
+					self.images[i].classList.add("timeline-icon--hidden");
+					self.contents[i].classList.add("timeline-content--hidden");
+					self.dates[i].classList.add("timeline-date--hidden");
 				}
 			})(i);
 		}
@@ -32,14 +34,17 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if((self.contents[i].classList.contains("cd-timeline__content--hidden") || self.contents[i].classList.contains("cd-timeline__content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
+				if((self.contents[i].classList.contains("timeline-content--hidden") || self.contents[i].classList.contains("timeline-content--bounce-out")) && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) {
 					// add bounce-in animation
-					self.images[i].classList.add("cd-timeline__img--bounce-in");
-					self.contents[i].classList.add("cd-timeline__content--bounce-in");
-					self.images[i].classList.remove("cd-timeline__img--hidden");
-					self.contents[i].classList.remove("cd-timeline__content--hidden");
-					self.images[i].classList.remove("cd-timeline__img--bounce-out");
-					self.contents[i].classList.remove("cd-timeline__content--bounce-out");
+					self.images[i].classList.add("timeline-icon--bounce-in");
+					self.contents[i].classList.add("timeline-content--bounce-in");
+					self.dates[i].classList.add("timeline-date--bounce-in");
+					self.images[i].classList.remove("timeline-icon--hidden");
+					self.contents[i].classList.remove("timeline-content--hidden");
+					self.dates[i].classList.remove("timeline-date--hidden");
+					self.images[i].classList.remove("timeline-icon--bounce-out");
+					self.contents[i].classList.remove("timeline-content--bounce-out");
+					self.dates[i].classList.remove("timeline-date--bounce-out");
 				}
 			})(i);
 		}
@@ -52,17 +57,19 @@
 		var self = this;
 		for( var i = 0; i < this.blocks.length; i++) {
 			(function(i){
-				if(self.contents[i].classList.contains("cd-timeline__content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
-					self.images[i].classList.remove("cd-timeline__img--bounce-in");
-					self.contents[i].classList.remove("cd-timeline__content--bounce-in");
-					self.images[i].classList.add("cd-timeline__img--bounce-out");
-					self.contents[i].classList.add("cd-timeline__content--bounce-out");
+				if(self.contents[i].classList.contains("timeline-content--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) {
+					self.images[i].classList.remove("timeline-icon--bounce-in");
+					self.contents[i].classList.remove("timeline-content--bounce-in");
+					self.dates[i].classList.remove("timeline-date--bounce-in");
+					self.images[i].classList.add("timeline-icon--bounce-out");
+					self.contents[i].classList.add("timeline-content--bounce-out");
+					self.dates[i].classList.add("timeline-date--bounce-out");
 				}
 			})(i);
 		}
 	}
 
-	var verticalTimelines = document.getElementsByClassName("js-cd-timeline"),
+	var verticalTimelines = document.getElementsByClassName("timeline"),
 		verticalTimelinesArray = [],
 		scrolling = false;
 	if( verticalTimelines.length > 0 ) {
@@ -81,12 +88,15 @@
 		});
 
 		function animationEnd(event) {
-			if (event.target.classList.contains("cd-timeline__img--bounce-out")) {
-				event.target.classList.add("cd-timeline__img--hidden");
-				event.target.classList.remove("cd-timeline__img--bounce-out");
-			} else if (event.target.classList.contains("cd-timeline__content--bounce-out")) {
-				event.target.classList.add("cd-timeline__content--hidden");
-				event.target.classList.remove("cd-timeline__content--bounce-out");
+			if (event.target.classList.contains("timeline-icon--bounce-out")) {
+				event.target.classList.add("timeline-icon--hidden");
+				event.target.classList.remove("timeline-icon--bounce-out");
+			} else if (event.target.classList.contains("timeline-content--bounce-out")) {
+				event.target.classList.add("timeline-content--hidden");
+				event.target.classList.remove("timeline-content--bounce-out");
+			} else if (event.target.classList.contains("timeline-date--bounce-out")) {
+				event.target.classList.add("timeline-date--hidden");
+				event.target.classList.remove("timeline-date--bounce-out");
 			}
 		}