Fix timelines

- Legacy-Id: 19591
This commit is contained in:
Lars Eggert 2021-11-09 16:43:55 +00:00
parent 72569dd834
commit f12bc99d76
12 changed files with 101 additions and 32 deletions

View file

@ -88,4 +88,55 @@ body {
.ietflogo {
width: 75%;
max-width: 300px;
}
// Styles for d3.js graphical SVG timelines
#timeline {
font-size: small;
}
#timeline .axis path,
#timeline .axis line {
fill: none;
stroke: black;
}
#timeline .axis.y path,
#timeline .axis.y line {
stroke: none;
}
#timeline .axis.x text {
dominant-baseline: central;
}
#timeline .bar text {
fill: white;
dominant-baseline: central;
pointer-events: none;
}
$timeline-odd-color: $primary;
$timeline-odd-hover-color: shift-color($timeline-odd-color, $link-shade-percentage) !default;
#timeline .bar:nth-child(odd) rect {
fill: $timeline-odd-color;
}
#timeline .bar:nth-child(odd) rect:hover,
#timeline .bar:nth-child(odd) rect:focus {
fill: $timeline-odd-hover-color;
}
$timeline-even-color: $success;
$timeline-even-hover-color: shift-color($timeline-even-color, $link-shade-percentage) !default;
#timeline .bar:nth-child(even) rect {
fill: $timeline-even-color;
}
#timeline .bar:nth-child(even) rect:hover,
#timeline .bar:nth-child(even) rect:focus {
fill: $timeline-even-hover-color;
}

3
ietf/static/js/d3.js vendored Normal file
View file

@ -0,0 +1,3 @@
import * as d3 from "d3";
global.d3 = d3;

View file

@ -191,6 +191,8 @@ function draw_timeline() {
.attr({
height: bar_height,
width: bar_width,
class: "btn",
type: "button",
mask: function(d, i) {
// apply gradient if the document is a draft and expired
if (d.name.match(/^draft-/) &&
@ -264,4 +266,4 @@ $(window).on({
resize: function() {
update_timeline();
}
});
});

View file

@ -5,12 +5,6 @@
{% load ietf_filters %}
{% load person_filters %}
{% block pagehead %}
<script src="{% static 'd3/d3.min.js' %}"></script>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}
{% block title %}{{ doc.title }}{% endblock %}
{% block content %}
@ -178,3 +172,8 @@
</div>
{% endblock %}
{% block js %}
<script src="{% static 'ietf/js/d3.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}

View file

@ -6,9 +6,6 @@
{% block pagehead %}
<link rel="alternate" type="application/atom+xml" href="/feed/group-changes/{{ group.acronym }}/">
<script src="{% static 'd3/d3.min.js' %}"></script>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}
{% block title %}{{ doc.title }}{% endblock %}
@ -238,3 +235,8 @@
{% endif %}
{% endblock %}
{% block js %}
<script src="{% static 'ietf/js/d3.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}

View file

@ -4,12 +4,6 @@
{% load static %}
{% load ietf_filters %}
{% block pagehead %}
<script src="{% static 'd3/d3.min.js' %}"></script>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}
{% block title %}{{ doc.title }}{% endblock %}
{% block content %}
@ -144,3 +138,8 @@
<pre> {{ content|sanitize|maybewordwrap|safe }}</pre>
{% endif %}
{% endblock %}
{% block js %}
<script src="{% static 'ietf/js/d3.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}

View file

@ -8,9 +8,6 @@
{% block pagehead %}
<link rel="alternate" type="application/atom+xml" title="Document changes" href="/feed/document-changes/{{ name }}/">
<meta name="description" content="{{ doc.title }} {% if doc.get_state_slug == "rfc" and not snapshot %}(RFC {{ rfc_number }}{% if published %}, {{ published.time|date:"F Y" }}{% endif %}{% if obsoleted_by %}; obsoleted by {{ obsoleted_by|join:", " }}{% endif %}){% else %}(Internet-Draft, {{ doc.time|date:"Y" }}){% endif %}">
<script src="{% static 'd3/d3.min.js' %}"></script>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}
{% block morecss %}
@ -759,3 +756,8 @@
</div>
{% endif %}
{% endblock %}
{% block js %}
<script src="{% static 'ietf/js/d3.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}

View file

@ -4,12 +4,6 @@
{% load static %}
{% load ietf_filters %}
{% block pagehead %}
<script src="{% static 'd3/d3.min.js' %}"></script>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}
{% block title %}{{ doc.title }}{% endblock %}
{% block content %}
@ -156,3 +150,8 @@
{% endif %}
</div>
{% endblock %}
{% block js %}
<script src="{% static 'ietf/js/d3.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}

View file

@ -4,12 +4,6 @@
{% load static %}
{% load ietf_filters %}
{% block pagehead %}
<script src="{% static 'd3/d3.min.js' %}"></script>
<script src="{% static 'jquery/jquery.min.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}
{% block title %}{{ doc.title }}{% endblock %}
{% block content %}
@ -159,3 +153,8 @@
{% endif %}
{% endblock %}
{% block js %}
<script src="{% static 'ietf/js/d3.js' %}"></script>
<script src="{% static 'ietf/js/document_timeline.js' %}"></script>
{% endblock %}

View file

@ -83,7 +83,6 @@
{% comment %}{% block js %}
{% if can_manage_materials %}
<script type="text/javascript" src="{% static 'jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js-cookie/src/js.cookie.js' %}"></script>
<script type="text/javascript" src={% static 'Sortable/Sortable.min.js' %}></script>

11
package-lock.json generated
View file

@ -7,6 +7,7 @@
"dependencies": {
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"d3": "^3.5.17",
"datatables.net": "^1.11.3",
"datatables.net-bs5": "^1.11.3",
"font-awesome": "^4.7.0",
@ -3047,6 +3048,11 @@
"cssom": "0.3.x"
}
},
"node_modules/d3": {
"version": "3.5.17",
"resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
"integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
},
"node_modules/dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@ -10462,6 +10468,11 @@
"cssom": "0.3.x"
}
},
"d3": {
"version": "3.5.17",
"resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz",
"integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g="
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",

View file

@ -2,6 +2,7 @@
"dependencies": {
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"d3": "^3.5.17",
"datatables.net": "^1.11.3",
"datatables.net-bs5": "^1.11.3",
"font-awesome": "^4.7.0",
@ -15,6 +16,8 @@
"source": [
"ietf/static/js/ietf.js",
"ietf/static/js/datatables.js",
"ietf/static/js/document_timeline.js",
"ietf/static/js/d3.js",
"ietf/static/css/ietf.scss",
"ietf/static/css/datatables.scss",
"ietf/static/images/ietflogo-small-transparent.png",