From 5cd86a5d4073814e1a96776657345dd64e7eb726 Mon Sep 17 00:00:00 2001 From: Lars Eggert Date: Wed, 16 Dec 2015 16:49:57 +0000 Subject: [PATCH] Show IDs that expired with a fading gradient and don't extend their box after 185 days. Plus a bunch of cosmetic changes. - Legacy-Id: 10605 --- ietf/static/ietf/css/ietf.css | 24 ++------ ietf/static/ietf/js/document_timeline.js | 71 ++++++++++++++++-------- 2 files changed, 55 insertions(+), 40 deletions(-) diff --git a/ietf/static/ietf/css/ietf.css b/ietf/static/ietf/css/ietf.css index 4a7732424..f476dbc8d 100644 --- a/ietf/static/ietf/css/ietf.css +++ b/ietf/static/ietf/css/ietf.css @@ -204,18 +204,6 @@ pre { word-break: keep-all; } -/* Make ampersands pretty */ -/* This sets ampersand in a different font than the rest of the text. Fancy, but it's -really better to select a pretty font in the first place. Additionally, _which_ 'pretty' -ampersand you get is dependent on which fonts are available in the browser. Hacky. */ -/* -.amp { - font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif; - font-size:110%; - font-style:italic; -} - */ - /* Turn off link underlining for panels in the search results */ .ipr a:hover { text-decoration: none } @@ -447,11 +435,11 @@ form.navbar-form input.form-control.input-sm { width: 141px; } } /* like label-success */ -#timeline .bar:nth-child(odd) rect { fill: #5CB85C; } +#timeline .bar:nth-child(odd) rect { fill: #3abf03; } +#timeline .bar:nth-child(odd) rect:hover, +#timeline .bar:nth-child(odd) rect:focus { fill: #2b8d02; } /* like label-primary */ -#timeline .bar:nth-child(even) rect { fill: #337AB7; } - -/* like label-warning */ -#timeline .gradient.left { stop-color: #F0AD4E; } -#timeline .gradient.right { stop-color: white; } +#timeline .bar:nth-child(even) rect { fill: #54478e; } +#timeline .bar:nth-child(even) rect:hover, +#timeline .bar:nth-child(even) rect:focus { fill: #40366c; } diff --git a/ietf/static/ietf/js/document_timeline.js b/ietf/static/ietf/js/document_timeline.js index 86a1860d7..8f5a6461c 100644 --- a/ietf/static/ietf/js/document_timeline.js +++ b/ietf/static/ietf/js/document_timeline.js @@ -7,7 +7,7 @@ var bar_height; var y_label_width; var x_axis; var width; - +var now; function expiration_date(d) { return new Date(d.published.getTime() + 1000 * 60 * 60 * 24 * 185); @@ -31,12 +31,14 @@ function offset(d) { function bar_width(d, i) { - // check for next rev of this name + // check for next rev of this name, or published RFC for (i++; i < data.length; i++) { - if (data[i].name === d.name) { break; } + if (data[i].name === d.name || data[i].name.match(/^rfc/)) { break; } } var w = i === data.length ? expiration_date(d) : data[i].published; + // don't extend the bar past the expiration date of the document + w = w > expiration_date(d) ? expiration_date(d) : w; return x_scale(w) - x_scale(d.published); } @@ -50,11 +52,15 @@ function scale_x() { d3.max(data, function(d) { return d.published; }) ]).range([y_label_width, width]); + + // if the end of the timeline is past the current date, show it + var tv = data.slice(0, -1); + now = Date.now(); + if (tv[tv.length - 1].published > now) { tv.push(new Date(now)); } + // resort data by publication time to suppress some ticks if they are closer // than 12px, and don't add a tick for the final pseudo entry - var tv = data - .slice(0, -1) - .sort(function(a, b) { return a.published - b.published; }) + tv = tv.sort(function(a, b) { return a.published - b.published; }) .map(function(d, i, arr) { if (i === 0 || x_scale(d.published) > x_scale(arr[i - 1].published) + 12) { @@ -65,7 +71,10 @@ function scale_x() { x_axis = d3.svg.axis() .scale(x_scale) .tickValues(tv) - .tickFormat(d3.time.format("%b %Y")) + .tickFormat(function(d) { + if (d.getTime() < now) { return d3.time.format("%b %Y")(d); } + return "Now"; + }) .orient("bottom"); } @@ -94,24 +103,38 @@ function draw_timeline() { var div = $("#timeline"); if (div.is(":empty")) { - div.append(""); + div.append(""); } var chart = d3.select("#timeline svg").attr("width", width); - var gradient = chart.append("defs") - .append("linearGradient") - .attr("id", "gradient"); - gradient.append("stop") + var defs = chart.append("defs"); + var fade = defs.append("linearGradient") + .attr("id", "maskGradient"); + fade.append("stop") .attr({ - class: "gradient left", - offset: 0 + offset: 0.9, + "stop-color": "white", + "stop-opacity": 1 }); - gradient.append("stop") + fade.append("stop") .attr({ - class: "gradient right", - offset: 1 + offset: 1, + "stop-color": "white", + "stop-opacity": 0 }); + defs.append("mask") + .attr({ + id: "fade", + maskContentUnits: "objectBoundingBox" + }) + .append("rect") + .attr({ + height: 1, + width: 1, + fill: "url(#maskGradient)" + }); + var y_labels = data .map(function(d) { return d.name; }) .filter(function(val, i, self) { return self.indexOf(val) === i; }); @@ -156,8 +179,16 @@ function draw_timeline() { .append("rect") .attr({ height: bar_height, - width: bar_width + width: bar_width, + mask: function(d, i) { + // apply gradient it the document expired + if (bar_width(d, i) >= x_scale(expiration_date(d)) - + x_scale(d.published)) { + return "url(#fade)"; + } + } }); + g.append("text") .attr({ x: 3, @@ -165,10 +196,6 @@ function draw_timeline() { }) .text(function(d) { return d.rev; }); - // since the gradient is defined inside the SVG, we need to set the CSS - // style here, so the relative URL works - $("#timeline .bar:last-child rect").css("fill", "url(#gradient)"); - var y_scale = d3.scale.ordinal() .domain(y_labels) .rangePoints([0, max(bar_y) + bar_height]);