Commit 536dc143 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Set height of entire application to 100vh, make info card text scroll

parent d82bf7aa
Pipeline #891 canceled with stage
......@@ -7,7 +7,7 @@ import NoResultsModal from './components/queryResult/NoResultsModal';
const App = () => {
return (
<div className="App">
<div className="App vh-100 min-vh-100">
<CNavbar />
<Main />
<SearchModal />
......
......@@ -22,9 +22,17 @@ export default function Main() {
}),
}}
>
<QueryResult />
<Voronoi width={800} height={800} padding={5} />
<YearRange />
<div className="vh-100 min-vh-100" style={{ paddingTop: '61px' }}>
<div style={{ maxHeight: '4%' }}>
<QueryResult />
</div>
<div style={{ maxHeight: '66%' }}>
<Voronoi width={800} height={800} padding={5} />
</div>
<div style={{ height: '30%' }}>
<YearRange />
</div>
</div>
</LoadingOverlay>
);
}
......@@ -7,15 +7,15 @@ import Query from './Query';
export default function CNavbar(props) {
return (
<Navbar bg='light' expand='lg'>
<Navbar fixed="top" bg="light" expand="lg">
<Container>
<Navbar.Brand href='#home'>
<img alt='' src={logo} width='35' height='35' className='d-inline-block align-bottom' />{' '}
<Navbar.Brand href="#home">
<img alt="" src={logo} width="35" height="35" className="d-inline-block align-bottom" />{' '}
&nbsp; Mímir // A Visual Browser for the Federal Archives
</Navbar.Brand>
<Navbar.Toggle aria-controls='basic-navbar-nav' />
<Navbar.Collapse id='basic-navbar-nav'>
<Nav className='mr-auto'>{/*<Nav.Link href="#home">Home</Nav.Link>*/}</Nav>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">{/*<Nav.Link href="#home">Home</Nav.Link>*/}</Nav>
<Query />
</Navbar.Collapse>
</Container>
......
......@@ -8,7 +8,7 @@ export default function QueryResult() {
const displayText = <h5 className="card-title text-sm-right">{nResults} results</h5>;
return (
<div className="mt-sm-2 mb-sm-1">
<div className="pt-sm-2 pb-sm-1">
<Container>{displayText}</Container>
</div>
);
......
......@@ -13,21 +13,25 @@ export default function Info(props) {
const dispatch = useDispatch();
const hasImage = node.hasImage;
return (
<Card style={{ width: '100%' }}>
{node.hasImage && (
{hasImage && (
<Card.Img
variant="top"
src={`data:image/jpeg;base64,${node.customFields.bildAnsicht.value}`}
/>
)}
<Card.Header as={'h5'}>{node.title}</Card.Header>
<Card.Body>
<Card.Body style={{ maxHeight: hasImage ? '120px' : '450px', overflowX: 'scroll' }}>
<Card.Subtitle className="mb-3 text-muted">
{node.referenceCode} ({node.level})
</Card.Subtitle>
<Card.Subtitle className="mb-2 text-muted">{node.creationPeriod.text}</Card.Subtitle>
{node.withinInfo && <ReadMore text={node.withinInfo} />}
{node.withinInfo?.split('\n').map((p) => (
<Card.Text>{p}</Card.Text>
))}
</Card.Body>
<ListGroup variant="flush">
{node.customFields.digitaleVersion &&
......
......@@ -115,12 +115,8 @@ export default function YearRange() {
};
return (
<Container id="timeline">
<ReactEcharts
ref={chartRef}
option={options}
style={{ height: '200px', width: '100%', marginTop: '-50px' }}
/>
<Container id="timeline" className="h-100 pb-sm-5">
<ReactEcharts ref={chartRef} option={options} style={{ height: '100%', width: '100%' }} />
</Container>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment