diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 36c8672..f2606fd 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -7,7 +7,7 @@ import Search from './Search.jsx'; import TagListPanel from './TagListPanel.jsx'; import ToolbarBottomActions from './ToolbarBottomActions.jsx'; import copy from '../js/data/copy.json'; -import { isNotNullNorUndefined } from '../js/utilities.js'; +import { isNotNullNorUndefined, trimAndEllipse } from '../js/utilities.js'; class Toolbar extends React.Component { @@ -66,7 +66,7 @@ class Toolbar extends React.Component {
) @@ -100,6 +100,7 @@ class Toolbar extends React.Component { return (
{ this.toggleTab(tabNum); }}> + timeline
{label}
); diff --git a/src/js/map/map.js b/src/js/map/map.js index 3ae5bed..ab0eeef 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -165,7 +165,7 @@ Stop and start the development process in terminal after you have added your tok .y(d => getCoords(d).y + transformY); g.selectAll('.narrative') - .attr('d', sequenceLine); + .attr('d', d => sequenceLine(d.steps)); } lMap.on("zoomend viewreset moveend", updateSVG); @@ -365,8 +365,8 @@ Stop and start the development process in terminal after you have added your tok } function renderNarratives() { - const narrativesDom = g.selectAll('.narrative') - .data(domain.narratives.map(d => d.steps)) + const narrativesDom = svg.selectAll('.narrative') + .data(domain.narratives) narrativesDom .exit() @@ -375,40 +375,45 @@ Stop and start the development process in terminal after you have added your tok narrativesDom .enter().append('path') .attr('class', 'narrative') - .attr('d', sequenceLine) + .attr('d', d => sequenceLine(d.steps)) .style('stroke-width', d => { - if (!d[0]) return 0; - // Note: [0] is a non-elegant way to get the narrative id out of the first - // event in the narrative sequence - const styleProps = getNarrativeStyle(d[0].narrative); + if (!d) return 0; + const styleProps = getNarrativeStyle(d.id); return styleProps.strokeWidth; }) .style('stroke-dasharray', d => { - if (!d[0]) return 'none'; - const styleProps = getNarrativeStyle(d[0].narrative); + if (!d) return 'none'; + const styleProps = getNarrativeStyle(d.id); return (styleProps.style === 'dotted') ? "2px 5px" : 'none'; }) .style('stroke', d => { - if (!d[0]) return 'none'; - const styleProps = getNarrativeStyle(d[0].narrative); + if (!d || app.narrative === null) return 'none'; + if (d.id !== app.narrative.id) return '#232323'; + const styleProps = getNarrativeStyle(d.id); return styleProps.stroke; }) .style('stroke-opacity', d => { if (app.narrative === null) return 0; - if (!d[0] || !d[0].narratives.find(n => n === app.narrative.id)) return 0.2; + if (!d || d.id !== app.narrative.id) return 0.2; return 1; }) - .style('fill', 'none'); + .style('fill', 'none') + .style('cursor', 'pointer') + .on('click', d => { + console.log(d) + }); narrativesDom + .attr('d', d => sequenceLine(d.steps)) .style('stroke', d => { - if (!d[0]) return 'none'; - const styleProps = getNarrativeStyle(d[0].narrative); + if (!d || app.narrative === null) return 'none'; + if (d.id !== app.narrative.id) return '#232323'; + const styleProps = getNarrativeStyle(d.id); return styleProps.stroke; }) .style('stroke-opacity', d => { if (app.narrative === null) return 0; - if (!d[0] || !d[0].narratives.find(n => n === app.narrative.id)) return 0.2; + if (!d || d.id !== app.narrative.id) return 0.2; return 1; }) } @@ -446,8 +451,8 @@ Stop and start the development process in terminal after you have added your tok */ function renderDomain () { renderSites(); - renderNarratives(); renderEvents(); + renderNarratives(); } function renderSelectedAndHighlight () { renderSelected(); diff --git a/src/js/utilities.js b/src/js/utilities.js index c51596c..e9692e2 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -44,6 +44,13 @@ export function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); } +export function trimAndEllipse(string, stringNum) { + if (string.length > stringNum) { + return string.substring(0, 120) + '...' + } + return string; +} + /** * Return a Date object given a datetime string of the format: "2016-09-10T07:00:00" * @param {string} datetime diff --git a/src/scss/map.scss b/src/scss/map.scss index fc4f2ea..421d44f 100644 --- a/src/scss/map.scss +++ b/src/scss/map.scss @@ -32,13 +32,17 @@ &.narrative-mode { left: 0; } - + .event { fill: $event_default; cursor: pointer; opacity: 0.45; } + .narrative { + cursor: pointer; + } + .link { stroke: $midgrey; fill: none; diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index b8e5e11..ace0435 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -29,6 +29,13 @@ NARRATIVE INFO font-weight: 100; } + h6 { + margin: 10px 0; + i { + font-size: $normal; + } + } + p { font-family: 'Lato', 'Helvetica', sans-serif; font-size: $normal; diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss index d6178f6..445c927 100644 --- a/src/scss/toolbar.scss +++ b/src/scss/toolbar.scss @@ -168,6 +168,7 @@ display: flex; align-items: center; justify-content: center; + flex-direction: column; height: 60px; width: 110px; padding: 5px 0 5px 0; @@ -454,7 +455,7 @@ height: 140px; line-height: 140px; width: 100%; - padding: 0; + padding: 10px; border: 1px solid $offwhite; background-size: 100%; color: $offwhite; @@ -470,6 +471,10 @@ transition: 0.2s ease; letter-spacing: 0.15em; } + + p { + text-transform: none; + } } /*&:first-child { @@ -515,10 +520,10 @@ height: 60px; padding: 0; - .tab-caption { + /*.tab-caption { transition: 0.2s ease; opacity: 0; - } + }*/ &:hover { .tab-caption {