Skip to content

Commit

Permalink
many style changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@emro
emro committed Jul 12, 2017
1 parent cb3bf90 commit 6f73d7b
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 60 deletions.
77 changes: 52 additions & 25 deletions src/css/project.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ a {
}
}

.month-title {
font-family: @bold-graphics;
}

.link-wrapper {
font-family: @med-graphics;
color: @red;
Expand Down Expand Up @@ -100,27 +104,44 @@ a {
.hover-container {
position: absolute;
top: 40px;
font-size:12px;
font-family: @block-graphics;
&:empty {
border: none;
}
font-size:14px;
font-family: @med-graphics;
background: rgba(0,0,0,0.05);
width: 200px;
&.training {
left: 40%;
width: 150px;
left: 35%;
right: 0;
@media @mobile {
left: 20%;
}
}
&.races {
// left: 0;
background: rgba(0,0,0,0.1);
right: 25%;
font-size: 13px;
border: @light-gray 1px solid;
padding: 5px 20px;
width: 200px;
}
&:empty {
color: red;
}

.hover-name {
padding-top: 10px;
padding-left: 20px;
@media @mobile {
padding-left: 0;
}
}
.hover-pace {
padding-left: 20px;
padding-bottom: 10px;
@media @mobile {
padding-left: 0;
}
}
.hover-pace:empty{
display:none;
}
.hover-name:empty {
display:none;
}

.source {
width: 90%;
Expand Down Expand Up @@ -165,18 +186,18 @@ a {
}

.interactive-container {
padding: 30px 0;
padding: 30px 0 10px 0;
@media @mobile {
padding: 10px 0 30px 0;
}
}
.interactive-deck {
font-family: @block-graphics;
font-family: @med-graphics;
text-align: center;
font-size: 16px;
max-width: 800px;
max-width: 600px;
margin: auto;
padding-top: 5px;
padding: 10px 0;
@media @mobile {
padding: 10px 0;
font-size: 14px;
Expand Down Expand Up @@ -369,8 +390,9 @@ a {

.legend-container {
font-size: 12px;
font-family: @block-graphics;
font-family: @med-graphics;
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
@media @mobile {
padding-top: 10px;
Expand Down Expand Up @@ -412,21 +434,23 @@ a {
.top-container {
padding-top: 50px;
padding-bottom: 50px;
font-family: @block-graphics;
font-family: @body;
font-size: 18px;
text-align: center;
}

.title {
font-family: @bold-graphics;
font-family: @body-bold;
line-height: 1.2;
font-size: 30px;
font-size: 40px;
max-width: 500px;
padding-bottom: 10px;
}
.title-deck {
font-family: @med-graphics;
font-family: @body;
font-size: 24px;
padding-top: 10px;
max-width: 90%;
max-width: 600px;
margin: auto;
@media @mobile {
font-size: 16px;
Expand All @@ -442,7 +466,7 @@ a {
padding: 20px 0 40px 0;
}
.hed {
font-family: @med-graphics;
font-family: @bold-graphics;
@media @mobile {
font-size: 16px;
}
Expand Down Expand Up @@ -485,7 +509,7 @@ svg {
}
text {
font-size: 14px;
font-family: @block-graphics;
font-family: @med-graphics;
@media @mobile {
font-size: 12px;
}
Expand All @@ -512,6 +536,9 @@ path {
.line-hover {
stroke-width: 5 !important;
}
.line-hover-races {
stroke-width: 5 !important;
}
.voronoi path {
fill: none;
pointer-events: all;
Expand Down
2 changes: 1 addition & 1 deletion src/css/sfchronicle.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ text {
text-align: center;
margin-bottom:0;
a {
font-family: @med-graphics;
font-family: @body;
}
@media @mobile {
font-size: 14px;
Expand Down
19 changes: 9 additions & 10 deletions src/js/races.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,15 @@ function color_by_person(personName,runnerID) {
if (personName == runnerID) {
// return "#CF0000";
if (personName == "Balint Gal") {
return "#FFCC32";
return "#E6B319";//"#FFCC32";
} else if (personName == "Gene Dykes") {
return "#2274A5";
} else if (personName == "Greg McQuaid") {
return "#F25C00";//"#EB8F6A";
} else if (personName == "Hilary Shirazi") {
return "#45C16F";
} else if (personName == "Iain Mickle") {
return "#26532B";
return "#55A85F";//"#26532B";
} else if (personName == "Jorge Maravilla") {
return "purple";
} else if (personName == "Lauren Elkins") {
Expand All @@ -45,19 +45,19 @@ function color_by_person(personName,runnerID) {
} else if (runnerID == "Hilary Shirazi" && personName == "Gene Dykes"){
return "#2274A5";
} else {
return "#cccccc";
return "#3F3F3F";
}
}

function stroke_by_person(personName,runnerID) {
// console.log(personName);
// console.log(runnerID);
if (personName == runnerID) {
return 3;
return 4;
} else if (runnerID == "Hilary Shirazi" && personName == "Gene Dykes"){
return 3;
return 4;
} else {
return 2;
return 1;
}
}

Expand All @@ -69,7 +69,7 @@ function opacity_by_person(personName,runnerID) {
} else if (runnerID == "Hilary Shirazi" && personName == "Gene Dykes"){
return 0,9;
} else {
return 0.5;
return 0.9;
}
}

Expand Down Expand Up @@ -241,7 +241,6 @@ function hoverChart(targetID,maxval,yLabel,units,runnerID) {
var elevationLine = d3.line()
.curve(d3.curveCardinal)
.x(function(d) {
console.log(d);
return x(d["distance"]);
})
.y(function(d) {
Expand Down Expand Up @@ -285,14 +284,14 @@ function hoverChart(targetID,maxval,yLabel,units,runnerID) {
.on("mouseout", mouseout);

function mouseover(d) {
d3.select(".id"+d.data.athlete_id.toLowerCase().replace(/ /g,'')+runnerID.toLowerCase().replace(/ /g,'')).classed("line-hover", true);
d3.select(".id"+d.data.athlete_id.toLowerCase().replace(/ /g,'')+runnerID.toLowerCase().replace(/ /g,'')).classed("line-hover-races", true);
d3.select("#hover-race-name-"+runnerID.split(" ")[0].toLowerCase()).text(d.data.athlete_id);
d3.select("#hover-race-pace-"+runnerID.split(" ")[0].toLowerCase()).text("Mile "+d.data.mileShort+" pace: "+d.data.paceShort);
focus.attr("transform", "translate(" + x(d.data["mileShort"]) + "," + y(parsePace(d.data["paceShort"])) + ")");
}

function mouseout(d) {
d3.select(".id"+d.data.athlete_id.toLowerCase().replace(/ /g,'')+runnerID.toLowerCase().replace(/ /g,'')).classed("line-hover", false);
d3.select(".id"+d.data.athlete_id.toLowerCase().replace(/ /g,'')+runnerID.toLowerCase().replace(/ /g,'')).classed("line-hover-races", false);
focus.attr("transform", "translate(-100,-100)");
d3.select("#hover-race-name-"+runnerID.split(" ")[0].toLowerCase()).text("");
d3.select("#hover-race-pace-"+runnerID.split(" ")[0].toLowerCase()).text("");
Expand Down
12 changes: 6 additions & 6 deletions src/js/training.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ function color_by_person(personName,runnerID) {
if (personName == runnerID) {
// return "#CF0000";
if (personName == "Balint Gal") {
return "#FFCC32";
return "#E6B319";//#FFCC32";
} else if (personName == "Gene Dykes") {
return "#2274A5";
} else if (personName == "Greg McQuaid") {
Expand All @@ -44,7 +44,7 @@ function color_by_person(personName,runnerID) {
} else if (runnerID == "Hilary Shirazi" && personName == "Gene Dykes"){
return "#2274A5";
} else {
return "#cccccc";
return "#8C8C8C";
}
}

Expand All @@ -54,7 +54,7 @@ function stroke_by_person(personName,runnerID) {
} else if (runnerID == "Hilary Shirazi" && personName == "Gene Dykes"){
return 3;
} else {
return 2;
return 1;
}
}

Expand Down Expand Up @@ -273,7 +273,7 @@ function hoverChart(targetID,targetVal,maxval,yLabel,units,runnerID) {
focus.style("text-anchor","end")
}
d3.select("#hover-runner-"+targetVal.replace(/ /g,'')+"-"+runnerID.split(" ")[0].toLowerCase()).text(d.data.name);
d3.select("#hover-number-"+targetVal.replace(/ /g,'')+"-"+runnerID.split(" ")[0].toLowerCase()).text(d.data[targetVal]+" "+units);
d3.select("#hover-number-"+targetVal.replace(/ /g,'')+"-"+runnerID.split(" ")[0].toLowerCase()).text(formatthousands(d.data[targetVal])+" "+units);
if (units != "hours") {
focus.attr("transform", "translate(" + x(parseFullDate(d.data["Date"])) + "," + y(d.data[targetVal]) + ")");
} else {
Expand Down Expand Up @@ -578,7 +578,7 @@ function drawCalendarV2(dateData,chartID) {
.enter().append("text")
.text(monthTitle)
.attr("x", function(d, i) {
var month_padding = 1.2 * cellSize*7* ((month(d)) % (num_months_in_a_row));
var month_padding = 1.2 * cellSize*7* ((month(d)) % (num_months_in_a_row)) + 2.5*cellSize;
return month_padding;
})
.attr("y", function(d, i) {
Expand Down Expand Up @@ -608,7 +608,7 @@ function drawCalendarV2(dateData,chartID) {
if (lookup[d]){
var text = d+" : "+lookup[d]+ " miles";
} else {
var text = d+" : 0 miles";
var text = "";
}
tooltip.style("opacity",1)
if (screen.width <= 480) {
Expand Down
16 changes: 8 additions & 8 deletions src/partials/_dontMiss_training.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@
<section class="dont-miss">
<div class="story">
<div class="padded">
<a href="http://www.sfchronicle.com/bayarea/article/How-the-SF-Marathon-became-not-world-famous-but-8664413.php" target="_blank">
<img src="http://ww2.hdnux.com/photos/50/57/53/10681037/3/premium_landscape.jpg"></img>
<a href="http://projects.sfchronicle.com/2016/sf-marathon-data/" target="_blank">
<img src="http://projects.sfchronicle.com/2016/sf-marathon-data/assets/photos/3.jpg"></img>
</a>
<a href="http://www.sfchronicle.com/bayarea/article/How-the-SF-Marathon-became-not-world-famous-but-8664413.php" target="_blank">
<div>How the SF Marathon became not world-famous but exceptional</div>
<a href="http://projects.sfchronicle.com/2016/sf-marathon-data/" target="_blank">
<div>Running the numbers: A deep dive into the data of the SF Marathon</div>
</a>
</div>
</div>
<div class="story">
<div class="padded">
<a href="http://projects.sfchronicle.com/2016/sf-marathon-data/" target="_blank">
<img src="http://projects.sfchronicle.com/2016/sf-marathon-data/assets/photos/3.jpg"></img>
<a href="http://www.sfchronicle.com/bayarea/article/How-the-SF-Marathon-became-not-world-famous-but-8664413.php" target="_blank">
<img src="http://ww2.hdnux.com/photos/50/57/53/10681037/3/premium_landscape.jpg"></img>
</a>
<a href="http://projects.sfchronicle.com/2016/sf-marathon-data/" target="_blank">
<div>Running the numbers: A deep dive into the data of the SF Marathon</div>
<a href="http://www.sfchronicle.com/bayarea/article/How-the-SF-Marathon-became-not-world-famous-but-8664413.php" target="_blank">
<div>How the SF Marathon became not world-famous but exceptional</div>
</a>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/races/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@
<div class="interactive-deck"><%=d["Race-deck"]%></div>
<div class="race-chart">
<div class="hover-container races">
<div id="hover-race-name-<%=d.Key%>"></div>
<div id="hover-race-pace-<%=d.Key%>"></div>
<div id="hover-race-name-<%=d.Key%>" class="hover-name"></div>
<div id="hover-race-pace-<%=d.Key%>" class="hover-pace"></div>
</div>
<div id="<%=d.Key%>-race"></div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions src/training/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,17 +110,17 @@
<div class="elevation-chart">
<div class="subhed">Hilary and Gene's total elevation gain</div>
<div class="hover-container training">
<div id="hover-runner-TotalElevation-hilary"></div>
<div id="hover-number-TotalElevation-hilary"></div>
<div id="hover-runner-TotalElevation-hilary" class="hover-name"></div>
<div id="hover-number-TotalElevation-hilary" class="hover-pace"></div>
</div>
<div id="hover-chart-elevation-hilary"></div>
</div>

<div class="miles-chart">
<div class="subhed">Hilary and Gene's total miles</div>
<div class="hover-container training">
<div id="hover-runner-TotalMiles-hilary"></div>
<div id="hover-number-TotalMiles-hilary"></div>
<div id="hover-runner-TotalMiles-hilary" class="hover-name"></div>
<div id="hover-number-TotalMiles-hilary" class="hover-pace"></div>
</div>
<div id="hover-chart-miles-hilary"></div>
</div>
Expand All @@ -142,17 +142,17 @@
<div class="elevation-chart">
<div class="subhed"><%=d.Name.split(" ")[0]%>'s total elevation gain</div>
<div class="hover-container training">
<div id="hover-runner-TotalElevation-<%=d.Key%>"></div>
<div id="hover-number-TotalElevation-<%=d.Key%>"></div>
<div id="hover-runner-TotalElevation-<%=d.Key%>" class="hover-name"></div>
<div id="hover-number-TotalElevation-<%=d.Key%>" class="hover-pace"></div>
</div>
<div id="hover-chart-elevation-<%=d.Key%>"></div>
</div>

<div class="miles-chart">
<div class="subhed"><%=d.Name.split(" ")[0]%>'s total miles</div>
<div class="hover-container training">
<div id="hover-runner-TotalMiles-<%=d.Key%>"></div>
<div id="hover-number-TotalMiles-<%=d.Key%>"></div>
<div id="hover-runner-TotalMiles-<%=d.Key%>" class="hover-name"></div>
<div id="hover-number-TotalMiles-<%=d.Key%>" class="hover-pace"></div>
</div>
<div id="hover-chart-miles-<%=d.Key%>"></div>
</div>
Expand Down

0 comments on commit 6f73d7b

Please sign in to comment.