From 61fc68ff7d8858cbab3d686ee047517355ce8659 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 6 Aug 2015 00:37:10 +0800
Subject: [PATCH] Code revamp

- Better sticky position for the years headers
- Replace blur effect with gradients
- Fix scrolling bug on Chrome
---
 index.html | 83 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 44 insertions(+), 39 deletions(-)

diff --git a/index.html b/index.html
index b86371a..8cd0e55 100644
--- a/index.html
+++ b/index.html
@@ -5,36 +5,29 @@
 <meta name="format-detection" content="telephone=no">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300">
 <style>
-html{
-	font-family: Open Sans, Helvetica, Arial, sans-serif;
-	cursor: -webkit-grab;
-	cursor: -moz-grab;
-	cursor: grab;
-}
-html{
-	height: 100%;
-}
 body{
-	min-height: 100%;
+	font-family: Open Sans, Helvetica, Arial, sans-serif;
 	color: #fff;
 	background-color: #384047;
 	margin: 0;
 	padding: 0;
 	font-size: 12px;
 	-webkit-text-size-adjust: none;
-	position: relative;
-	overflow: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	cursor: default;
 }
 a{
 	color: #fff;
 }
 header{
-	z-index: 2;
-	background-color: rgba(56, 64, 71, .75);
-	-webkit-backdrop-filter: blur(5px);
-	backdrop-filter: blur(5px);
-	position: absolute;
+	z-index: 3;
+	background: linear-gradient(to bottom, rgba(56,64,71,0) 0%,rgba(56,64,71,.5) 20%,rgba(56,64,71,1) 50%,rgba(56,64,71,.5) 80%,rgba(56,64,71,0) 100%);
+	position: fixed;
 	bottom: 0;
+	left: 0;
 	margin: 0;
 	padding: 10px;
 }
@@ -50,7 +43,6 @@ header a:hover{
 h1{
 	display: inline;
 	font-size: 20px;
-	font-weight: normal;
 	line-height: 1em;
 	opacity: .5;
 	z-index: 3;
@@ -59,55 +51,66 @@ h1{
 }
 #life{
 	position: absolute;
-	width: 100%;
-	height: 100%;
-	box-sizing: border-box;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
 	overflow: auto;
 	-webkit-overflow-scrolling: touch;
+	cursor: -webkit-grab;
+	cursor: -moz-grab;
+	cursor: grab;
 }
 #life-years{
 	position: absolute;
 	top: 0;
 	bottom: 0;
 	white-space: nowrap;
+	pointer-events: none;
 }
-#life-years section.year{
+#life-years .year{
 	display: inline-block;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
 	color: #fff;
-	pointer-events: none;
 	font-weight: 300;
 	white-space: nowrap;
 	box-sizing: border-box;
 	height: 100%;
+	border-left: 1px dashed rgba(255,255,255,.2);
 }
-#life-years section.year:nth-child(even){
-	background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
+#life-years .year:first-child{
+	border-left: 0;
 }
-#life-years section.year span{
-	background-color: rgba(56, 64, 71, .75);
-	-webkit-backdrop-filter: blur(5px);
-	backdrop-filter: blur(5px);
+#life-years .year span{
+	background: linear-gradient(to bottom, rgba(56,64,71,1) 30%,rgba(56,64,71,0) 100%);
 	display: block;
 	padding: 10px;
 	position: -webkit-sticky;
 	position: sticky;
 	top: 0;
+	z-index: 3;
 }
-#life-years section.year span i{
+#life-years .year span i{
 	opacity: .5;
 	font-style: normal;
 }
 #life-events{
-	margin-top: 40px;
+	padding-top: 40px;
 	padding-bottom: 5em;
+	position: relative;
+}
+#life-events:after{
+	content: '';
+	display: block;
+	clear: left;
 }
 #life .event{
 	padding-right: 20px;
 	padding-bottom: 5px;
 	vertical-align: middle;
 	white-space: nowrap;
+	float: left;
+	clear: left;
 }
 #life .event b{
 	font-weight: normal;
@@ -301,7 +304,7 @@ h1{
 
 			return '<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px">'
 				+ '<div class="time" style="width: ' + width.toFixed(2) + 'px"></div>'
-				+ '<b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;'
+				+ '<b>' + d.time.title + '</b> ' + d.text
 				+ '</div>';
 		},
 		renderYears: function(firstYear, lastYear){
@@ -311,9 +314,9 @@ h1{
 			var hideAge = life.config.hideAge;
 			for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
 				var days = (y % 4 == 0) ? 366 : 365;
-				html += '<section class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
+				html += '<div class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
 					+ y + (hideAge ? '' : (' <i>(' + age + ')</i>'))
-					+ '</span></section>';
+					+ '</span></div>';
 			}
 			return html;
 		},
@@ -333,8 +336,9 @@ h1{
 			});
 			life.firstYear = firstYear;
 
-			var html = '<div id="life-years">' + life.renderYears(firstYear, lastYear) + '</div>';
-			html += '<div id="life-events">';
+			var html = '<div id="life-events">';
+			// 'comment_' class name is to hide it from Safari Reader
+			html += '<div id="life-years" class="comment_">' + life.renderYears(firstYear, lastYear) + '</div>';
 			data.forEach(function(d){
 				html += life.renderEvent(d);
 			});
@@ -347,7 +351,7 @@ h1{
 		startingMousePostition: {},
 		containerOffset: {},
 		init: function(){
-			life.$el.addEventListener('mousedown', function(event){
+			window.addEventListener('mousedown', function(event){
 				slider.startingMousePostition = {
 					x: event.clientX,
 					y: event.clientY
@@ -366,7 +370,8 @@ h1{
 			event.preventDefault();
 			var x = slider.containerOffset.x + (slider.startingMousePostition.x - event.clientX);
 			var y = slider.containerOffset.y + (slider.startingMousePostition.y - event.clientY);
-			life.$el.scrollTo(x, y);
+			life.$el.scrollLeft = x;
+			life.$el.scrollTop = y;
 		}
 	};