Skip to content

Commit

Permalink
Responsive section 2 and fix tooltip style
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bluesmile82
Bluesmile82 committed Oct 23, 2024
1 parent f8898a5 commit 1a171a6
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 39 deletions.
5 changes: 3 additions & 2 deletions src/components/globe-map/controls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { useRef } from "react";
import { convertLatLonToGlobalPosition } from "@/lib/globe-utils";
import type { MarkerType } from "./marker";
import { Group } from "three";

import { useIsMobile } from "@/lib/hooks";
export const Controls = ({ marker, active = false, enabled = false, groupRef, resetSelectedMarker, setEnabled, globePhase }: {
marker: MarkerType | undefined
// Active is used to determine if the globe controls are in a phase that could be enabled even if is temporarily disabled
Expand All @@ -16,6 +16,7 @@ export const Controls = ({ marker, active = false, enabled = false, groupRef, re
resetSelectedMarker: () => void,
globePhase: number
}) => {
const isMobile = useIsMobile();
const cameraControlsRef = useRef<CameraControls>(null!);
const [resettingPosition, setResettingPosition] = useState(false);

Expand All @@ -36,7 +37,7 @@ export const Controls = ({ marker, active = false, enabled = false, groupRef, re
// Position tooltip in the marker
const [x, y, z] = convertLatLonToGlobalPosition(marker.lat, marker.lng, 2);

const PADDING_TO_CENTER_GLOBE = -0.17;
const PADDING_TO_CENTER_GLOBE = isMobile ? -0.08 : -0.17;
groupRef.current.rotation.y = PADDING_TO_CENTER_GLOBE;
cameraControlsRef.current.setPosition(x, y, z, true).then(() => {
setEnabled(false);
Expand Down
20 changes: 12 additions & 8 deletions src/components/globe-map/marker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,18 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
const { title, subtitle, description, video, legend } = popupContent[index];

return (
<div className="relative -mt-[140px] -ml-[140px] flex justify-center">
<div className='w-[662px] h-[350px] pl-8 pr-4 py-8 bg-white/20 backdrop-blur-[15px] text-white gap-6 inline-flex'>
<div className="relative -mt-[140px] -ml-[140px] lg:-ml-[140px] flex justify-center">
<div className='w-full lg:w-[662px] h-[350px] pl-8 pr-4 py-8 bg-white/20 backdrop-blur-[15px] text-white gap-6 inline-flex'>
<div className="gap-6 flex">
<div className="min-w-[286px] w-[286px] h-[286px] justify-center items-center flex">
<video className="w-[280px] h-[280px] rounded-[50px]" autoPlay loop muted>
<div className="min-w-[143px] w-[143px] h-[143px] lg:min-w-[286px] lg:w-[286px] lg:h-[286px] justify-center items-center flex">
<video className="w-[140px] h-[140px] lg:w-[280px] lg:h-[280px] lg:rounded-[50px]" autoPlay loop muted>
<source src={video} type="video/mp4" />
</video>
</div>
<div className="flex-col gap-4 flex">
<div className="flex-col justify-start items-start gap-2 inline-flex">
<div className='flex justify-between w-full'><div className="text-base leading-relaxed">{title}</div>
<div className='flex justify-between w-full'>
<div className="text-base leading-relaxed">{title}</div>
<div className="rounded-sm items-center gap-0.5 flex">
<button onClick={() => setSelectedMarker(index - 1 < 0 ? (popupContent.length - 1) : index - 1)}>
<div className='sr-only'>Previous marker</div>
Expand All @@ -38,7 +39,7 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
</button>
</div>
</div>
<div className="text-xl uppercase">{subtitle}</div>
<div className="text-xl uppercase max-w-[258px]">{subtitle}</div>
<div className="w-[258px] flex flex-col gap-1">
<div className="flex justify-between w-full gap-1">
<div className="text-[10px] leading-3">LOW ({legend.low})</div>
Expand All @@ -47,8 +48,11 @@ const Popup = ({ closePopup, setSelectedMarker, index }: {
<img src={legend.image} alt="Amazon legend" className="h-3" />
</div>
</div>
<div className="text-sm h-[160px] overflow-auto leading-tight">
{description}
<div className="text-sm h-[160px] overflow-auto leading-tight lg:w-[304px]">
<div className='max-w-[258px]'>

{description}
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/intro/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function Intro() {
}
}
return (
<section className="relative h-[110vh] bg-blue-900">
<section className="relative min-h-[600px] lg:h-[110vh] bg-blue-900">
<HeroVideo />
<Lines verticalClassName="left-8 w-[calc(100vh-16px)]" sectionName='intro' columns={[64, 254, 270, 430, 1074]} rows={[204, 444, 516, 559, 602]} />
<div className='container relative pt-[110px] lg:pt-[198px] space-y-[30px] pl-8 lg:pl-24'>
Expand Down
58 changes: 30 additions & 28 deletions src/components/section-2/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { cn } from "@/lib/utils";
import { useScroll, useTransform, motion, useMotionValueEvent, useInView } from "framer-motion";
import { useScreenWidthWithResize } from '@/lib/hooks';
import { scrollToSection } from "@/lib/utils";
import { useIsMobile } from '@/lib/hooks';
import InfoPopover from '../info-popover';

const ResizeButton = () => (
Expand Down Expand Up @@ -84,10 +85,11 @@ export default function Section2() {
return 0;
}, [descriptionRef.current, screenWidth]);

const isMobile = useIsMobile();

const titleX = useTransform(scrollYProgress, [0.2, 0.33], [0, -200]);
const titleY = useTransform(scrollYProgress, [0.2, 0.33], [0, -204]);
const descriptionY = useTransform(scrollYProgress, [0.2, 0.33, 0.6, 0.7], [500, -4, -4, -1000]);
const titleX = useTransform(scrollYProgress, [0.2, 0.33], [0, isMobile ? 0 : -200]);
const titleY = useTransform(scrollYProgress, [0.2, 0.33], [0, isMobile ? -280 : -204]);
const descriptionY = useTransform(scrollYProgress, [0.2, 0.33, 0.6, 0.7], [1000, isMobile ? -180 : -4, isMobile ? -180 : -4, -1000]);

const opacityLine = useTransform(scrollYProgress, [0.2, 0.33, 0.6, 0.7], [0, 1, 1, 0]);
const lineY = useTransform(scrollYProgress, [0.2, 0.33, 0.6, 0.7], [500, -40, -40, -1000]);
Expand Down Expand Up @@ -175,34 +177,34 @@ export default function Section2() {
animate={{ width: globePhase === 1 ? 0 : '100%' }}
transition={{ duration: 0.1, ease: 'linear' }}
>
<div className="text-light-green text-lg uppercase tracking-tight">UNLOCKING CLIMATE POTENTIAL</div>
<div className="text-light-green text-4xl max-w-[720px]">
<div className="text-light-green text-base lg:text-lg uppercase tracking-tight">UNLOCKING CLIMATE POTENTIAL</div>
<div className="text-light-green text-2xl lg:text-4xl max-w-[90vw] lg:max-w-[720px]">
High-quality information <br />from global to local scale
</div>
</motion.div>
<motion.div
className={cn("absolute text-light-green leading-relaxed w-[500px] flex flex-col gap-6 transition-opacity",
{
'hidden opacity-0': globePhase !== 1,
'opacity-100': globePhase === 1
}
)}
style={{ y: descriptionY, x: 710 }}
ref={descriptionRef}
>
<p>
At the <InfoPopover
variant="dark"
content={<>The resolution of a model refers to the size of each grid box. When increasing the resolution, the grid boxes become smaller, allowing for more detailed calculations and the model output to be more relevant to users (source: <a target="_blank" rel="noreferrer noopener" href="https://www.ecmwf.int/">ECMWF</a>)</>}>
resolutions</InfoPopover> that global climate models use today, a number of small-scale processes that are important for the simulation of extreme events and the evolution of the climate system, are not directly represented. Increasing the model resolution (i.e. reducing the size of grid cells used in climate models both horizontally and vertically) allows researchers to represent these processes more directly.
</p>
<p>
The climate adaptation digital twin provides high-quality information at scales that matter to society, based on better simulations performed with more realistic Earth-system models and a better integration of observations and simulations. This unprecedented level of detail, towards the km-scale, allows users to study localised impacts and devise more targeted solutions for climate adaptation and mitigation.
</p>
<p>
An evaluation of the simulations and a quantification of uncertainties is regularly done to ensure the quality and transparency of the information provided by the digital twin.
</p>
</motion.div>
</motion.div>
<motion.div
className={cn("absolute text-light-green leading-relaxed w-[70vw] lg:w-[500px] flex flex-col gap-2 lg:gap-6 transition-opacity",
{
'hidden opacity-0': globePhase !== 1,
'opacity-100': globePhase === 1
}
)}
style={{ y: descriptionY, x: isMobile ? 0 : 510 }}
ref={descriptionRef}
>
<p>
At the <InfoPopover
variant="dark"
content={<>The resolution of a model refers to the size of each grid box. When increasing the resolution, the grid boxes become smaller, allowing for more detailed calculations and the model output to be more relevant to users (source: <a target="_blank" rel="noreferrer noopener" href="https://www.ecmwf.int/">ECMWF</a>)</>}>
resolutions</InfoPopover> that global climate models use today, a number of small-scale processes that are important for the simulation of extreme events and the evolution of the climate system, are not directly represented. Increasing the model resolution (i.e. reducing the size of grid cells used in climate models both horizontally and vertically) allows researchers to represent these processes more directly.
</p>
<p>
The climate adaptation digital twin provides high-quality information at scales that matter to society, based on better simulations performed with more realistic Earth-system models and a better integration of observations and simulations. This unprecedented level of detail, towards the km-scale, allows users to study localised impacts and devise more targeted solutions for climate adaptation and mitigation.
</p>
<p>
An evaluation of the simulations and a quantification of uncertainties is regularly done to ensure the quality and transparency of the information provided by the digital twin.
</p>
</motion.div>
</div>
</motion.div>
Expand Down

0 comments on commit 1a171a6

Please sign in to comment.