add Splitpane with map

This commit is contained in:
Winzlieb - 2022-03-14 13:33:33 +01:00
parent de8b222a2e
commit 97236fdd59
2 changed files with 7 additions and 2 deletions

View File

@ -21,7 +21,7 @@ const HostOfferLookupWrapper = ({}: HostLookupWrapperProps) => {
display: 'flex', display: 'flex',
alignItems: 'stretch', alignItems: 'stretch',
flexDirection: 'column', flexDirection: 'column',
height: '100vh'}}> height: '100%'}}>
<div> <div>
{ (queryResult_ro.isFetching || queryResult_rw.isFetching) && t('loading…') } { (queryResult_ro.isFetching || queryResult_rw.isFetching) && t('loading…') }
{ (queryResult_ro.error || queryResult_rw.error) && t('An error occurred while trying to get data from the backend.') } { (queryResult_ro.error || queryResult_rw.error) && t('An error occurred while trying to get data from the backend.') }

View File

@ -3,6 +3,8 @@ import Head from 'next/head'
import HostOfferLookupWrapper from '../components/ngo/HostOfferLookupWrapper' import HostOfferLookupWrapper from '../components/ngo/HostOfferLookupWrapper'
import styles from '../styles/Home.module.css' import styles from '../styles/Home.module.css'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import {SplitPane} from "react-collapse-pane";
import {LeafletMapWithoutSSR} from "../components/ngo/LeafletMapWithoutSSR";
const Home: NextPage = () => { const Home: NextPage = () => {
const { t } = useTranslation() const { t } = useTranslation()
@ -15,7 +17,10 @@ const Home: NextPage = () => {
</Head> </Head>
<main className={styles.main}> <main className={styles.main}>
<HostOfferLookupWrapper /> <SplitPane split={"horizontal"}>
<LeafletMapWithoutSSR />
<HostOfferLookupWrapper />
</SplitPane>
</main> </main>
</div> </div>