Refactored layout components and styling: removed unused imports, adjusted positioning and padding for consistency.

This commit is contained in:
geoffsee
2025-07-16 21:21:16 -04:00
committed by Geoff Seemueller
parent a7ad06093a
commit 0183503425
5 changed files with 26 additions and 27 deletions

View File

@@ -27,7 +27,7 @@ export const LandingComponent: React.FC = () => {
}, []); }, []);
return ( return (
<Box as="section" bg="background.primary" overflow="hidden" position="relative"> <Box as="section" bg="background.primary" overflow="hidden">
<Box position="fixed" right={0} maxWidth="300px" minWidth="200px" zIndex={1000}> <Box position="fixed" right={0} maxWidth="300px" minWidth="200px" zIndex={1000}>
<Tweakbox <Tweakbox
sliders={{ sliders={{

View File

@@ -37,7 +37,7 @@ const key =
function Map(props: { visible: boolean }) { function Map(props: { visible: boolean }) {
return ( return (
/* Full-screen wrapper — fills the viewport and becomes the positioning context */ /* Full-screen wrapper — fills the viewport and becomes the positioning context */
<Box w="100%" h="100vh" position="relative" overflow="hidden"> <Box position={'absolute'} top={0} w="100vw" h={'100vh'} overflow="hidden">
{/* Button bar — absolutely positioned inside the wrapper */} {/* Button bar — absolutely positioned inside the wrapper */}
<MapNext mapboxPublicKey={atob(key)} /> <MapNext mapboxPublicKey={atob(key)} />

View File

@@ -1,4 +1,4 @@
import { Box, Button, HStack, Input } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import { useCallback, useEffect, useMemo, useState } from 'react'; import { useCallback, useEffect, useMemo, useState } from 'react';
import Map, { import Map, {
FullscreenControl, FullscreenControl,
@@ -118,11 +118,10 @@ Type '{ city: string; population: string; image: string; state: string; latitude
right: 0, right: 0,
}} }}
> >
<GeolocateControl position="top-left" /> <GeolocateControl position="top-left" style={{ marginTop: '6rem' }} />
<FullscreenControl position="top-left" /> <FullscreenControl position="top-left" />
<NavigationControl position="top-left" /> <NavigationControl position="top-left" />
<ScaleControl position="top-left" /> <ScaleControl position="top-left" />
{pins} {pins}
{popupInfo && ( {popupInfo && (

View File

@@ -6,7 +6,7 @@ import { useIsMobile } from '../components/contexts/MobileContext';
function Content({ children }) { function Content({ children }) {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
return ( return (
<Flex flexDirection="column" w="100%" h="100vh" p={!isMobile ? 4 : 1}> <Flex flexDirection="column" w="100%" h="100vh">
{children} {children}
</Flex> </Flex>
); );

View File

@@ -1,4 +1,4 @@
import { Box, Grid, GridItem, Stack } from '@chakra-ui/react'; import { Box } from '@chakra-ui/react';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import Chat from '../../components/chat/Chat.tsx'; import Chat from '../../components/chat/Chat.tsx';
@@ -22,26 +22,26 @@ export default function IndexPage() {
const component = useComponent(); const component = useComponent();
return ( return (
<Grid templateColumns="1" height="100%" width="100%" gap={0}> <Box height="100%" width="100%">
<GridItem> <LandingComponent />
<LandingComponent />
<Box <Box
display={component.enabledComponent === 'ai' ? undefined : 'none'} display={component.enabledComponent === 'ai' ? undefined : 'none'}
width="100%" width="100%"
height="100%" height="100%"
overflowY="scroll" overflowY="scroll"
> padding={'unset'}
<Chat /> >
</Box> <Chat />
<Box </Box>
display={component.enabledComponent === 'gpsmap' ? undefined : 'none'} <Box
width="100%" display={component.enabledComponent === 'gpsmap' ? undefined : 'none'}
height="100%" width="100%"
> height="100%"
<ReactMap visible={component.enabledComponent === 'gpsmap'} /> padding={'unset'}
</Box> >
</GridItem> <ReactMap visible={component.enabledComponent === 'gpsmap'} />
</Grid> </Box>
</Box>
); );
} }