masq/cheeaun-life
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slight aesthetic changes

Browse Source
This commit is contained in:
Lim Chee Aun 2015-06-19 00:40:54 +08:00
parent 58a482b264
commit 96a1c04c86
1 changed files with 59 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
index.html
View File

@ -23,15 +23,20 @@ body{
font-size: 12px; font-size: 12px;
-webkit-text-size-adjust: none; -webkit-text-size-adjust: none;
position: relative; position: relative;
overflow: hidden;
} }
a{ a{
color: #fff; color: #fff;
} }
header{ header{
position: fixed; z-index: 2;
background-color: rgba(56, 64, 71, .75);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
position: absolute;
bottom: 0; bottom: 0;
margin: 0; margin: 0;
padding: 20px; padding: 10px;
} }
header a{ header a{
margin-left: 1em; margin-left: 1em;
@ -53,23 +58,50 @@ h1{
white-space: nowrap; white-space: nowrap;
} }
#life{ #life{
padding-top: 40px; position: absolute;
padding-bottom: 5em; width: 100%;
} height: 100%;
#life section.year{
min-height: 100%;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; overflow: auto;
border-left: 1px dashed rgba(255,255,255,.1); -webkit-overflow-scrolling: touch;
color: rgba(255,255,255,.3); }
#life-years{
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
padding-left: 10px; white-space: nowrap;
padding-top: 10px; }
#life-years section.year{
display: inline-block;
box-sizing: border-box;
-moz-box-sizing: border-box;
color: #fff;
pointer-events: none; pointer-events: none;
font-weight: 300; font-weight: 300;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box;
height: 100%;
}
#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 section.year span{
background-color: rgba(56, 64, 71, .75);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
display: block;
padding: 10px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#life-years section.year span i{
opacity: .5;
font-style: normal;
}
#life-events{
margin-top: 40px;
padding-bottom: 5em;
} }
#life .event{ #life .event{
padding-right: 20px; padding-right: 20px;
@ -271,7 +303,6 @@ h1{
+ '<div class="time" style="width: ' + width.toFixed(2) + 'px"></div>' + '<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 + '&nbsp;&nbsp;'
+ '</div>'; + '</div>';
return '';
}, },
renderYears: function(firstYear, lastYear){ renderYears: function(firstYear, lastYear){
var dayLength = life.config.yearLength/12/30; var dayLength = life.config.yearLength/12/30;
@ -279,10 +310,10 @@ h1{
var days = 0; var days = 0;
var hideAge = life.config.hideAge; var hideAge = life.config.hideAge;
for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){ for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
html += '<section class="year" style="left: ' + (days*dayLength).toFixed(2) + 'px">' var days = (y % 4 == 0) ? 366 : 365;
+ y + (hideAge ? '' : (' (' + age + ')')) html += '<section class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
+ '</section>'; + y + (hideAge ? '' : (' <i>(' + age + ')</i>'))
days += (y % 4 == 0) ? 366 : 365; + '</span></section>';
} }
return html; return html;
}, },
@ -302,26 +333,28 @@ h1{
}); });
life.firstYear = firstYear; life.firstYear = firstYear;
var html = life.renderYears(firstYear, lastYear); var html = '<div id="life-years">' + life.renderYears(firstYear, lastYear) + '</div>';
html += '<div id="life-events">';
data.forEach(function(d){ data.forEach(function(d){
html += life.renderEvent(d); html += life.renderEvent(d);
}); });
html += '</div>';
life.$el.innerHTML = html; life.$el.innerHTML = html;
} }
}; };
var slider = { var slider = {
startingMousePostition: {}, startingMousePostition: {},
startingPagePosition: {}, containerOffset: {},
init: function(){ init: function(){
window.addEventListener('mousedown', function(event){ life.$el.addEventListener('mousedown', function(event){
slider.startingMousePostition = { slider.startingMousePostition = {
x: event.clientX, x: event.clientX,
y: event.clientY y: event.clientY
}; };
slider.startingPagePosition = { slider.containerOffset = {
x: window.pageXOffset, x: life.$el.scrollLeft,
y: window.pageYOffset y: life.$el.scrollTop
}; };
window.addEventListener('mousemove', slider.slide); window.addEventListener('mousemove', slider.slide);
}); });
@ -331,9 +364,9 @@ h1{
}, },
slide: function(event){ slide: function(event){
event.preventDefault(); event.preventDefault();
var x = slider.startingPagePosition.x + (slider.startingMousePostition.x - event.clientX); var x = slider.containerOffset.x + (slider.startingMousePostition.x - event.clientX);
var y = slider.startingPagePosition.y + (slider.startingMousePostition.y - event.clientY); var y = slider.containerOffset.y + (slider.startingMousePostition.y - event.clientY);
window.scrollTo(x, y); life.$el.scrollTo(x, y);
} }
}; };