chore: improve responsive

cubitouch · Mar 30, 2024 · 44adc7a · 44adc7a
1 parent d5a7801
commit 44adc7a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/src/components/slide.tsx b/src/components/slide.tsx
@@ -1,5 +1,6 @@
 import {
   Box,
+  Breakpoint,
   Container,
   Paper,
   Stack,
@@ -17,6 +18,7 @@ interface SlideProps {
   id?: string;
   hint?: React.ReactNode;
   first?: boolean;
+  maxWidth?: Breakpoint | false;
 }
 export const Slide = ({
   children,
@@ -27,9 +29,10 @@ export const Slide = ({
   id,
   hint,
   first,
+  maxWidth = false,
 }: SlideProps) => {
   const theme = useTheme();
-  
+
   const getSizings = (spacing: number) => ({
     paddingTop: first
       ? `calc(${NAVBAR_HEIGHT}px + ${theme.spacing(spacing)})`
@@ -78,7 +81,7 @@ export const Slide = ({
           : undefined,
       }}
     >
-      <Container maxWidth={false} sx={{ flex: 1, display: "flex" }}>
+      <Container maxWidth={maxWidth} sx={{ flex: 1, display: "flex" }}>
         <Stack spacing={hint ? 0 : 4} flex="1">
           {primary && (
             <Typography

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -1,6 +1,13 @@
 import GitHubIcon from "@mui/icons-material/GitHub";
 import LinkedInIcon from "@mui/icons-material/LinkedIn";
-import { Box, IconButton, Stack, Typography, useTheme } from "@mui/material";
+import {
+  Box,
+  IconButton,
+  Link,
+  Stack,
+  Typography,
+  useTheme,
+} from "@mui/material";
 import "chart.js/auto";
 import { useState } from "react";
 import { TypeAnimation } from "react-type-animation";
@@ -91,11 +98,11 @@ export const HomePage = () => {
           >
             <FancyLoader />
           </Box>
-          {/* <Typography variant="h4" align="center">
+          <Typography variant="h4" align="center">
             Check out{" "}
             <Link href="/paris-energy-performance-draft-analysis">this</Link>{" "}
             data analysis 🎉
-          </Typography> */}
+          </Typography>
           <Box display="flex" flexDirection="row" alignItems="center">
             <Typography variant="caption" flex="1">
               * Nothing is actually loading, I just wanted to build a fancy

diff --git a/src/pages/paris-energy-performance-draft-analysis.tsx b/src/pages/paris-energy-performance-draft-analysis.tsx
@@ -213,7 +213,7 @@ export const ParisEnergyPerformanceDraftAnalysis = () => {
           },
         ]}
       />
-      <Slide first light primary={"Energy Performance in Paris"}>
+      <Slide maxWidth="lg" first light primary={"Energy Performance in Paris"}>
         <Typography variant="h4">Problem</Typography>
         <Typography variant="body1">
           Where to search in Paris to find an energy efficient property to rent?
@@ -242,6 +242,7 @@ export const ParisEnergyPerformanceDraftAnalysis = () => {
         </Link>
       </Slide>
       <Slide
+        maxWidth="lg"
         dark
         primary={"How many Energy Performance reports since June 2021?"}
       >
@@ -256,7 +257,10 @@ export const ParisEnergyPerformanceDraftAnalysis = () => {
           2023 to September 2023? 🤔
         </Typography>
       </Slide>
-      <Slide primary={"Which postal codes have most A, B or C energy ratings?"}>
+      <Slide
+        maxWidth="lg"
+        primary={"Which postal codes have most A, B or C energy ratings?"}
+      >
         <ChartContainer>
           <Bar
             data={ratingsData}
@@ -275,7 +279,11 @@ export const ParisEnergyPerformanceDraftAnalysis = () => {
           ]}
         />
       </Slide>
-      <Slide dark primary={"How efficient are ground floor properties?"}>
+      <Slide
+        maxWidth="lg"
+        dark
+        primary={"How efficient are ground floor properties?"}
+      >
         <ChartContainer>
           <Bar
             data={emissionsData}
@@ -289,7 +297,10 @@ export const ParisEnergyPerformanceDraftAnalysis = () => {
           ]}
         />
       </Slide>
-      <Slide primary={"How efficient are ground floor properties?"}>
+      <Slide
+        maxWidth="lg"
+        primary={"How efficient are ground floor properties?"}
+      >
         <ChartContainer flex>
           <Heatmap data={ratingsPerEraData.data} />
         </ChartContainer>
@@ -300,7 +311,7 @@ export const ParisEnergyPerformanceDraftAnalysis = () => {
           ]}
         />
       </Slide>
-      <Slide primary={"Conclusions"}>
+      <Slide maxWidth="lg" primary={"Conclusions"}>
         <NotesList
           numbered
           list={[