Skip to content

Commit add64b4

Browse files
trishumetrishume
committed
Switched to jekyll and added info buttons
1 parent ccdcfc4 commit add64b4

File tree

6 files changed

+116
-4
lines changed

6 files changed

+116
-4
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
_site
2+
.sass-cache

‎_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
port: 4444

‎_sass/_infobutton.scss

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* Help Popover */
2+
3+
/* The element to hover over */
4+
$bubble-size: 14px;
5+
.qs {
6+
// background-color: #02bdda;
7+
border: 1px solid;
8+
border-radius: 16px;
9+
border-color: #888888;
10+
11+
color: #949494;
12+
cursor: default;
13+
display: inline-block;
14+
font-family: 'Helvetica',sans-serif;
15+
font-size: 12px;
16+
font-weight: bold;
17+
height: $bubble-size;
18+
line-height: $bubble-size;
19+
position: relative;
20+
text-align: center;
21+
vertical-align: text-top;
22+
width: $bubble-size;
23+
24+
margin-right: 5px;
25+
26+
.popover {
27+
background-color: rgba(0,0,0,0.85);
28+
border-radius: 5px;
29+
bottom: $bubble-size + 12px;
30+
box-shadow: 0 0 5px rgba(0,0,0,0.4);
31+
color: #fff;
32+
display: none;
33+
font-size: 12px;
34+
font-family: 'Helvetica',sans-serif;
35+
left: -103px;
36+
padding: 7px 10px;
37+
position: absolute;
38+
text-align: left;
39+
width: 200px;
40+
z-index: 4;
41+
42+
&:before {
43+
border-top: 7px solid rgba(0,0,0,0.85);
44+
border-right: 7px solid transparent;
45+
border-left: 7px solid transparent;
46+
bottom: -7px;
47+
content: '';
48+
display: block;
49+
left: 50%;
50+
margin-left: -7px;
51+
position: absolute;
52+
}
53+
}
54+
55+
&:hover {
56+
.popover {
57+
display: block;
58+
-webkit-animation: fade-in .2s linear 1, move-up .2s linear 1;
59+
-moz-animation: fade-in .2s linear 1, move-up .2s linear 1;
60+
-ms-animation: fade-in .2s linear 1, move-up .2s linear 1;
61+
}
62+
}
63+
}
64+
65+
@-webkit-keyframes fade-in {
66+
from { opacity: 0; }
67+
to { opacity: 1; }
68+
}
69+
@-moz-keyframes fade-in {
70+
from { opacity: 0; }
71+
to { opacity: 1; }
72+
}
73+
@-ms-keyframes fade-in {
74+
from { opacity: 0; }
75+
to { opacity: 1; }
76+
}
77+
@-webkit-keyframes move-up {
78+
from { bottom: $bubble-size; }
79+
to { bottom: $bubble-size + 12px; }
80+
}
81+
@-moz-keyframes move-up {
82+
from { bottom: $bubble-size; }
83+
to { bottom: $bubble-size + 12px; }
84+
}
85+
@-ms-keyframes move-up {
86+
from { bottom: $bubble-size; }
87+
to { bottom: $bubble-size + 12px; }
88+
}

‎js/statView.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,20 @@ StatView.prototype = {
1717
content.appendChild(this.valueText);
1818
content.className = "num";
1919

20+
if(this.stat.description) {
21+
var descript = document.createElement("span");
22+
descript.className = "qs";
23+
descript.appendChild(document.createTextNode("?"));
24+
var popover = document.createElement("span");
25+
popover.className = "popover";
26+
popover.appendChild(document.createTextNode(this.stat.description));
27+
descript.appendChild(popover);
28+
}
29+
2030
var statNode = document.createElement("div");
31+
if(descript) {
32+
statNode.appendChild(descript);
33+
}
2134
statNode.appendChild(title);
2235
statNode.appendChild(document.createElement("br"));
2336
statNode.appendChild(content);

‎js/stats.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ var Stats = {
2424
var text = "$" + totalGrowth.formatMoney(2,'.',',');
2525
return text;
2626
},
27-
name: "$1 Becomes"
27+
name: "$1 Becomes",
28+
description: "If $1 was invested at the beginning of this time period, what would it be by the end?"
2829
},
2930
averageGrowth: {
3031
calc: function(data, start, end) {
@@ -33,7 +34,8 @@ var Stats = {
3334
var text = String((avgGrowth*100).toFixed(2)) + '%';
3435
return text;
3536
},
36-
name: "Average Growth"
37+
name: "Annual Growth",
38+
description: "The CAGR, defined as the rate of constant growth that would produce the same return over the given time period."
3739
},
3840
averageGrowthQuarterly: {
3941
calc: function(data, start, end) {
@@ -42,7 +44,8 @@ var Stats = {
4244
var text = String((avgGrowth*100).toFixed(2)) + '%';
4345
return text;
4446
},
45-
name: "Average Growth"
47+
name: "Annual Growth",
48+
description: "The CAGR, defined as the rate of constant growth that would produce the same return over the given time period."
4649
},
4750
timesDoubled: {
4851
calc: function(data, start, end) {

‎main.css renamed to ‎main.scss

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
---
2+
---
3+
14
body {
25
font-family: sans-serif;
36
}
@@ -27,7 +30,7 @@ body {
2730

2831
#stats strong {
2932
font-weight: normal;
30-
font-size: 15pt;
33+
font-size: 14pt;
3134
}
3235

3336
#stats .num {
@@ -153,3 +156,5 @@ select.titleSet {
153156
#footer {
154157
margin-top: 10px;
155158
}
159+
160+
@import 'infobutton'

0 commit comments

Comments
 (0)