bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-07-05 08:28:41 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(main): style changes and mobile version (#58)

Browse Source 
Co-authored-by: msramalho <19508417+msramalho@users.noreply.github.com>
This commit is contained in:
Andrew Mudrov
2022-10-31 21:40:35 +04:00
committed by GitHub
parent 64d6b34469
commit 53d6f389e3
37 changed files with 966 additions and 584 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/time/atoms/Clip.js
View File

@@ -5,7 +5,7 @@ const TimelineClip = ({ dims }) => (
<rect
x={dims.marginLeft}
y="0"
width={Math.max(0, dims.width - dims.marginLeft - dims.width_controls)}
width={Math.max(0, dims.width - dims.marginLeft * 2)}
height={dims.contentHeight}
/>
</clipPath>

2
src/components/time/atoms/Events.js
View File

@@ -26,7 +26,7 @@ function renderDot(event, styles, props) {
key={event.id}
className="timeline-event"
onClick={props.onSelect}
transform={`translate(${props.x}, ${props.y})`}
transform={`translate(${props.x}, ${props.y + 40})`}
>
<ColoredMarkers
radius={props.eventRadius}

43
src/components/time/atoms/Handles.js
View File

@@ -1,34 +1,21 @@
import React from "react";
const TimelineHandles = ({ dims, onMoveTime }) => {
const transform = "scale(1.5,1.5)";
const size = 45;
const handleOffset = dims.contentHeight / 2;
const TimelineHandles = ({ dims, onMoveTime, backward }) => {
if (backward === true) {
return (
<div className="timeline-handle" onClick={() => onMoveTime("backwards")}>
<span className="timeline-handle__triangle"></span>
</div>
);
}
return (
<g className="time-controls-inline">
<g
transform={`translate(${dims.marginLeft - 20}, ${handleOffset})`}
onClick={() => onMoveTime("backwards")}
>
<circle r={size} />
<path
d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
transform={`rotate(270) ${transform}`}
/>
</g>
<g
transform={`translate(${
dims.width - dims.width_controls + 20
}, ${handleOffset})`}
onClick={() => onMoveTime("forward")}
>
<circle r={size} />
<path
d="M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z"
transform={`rotate(90) ${transform}`}
/>
</g>
</g>
<div
className="timeline-handle right"
onClick={() => onMoveTime("forward")}
>
<span className="timeline-handle__triangle"></span>
</div>
);
};

2
src/components/time/atoms/Header.js
View File

@@ -12,7 +12,7 @@ const TimelineHeader = ({ title, from, to, onClick, hideInfo }) => {
</p>
</div>
<div className={`timeline-info ${hideInfo ? "hidden" : ""}`}>
<p>{title}</p>
<p dangerouslySetInnerHTML={{ __html: title }} />
<p>
{d0} - {d1}
</p>

2
src/components/time/atoms/Markers.js
View File

@@ -33,7 +33,7 @@ const TimelineMarkers = ({
strokeLinejoin="round"
strokeDasharray={styles ? styles["stroke-dasharray"] : "2,2"}
style={{
transform: `translate(${getEventX(event)}px, ${y}px)`,
transform: `translate(${getEventX(event)}px, ${y + 40}px)`,
WebkitTransition: `transform ${transitionDuration / 1000}s ease`,
MozTransition: "none",
opacity: 1,

8
src/components/time/atoms/ZoomControls.js
View File

@@ -23,7 +23,7 @@ const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
);
const isActive = zoomIsActive(zoom.duration, extent, max.duration);
return (
<text
<div
className={`zoom-level-button ${isActive ? "active" : ""}`}
x="60"
y={idx * 15 + 20}
@@ -31,7 +31,7 @@ const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
key={idx}
>
{zoom.label}
</text>
</div>
);
}
@@ -39,9 +39,9 @@ const TimelineZoomControls = ({ extent, zoomLevels, dims, onApplyZoom }) => {
zoomLevels = DEFAULT_ZOOM_LEVELS;
}
return (
<g transform={`translate(${dims.width - dims.width_controls}, 0)`}>
<div className="zoom-controls">
{zoomLevels.map((z, idx) => renderZoom(z, idx))}
</g>
</div>
);
};