LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(2141): explorer footer should be at the bottom of the page (#2143)

Browse Source 
* feat(2141): Explorer footer should be at the bottom of the page
This commit is contained in:
Sam Keen 2022-11-17 14:49:28 +00:00 committed by GitHub
parent 2375b14781
commit e2f5645a90
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/explorer/src/app/app.tsx
View File

@ -1,3 +1,4 @@
import classnames from 'classnames';
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import * as Sentry from '@sentry/react'; import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing'; import { BrowserTracing } from '@sentry/tracing';
@ -44,28 +45,33 @@ function App() {
}, },
}; };
const layoutClasses = classnames(
'grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)_auto] md:grid-cols-[300px_1fr]',
'min-h-[100vh] mx-auto my-0',
'border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r',
'bg-white dark:bg-black',
'antialiased text-black dark:text-white',
{
'h-[100vh] min-h-auto overflow-hidden': menuOpen,
}
);
return ( return (
<ThemeContext.Provider value={theme}> <ThemeContext.Provider value={theme}>
<TendermintWebsocketProvider> <TendermintWebsocketProvider>
<NetworkLoader cache={cacheConfig}> <NetworkLoader cache={cacheConfig}>
<div <div className={layoutClasses}>
className={`${ <Header
menuOpen && 'h-[100vh] overflow-hidden' theme={theme}
} antialiased m-0 bg-white dark:bg-black text-black dark:text-white`} toggleTheme={toggleTheme}
> menuOpen={menuOpen}
<div className="grid grid-rows-[repeat(2,_auto)_1fr] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)] md:grid-cols-[300px_1fr] border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r mx-auto"> setMenuOpen={setMenuOpen}
<Header />
theme={theme} <Nav menuOpen={menuOpen} />
toggleTheme={toggleTheme} <Main />
menuOpen={menuOpen} <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-sm md:text-md md:flex md:col-span-2 p-4 gap-4 border-t border-neutral-700 dark:border-neutral-300">
setMenuOpen={setMenuOpen} <NetworkInfo />
/> </footer>
<Nav menuOpen={menuOpen} />
<Main />
<footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-sm md:text-md md:flex md:col-span-2 p-4 gap-4 border-t border-neutral-700 dark:border-neutral-300">
<NetworkInfo />
</footer>
</div>
</div> </div>
</NetworkLoader> </NetworkLoader>
</TendermintWebsocketProvider> </TendermintWebsocketProvider>

2
apps/explorer/src/app/components/main/index.tsx
View File

@ -2,7 +2,7 @@ import { AppRouter } from '../../routes';
export const Main = () => { export const Main = () => {
return ( return (
<main className="p-4 overflow-hidden"> <main className="p-4 overflow-scroll">
<AppRouter /> <AppRouter />
</main> </main>
); );