From 6f73d7b94f8d4454fc6722d7b2257dcce07b30f0 Mon Sep 17 00:00:00 2001 From: emma Date: Wed, 12 Jul 2017 14:48:05 -0700 Subject: [PATCH] many style changes --- src/css/project.less | 77 +++++++++++++++++++--------- src/css/sfchronicle.less | 2 +- src/js/races.js | 19 ++++--- src/js/training.js | 12 ++--- src/partials/_dontMiss_training.html | 16 +++--- src/races/index.html | 4 +- src/training/index.html | 16 +++--- 7 files changed, 86 insertions(+), 60 deletions(-) diff --git a/src/css/project.less b/src/css/project.less index bfed10f..e423319 100644 --- a/src/css/project.less +++ b/src/css/project.less @@ -16,6 +16,10 @@ a { } } +.month-title { + font-family: @bold-graphics; +} + .link-wrapper { font-family: @med-graphics; color: @red; @@ -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%; @@ -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; @@ -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; @@ -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; @@ -442,7 +466,7 @@ a { padding: 20px 0 40px 0; } .hed { - font-family: @med-graphics; + font-family: @bold-graphics; @media @mobile { font-size: 16px; } @@ -485,7 +509,7 @@ svg { } text { font-size: 14px; - font-family: @block-graphics; + font-family: @med-graphics; @media @mobile { font-size: 12px; } @@ -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; diff --git a/src/css/sfchronicle.less b/src/css/sfchronicle.less index f51254f..c3508ff 100644 --- a/src/css/sfchronicle.less +++ b/src/css/sfchronicle.less @@ -204,7 +204,7 @@ text { text-align: center; margin-bottom:0; a { - font-family: @med-graphics; + font-family: @body; } @media @mobile { font-size: 14px; diff --git a/src/js/races.js b/src/js/races.js index d96bdd5..a6e0b37 100644 --- a/src/js/races.js +++ b/src/js/races.js @@ -28,7 +28,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") { @@ -36,7 +36,7 @@ function color_by_person(personName,runnerID) { } 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") { @@ -45,7 +45,7 @@ function color_by_person(personName,runnerID) { } else if (runnerID == "Hilary Shirazi" && personName == "Gene Dykes"){ return "#2274A5"; } else { - return "#cccccc"; + return "#3F3F3F"; } } @@ -53,11 +53,11 @@ 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; } } @@ -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; } } @@ -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) { @@ -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(""); diff --git a/src/js/training.js b/src/js/training.js index b7670e8..de9c176 100644 --- a/src/js/training.js +++ b/src/js/training.js @@ -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") { @@ -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"; } } @@ -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; } } @@ -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 { @@ -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) { @@ -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) { diff --git a/src/partials/_dontMiss_training.html b/src/partials/_dontMiss_training.html index b19dd7e..083c376 100644 --- a/src/partials/_dontMiss_training.html +++ b/src/partials/_dontMiss_training.html @@ -3,21 +3,21 @@
- - + + - -
How the SF Marathon became not world-famous but exceptional
+ +
Running the numbers: A deep dive into the data of the SF Marathon
- - + + - -
Running the numbers: A deep dive into the data of the SF Marathon
+ +
How the SF Marathon became not world-famous but exceptional
diff --git a/src/races/index.html b/src/races/index.html index 8672750..bc8c59a 100644 --- a/src/races/index.html +++ b/src/races/index.html @@ -63,8 +63,8 @@
<%=d["Race-deck"]%>
-
-
+
+
diff --git a/src/training/index.html b/src/training/index.html index 85002ad..0ec539d 100644 --- a/src/training/index.html +++ b/src/training/index.html @@ -110,8 +110,8 @@
Hilary and Gene's total elevation gain
-
-
+
+
@@ -119,8 +119,8 @@
Hilary and Gene's total miles
-
-
+
+
@@ -142,8 +142,8 @@
<%=d.Name.split(" ")[0]%>'s total elevation gain
-
-
+
+
@@ -151,8 +151,8 @@
<%=d.Name.split(" ")[0]%>'s total miles
-
-
+
+