Fix mobile videos height and fit chart in screen

Vizzuality · Nov 18, 2024 · b5d8bdd · b5d8bdd
1 parent f90736f
commit b5d8bdd
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 19 deletions.
diff --git a/src/components/energy/section-1/index.tsx b/src/components/energy/section-1/index.tsx
@@ -25,17 +25,17 @@ export default function Section1() {
   const gridColumns = isMobile
     ? "flex flex-col"
     : {
-      "grid transition-all duration-500": true,
-      "grid-cols-[1.3fr_0.9fr_0.9fr_0.9fr]": hoveredIndex === 0,
-      "grid-cols-[0.9fr_1.3fr_0.9fr_0.9fr]": hoveredIndex === 1,
-      "grid-cols-[0.9fr_0.9fr_1.3fr_0.9fr]": hoveredIndex === 2,
-      "grid-cols-[0.9fr_0.9fr_0.9fr_1.3fr]": hoveredIndex === 3,
-      "grid-cols-[1fr_1fr_1fr_1fr]": hoveredIndex === null,
-    };
+        "grid transition-all duration-500": true,
+        "grid-cols-[1.3fr_0.9fr_0.9fr_0.9fr]": hoveredIndex === 0,
+        "grid-cols-[0.9fr_1.3fr_0.9fr_0.9fr]": hoveredIndex === 1,
+        "grid-cols-[0.9fr_0.9fr_1.3fr_0.9fr]": hoveredIndex === 2,
+        "grid-cols-[0.9fr_0.9fr_0.9fr_1.3fr]": hoveredIndex === 3,
+        "grid-cols-[1fr_1fr_1fr_1fr]": hoveredIndex === null,
+      };
 
   return (
     <section className="relative scroll-mt-8 bg-white" id="section-1">
-      <div className="relative z-10 flex h-[348px] items-center justify-center overflow-hidden xl:h-[548px]">
+      <div className="relative z-10 flex h-[255px] items-center justify-center overflow-hidden max-xl:mb-6 xl:h-[548px]">
         <VideoPlayer
           src="videos/stream-videos/energy-intro-bg/index.m3u8"
           className="absolute z-0 w-screen object-fill"

diff --git a/src/components/energy/section-4/index.tsx b/src/components/energy/section-4/index.tsx
@@ -1,12 +1,18 @@
 "use client";
 
 import { useRef, useState } from "react";
+
+import Image from "next/image";
+
 import { AnimatePresence, motion, Variants } from "framer-motion";
+
+import { useIsMobile } from "@/lib/hooks";
+
 import ScrollStep from "@/components/scroll-step";
-import Image from "next/image";
-import Chart from "@/svgs/chart.svg";
 import VideoPlayer from "@/components/video-player";
 
+import Chart from "@/svgs/chart.svg";
+
 export interface DebugOffsetProps {
   offset: number;
 }
@@ -26,11 +32,11 @@ const transition = { duration: 0.5, ease: "linear" };
 export default function Section4() {
   const scrollSectionRef = useRef<HTMLDivElement>(null);
   const [step, setStep] = useState("step1");
-
+  const isMobile = useIsMobile();
   const variantsDescription: Record<string, Variants> = {
     "step-2": {
       initial: { top: "100%", opacity: 0 },
-      animate: { top: "30%", opacity: 1, transition },
+      animate: { top: isMobile ? "10%" : "30%", opacity: 1, transition },
       exit: { top: 0, opacity: 0 },
     },
     "step-3": {
@@ -57,12 +63,12 @@ export default function Section4() {
 
   const renderChart = (
     <div className="relative">
-      <Chart className="max-w-[100%] xl:max-h-[253px]" />
+      <Chart className="max-h-[200px] max-w-[100%] xl:max-h-[253px]" />
       <motion.svg
         width="492"
         height="253"
         viewBox="0 0 492 253"
-        className="absolute left-0 top-0 max-w-[100%] xl:max-h-[253px]"
+        className="absolute left-0 top-0 max-h-[200px] max-w-[100%] xl:max-h-[253px]"
         xmlns="http://www.w3.org/2000/svg"
       >
         <motion.path
@@ -145,12 +151,12 @@ export default function Section4() {
                     key="section-4-description-3"
                   >
                     <motion.div
-                      className="h-fit w-full max-w-[80vw] bg-white/30 p-6 text-base backdrop-blur-lg xl:min-w-[498px] xl:max-w-[498px]"
+                      className="h-fit max-h-screen w-full max-w-[80vw] bg-white/30 p-6 text-base backdrop-blur-lg xl:min-w-[498px] xl:max-w-[498px]"
                       initial={{ opacity: 0, top: "200px" }}
                       animate={{ opacity: 1, top: 0, transition }}
                       exit={{ opacity: 0, top: "-200px" }}
                     >
-                      <div className="xl:pb-10">
+                      <div className="text-xs xl:pb-10 xl:text-base">
                         According to observations, it can be seen that during the first week of
                         August 2018, temperatures reached 40°C in the southwestern part of the
                         Iberian Peninsula due to a warm air intrusion that moved up from Africa. Two
@@ -161,7 +167,7 @@ export default function Section4() {
                         be mitigated by the use of air conditioning, but this caused a 10% rise in
                         Iberian energy consumption and blackouts in Lisbon suburbs.
                       </div>
-                      <div className="block">{renderChart}</div>
+                      <div className="block max-xl:max-h-[250px]">{renderChart}</div>
                       <div className="flex items-end justify-between gap-4">
                         <div className="max-w-[258px]">{legend}</div>
                         <div className="text-xs">Source: Destination Earth</div>

diff --git a/src/components/energy/section-7/index.tsx b/src/components/energy/section-7/index.tsx
@@ -75,7 +75,7 @@ export default function Section7() {
   const [openedKnowMore, setOpenedKnowMore] = useState(false);
   return (
     <section className="relative scroll-mt-8 bg-blue-950 text-white" id="section-7">
-      <div className="relative z-10 flex h-[348px] items-center justify-center overflow-hidden xl:h-[548px]">
+      <div className="relative z-10 flex h-[255px] items-center justify-center overflow-hidden max-xl:mb-6 xl:h-[548px]">
         <VideoPlayer
           src="/videos/stream-videos/section-4/index.m3u8"
           className="absolute z-0 w-screen object-fill"

diff --git a/src/components/home/section-4/index.tsx b/src/components/home/section-4/index.tsx
@@ -69,7 +69,7 @@ export default function Section4() {
 
   return (
     <section className="relative scroll-mt-8 bg-blue-950 text-white" id="section-4">
-      <div className="relative z-10 flex h-[348px] items-center justify-center overflow-hidden xl:h-[548px]">
+      <div className="relative z-10 flex h-[255px] items-center justify-center overflow-hidden max-xl:mb-6       xl:h-[548px]">
         <VideoPlayer
           src="/videos/stream-videos/section-4/index.m3u8"
           className="absolute z-0 w-screen object-fill"