fix: updated roadmap svg
fixed rerender when closing the roadmap explanation
This commit is contained in:
parent
5b332df96b
commit
3d41fbfea0
|
@ -21,7 +21,7 @@ type RoadmapCanvasProps = {
|
|||
canScaleMore: boolean;
|
||||
showExplanation: boolean;
|
||||
setShowExplanation: any;
|
||||
isMobileDisplay: boolean;
|
||||
isMobile: boolean;
|
||||
};
|
||||
|
||||
const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
|
||||
|
@ -30,7 +30,7 @@ const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
|
|||
canScaleMore,
|
||||
showExplanation,
|
||||
setShowExplanation,
|
||||
isMobileDisplay,
|
||||
isMobile,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
|
@ -38,13 +38,13 @@ const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
|
|||
className={classNames(
|
||||
'relative',
|
||||
loaded ? 'visibility' : 'invisible',
|
||||
isMobileDisplay && 'bg-tertiary',
|
||||
isMobile && showExplanation && 'bg-tertiary',
|
||||
)}
|
||||
style={{
|
||||
height: loaded ? `calc(100vh - ${UI.HEADER_HEIGHT_PX}px)` : '0vh',
|
||||
}}
|
||||
>
|
||||
{!isMobileDisplay && (
|
||||
{!(isMobile && showExplanation) && (
|
||||
<canvas
|
||||
id={'#roadmap-image'}
|
||||
aria-label={"Oxen's roadmap for the future shown as a progress tree"}
|
||||
|
@ -62,8 +62,8 @@ const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
|
|||
'tablet:absolute tablet:block tablet:left-6 tablet:bottom-6',
|
||||
)}
|
||||
style={{
|
||||
height: isMobileDisplay ? '100%' : 304.8,
|
||||
width: isMobileDisplay ? '100%' : 313.6,
|
||||
height: isMobile && showExplanation ? '100%' : 304.8,
|
||||
width: isMobile && showExplanation ? '100%' : 313.6,
|
||||
}}
|
||||
onClick={() => {
|
||||
setShowExplanation(false);
|
||||
|
@ -73,11 +73,24 @@ const RoadmapCanvas = (props: RoadmapCanvasProps): ReactElement => {
|
|||
<img
|
||||
src={'/svgs/roadmap-explanation.svg'}
|
||||
alt="Oxen Roadmap Explanation"
|
||||
height={isMobileDisplay ? '100%' : 762 / 2.5}
|
||||
width={isMobileDisplay ? '100%' : 784 / 2.5}
|
||||
height={isMobile && showExplanation ? '100%' : 762 / 2.5}
|
||||
width={isMobile && showExplanation ? '100%' : 784 / 2.5}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{loaded && !(isMobile && showExplanation) && (
|
||||
<>
|
||||
<div className={classNames('z-10 absolute right-6 bottom-6')}>
|
||||
{/* eslint-disable @next/next/no-img-element */}
|
||||
<img
|
||||
src={'/svgs/roadmap-key.svg'}
|
||||
alt="Oxen Roadmap Legend"
|
||||
height={isMobile ? 180 : 242}
|
||||
width={isMobile ? 150 : 200}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -119,7 +132,11 @@ export default function Roadmap() {
|
|||
useEffect(() => {
|
||||
startup();
|
||||
|
||||
if (loaded && !(isMobile && showExplanation)) {
|
||||
if (loaded) {
|
||||
if (isMobile && showExplanation || (!isMobile && !showExplanation)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const roadmapEl = document.getElementById('#roadmap-image');
|
||||
pz = panzoom(roadmapEl, {
|
||||
initialZoom: isMobile
|
||||
|
@ -206,21 +223,8 @@ export default function Roadmap() {
|
|||
canScaleMore={!isMobile && !isTablet}
|
||||
showExplanation={showExplanation}
|
||||
setShowExplanation={setShowExplanation}
|
||||
isMobileDisplay={isMobile && showExplanation}
|
||||
isMobile={isMobile}
|
||||
/>
|
||||
{!(isMobile && showExplanation) && loaded && (
|
||||
<>
|
||||
<div className={classNames('z-10 absolute right-6 bottom-6')}>
|
||||
{/* eslint-disable @next/next/no-img-element */}
|
||||
<img
|
||||
src={'/svgs/roadmap-key.svg'}
|
||||
alt="Oxen Roadmap Legend"
|
||||
height={isMobile ? 180 : 242}
|
||||
width={isMobile ? 150 : 200}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 1.7 MiB After Width: | Height: | Size: 1.7 MiB |
Loading…
Reference in New Issue