diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 4c4e141..b8820c6 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -90,7 +90,7 @@ class Card extends React.Component { renderTimestamp () { let timelabel = this.makeTimelabel(this.props.event.timestamp) - let precision = this.props.event.time_display; + let precision = this.props.event.time_display if (precision === '_date_only') { precision = '' timelabel = timelabel.substring(0, 11) @@ -160,9 +160,12 @@ class Card extends React.Component { } render () { - const { isSelected } = this.props + const { isSelected, idx } = this.props return ( -
  • +
  • {this.renderMain()} {this.state.isOpen ? this.renderExtra() : null} {isSelected ? this.renderCaret() : null} diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 19d5637..10e1485 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -14,7 +14,7 @@ import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' -import { parseDate, injectSource } from '../js/utilities' +import { parseDate } from '../js/utilities' class Dashboard extends React.Component { constructor (props) { @@ -172,6 +172,5 @@ function mapDispatchToProps (dispatch) { export default connect( state => state, - // state => injectSource("Hromadske.tv - Paratroopers Video"), mapDispatchToProps )(Dashboard) diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index d5f2e73..2f489ea 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -232,7 +232,7 @@ class Timeline extends React.Component { // make sure the zoom doesn't go over them const minDate = parseDate(this.props.app.timeline.rangeLimits[0]) const maxDate = parseDate(this.props.app.timeline.rangeLimits[1]) - + newDomain0 = (newDomain0 < minDate) ? minDate : newDomain0 newDomainF = (newDomainF > maxDate) ? maxDate : newDomainF } diff --git a/src/components/presentational/Map/Events.jsx b/src/components/presentational/Map/Events.jsx index 715e4f0..e4ca77c 100644 --- a/src/components/presentational/Map/Events.jsx +++ b/src/components/presentational/Map/Events.jsx @@ -2,15 +2,13 @@ import React from 'react' import { Portal } from 'react-portal' function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, narrative, onSelect, svg, locations }) { - - function getCoordinatesForPercent(radius, percent) { - const x = radius * Math.cos(2 * Math.PI * percent); - const y = radius * Math.sin(2 * Math.PI * percent); - return [x, y]; + function getCoordinatesForPercent (radius, percent) { + const x = radius * Math.cos(2 * Math.PI * percent) + const y = radius * Math.sin(2 * Math.PI * percent) + return [x, y] } - function renderLocationSlicesByCategory(location) { - + function renderLocationSlicesByCategory (location) { const locCategory = location.events.length > 0 ? location.events[0].category : 'default' const customStyles = styleLocation ? styleLocation(location) : null const extraStyles = customStyles[0] @@ -25,7 +23,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, const colorSlices = location.events.map(e => getCategoryColor(e.category)) - let cumulativeAngleSweep = 0; + let cumulativeAngleSweep = 0 return ( @@ -34,22 +32,22 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, // Based on the number of events in each location, // create a slice per event filled with its category color - const [startX, startY] = getCoordinatesForPercent(r, cumulativeAngleSweep); - - cumulativeAngleSweep = (idx + 1) / colorSlices.length; - - const [endX, endY] = getCoordinatesForPercent(r, cumulativeAngleSweep); + const [startX, startY] = getCoordinatesForPercent(r, cumulativeAngleSweep) + + cumulativeAngleSweep = (idx + 1) / colorSlices.length + + const [endX, endY] = getCoordinatesForPercent(r, cumulativeAngleSweep) // if the slices are less than 2, take the long arc - const largeArcFlag = (colorSlices.length === 1) ? 1 : 0; + const largeArcFlag = (colorSlices.length === 1) ? 1 : 0 // create an array and join it just for code readability const arc = [ - `M ${startX} ${startY}`, // Move + `M ${startX} ${startY}`, // Move `A ${r} ${r} 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc - `L 0 0 `, // Line - `L ${startX} ${startY} Z`, // Line - ].join(' '); + `L 0 0 `, // Line + `L ${startX} ${startY} Z` // Line + ].join(' ') const extraStyles = ({ ...styles, @@ -65,9 +63,9 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, /> ) })} - + - ) + ) } function renderLocation (location) { @@ -79,8 +77,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, longitude: '32.2' } */ - const { x, y } = projectPoint([location.latitude, location.longitude]) - + const { x, y } = projectPoint([location.latitude, location.longitude]) // in narrative mode, only render events in narrative if (narrative) { @@ -100,7 +97,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, onSelect(location.events)} + onClick={() => onSelect(location.events)} > {renderLocationSlicesByCategory(location)} {extraRender ? extraRender() : null} diff --git a/src/components/presentational/Map/Narratives.jsx b/src/components/presentational/Map/Narratives.jsx index ed73495..e3957d7 100644 --- a/src/components/presentational/Map/Narratives.jsx +++ b/src/components/presentational/Map/Narratives.jsx @@ -1,7 +1,7 @@ import React from 'react' import { Portal } from 'react-portal' -import { concatStatic } from 'rxjs/operator/concat'; -import { single } from 'rxjs/operator/single'; +// import { concatStatic } from 'rxjs/operator/concat' +// import { single } from 'rxjs/operator/single' function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, projectPoint }) { function getNarrativeStyle (narrativeId) { @@ -66,22 +66,22 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, const theta = Math.atan2(p2.y - p1.y, p2.x - p1.x) // Angle of narrative step line const alpha = Math.atan2(1, 2) // Angle of arrow overture const edge = 10 // Arrow edge length - const offset = (distance < 24) ? distance / 2 : 24; + const offset = (distance < 24) ? distance / 2 : 24 // Arrow corners const coord0 = { x: p2.x - offset * Math.cos(theta), y: p2.y - offset * Math.sin(theta) - } + } const coord1 = { x: coord0.x - edge * Math.cos(-theta - alpha), y: coord0.y + edge * Math.sin(-theta - alpha) - } + } const coord2 = { x: coord0.x - edge * Math.cos(-theta + alpha), y: coord0.y + edge * Math.sin(-theta + alpha) - } - + } + return () + />) } function _renderNarrativeStep (p1, p2, styles) { @@ -102,25 +102,25 @@ function MapNarratives ({ styles, onSelectNarrative, svg, narrative, narratives, return ( - onSelectNarrative(n)} - style={{ - strokeWidth, - strokeDasharray, - strokeOpacity, - stroke - }} - /> - {(stroke !== 'none') - ? _renderNarrativeStepArrow(p1, p2, styles) - : '' - } + onSelectNarrative(n)} + style={{ + strokeWidth, + strokeDasharray, + strokeOpacity, + stroke + }} + /> + {(stroke !== 'none') + ? _renderNarrativeStepArrow(p1, p2, styles) + : '' + } ) } diff --git a/src/components/presentational/Map/SelectedEvents.jsx b/src/components/presentational/Map/SelectedEvents.jsx index f252686..f47b538 100644 --- a/src/components/presentational/Map/SelectedEvents.jsx +++ b/src/components/presentational/Map/SelectedEvents.jsx @@ -20,7 +20,7 @@ class MapSelectedEvents extends React.Component { stroke-linejoin='round' stroke-dasharray={styles ? styles['stroke-dasharray'] : '2,2'} fill='none' - d={`M0,0a${r},${r} 0 1,0 ${r*2},0 a${r},${r} 0 1,0 -${r*2},0 `} + d={`M0,0a${r},${r} 0 1,0 ${r * 2},0 a${r},${r} 0 1,0 -${r * 2},0 `} /> ) diff --git a/src/scss/card.scss b/src/scss/card.scss index a1b03de..a6484b5 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -5,13 +5,19 @@ border: 1px solid $black; // border-radius: 3px; transition: 0.2 ease; - background: $darkwhite; + background: $midwhite; color: $darkgrey; box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); font-size: $large; line-height: $xxlarge; height: auto; opacity: 0.9; + transition: background-color 0.4s; + + &:hover { + background: $lightwhite; + transition: background-color 0.4s; + } h4 { margin-bottom: 0; diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index adf5e8b..37b6c22 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -122,17 +122,17 @@ NARRATIVE INFO } .material-icons { - font-size: 60pt; + font-size: 40pt; color: $offwhite; transition: color 0.2s ease; &.disabled { - color: $darkgrey; + color: $midgrey; } &:hover { cursor: pointer; - color: $darkgrey; + color: $midwhite; } } }