Merge pull request #952 from parlemonde/feat/responsive-map

feat(#val-498):world-map
parlemonde · Jun 25, 2024 · fe6dd56 · fe6dd56
2 parents c8ba061 + 2069dbf
commit fe6dd56
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/components/Base.tsx b/src/components/Base.tsx
@@ -30,7 +30,7 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader =
             <SubHeaders />
           </Box>
         )}
-        <Box sx={{ marginTop: showSubHeader ? '0' : '70px' }} className="app-content__card with-shadow">
+        <Box sx={{ marginTop: showSubHeader ? '0' : '70px', padding: { xs: '0.25rem', sm: '0.5rem' } }} className="app-content__card with-shadow">
           {children}
         </Box>
         {rightNav && (

diff --git a/src/components/WorldMap/WorldMap.tsx b/src/components/WorldMap/WorldMap.tsx
@@ -272,7 +272,10 @@ const WorldMap = () => {
             <>
               <Button
                 color="inherit"
-                sx={{
+                sx={(theme) => ({
+                  [theme.breakpoints.only('xs')]: {
+                    display: 'none',
+                  },
                   color: (theme) => theme.palette.text.primary,
                   border: '1px solid #c5c5c5',
                   padding: '5px',
@@ -281,7 +284,7 @@ const WorldMap = () => {
                   '&:hover': {
                     backgroundColor: '#f5f5f5',
                   },
-                }}
+                })}
                 onClick={() => {
                   world.onZoom(-20);
                 }}
@@ -290,16 +293,20 @@ const WorldMap = () => {
               </Button>
               <Button
                 color="inherit"
-                sx={{
+                sx={(theme) => ({
+                  [theme.breakpoints.only('xs')]: {
+                    display: 'none',
+                  },
                   color: (theme) => theme.palette.text.primary,
                   border: '1px solid #c5c5c5',
+                  borderRadius: '0',
                   padding: '5px',
                   minWidth: 0,
                   backgroundColor: 'white',
                   '&:hover': {
                     backgroundColor: '#f5f5f5',
                   },
-                }}
+                })}
                 onClick={() => {
                   world.onZoom(20);
                 }}

diff --git a/src/components/WorldMap/use-full-screen.tsx b/src/components/WorldMap/use-full-screen.tsx
@@ -29,7 +29,10 @@ export const useFullScreen = () => {
       <Button
         color="inherit"
         variant="outlined"
-        sx={{
+        sx={(theme) => ({
+          [theme.breakpoints.only('xs')]: {
+            borderRadius: '12px !important',
+          },
           color: (theme) => theme.palette.text.primary,
           border: '1px solid #c5c5c5',
           marginTop: '0.5rem',
@@ -39,7 +42,7 @@ export const useFullScreen = () => {
           '&:hover': {
             backgroundColor: '#f5f5f5',
           },
-        }}
+        })}
         onClick={toggleFullScreen}
       >
         {isFullScreen ? <FullscreenExitIcon /> : <FullscreenIcon />}