Commit 73011f63 authored by Aron Fiechter's avatar Aron Fiechter
Browse files

Fix height on mobile

No scrolling should happen.
parent fdf3061a
...@@ -22,7 +22,7 @@ const App = () => { ...@@ -22,7 +22,7 @@ const App = () => {
if (isMobile) { if (isMobile) {
return ( return (
<div className="App vh-100 min-vh-100"> <div className="App">
<Mobile /> <Mobile />
</div> </div>
); );
......
...@@ -3,7 +3,9 @@ import logo from '../../logo.svg'; ...@@ -3,7 +3,9 @@ import logo from '../../logo.svg';
import Card from 'react-bootstrap/Card'; import Card from 'react-bootstrap/Card';
export default function About(props) { export default function About(props) {
const { message } = props; const { message, isMobile } = props;
const footerStyle = isMobile ? { position: 'fixed', bottom: 0, width: '100%' } : {};
return ( return (
<> <>
<Card.Img variant="top" src={logo} style={{ padding: '50px 70px' }} /> <Card.Img variant="top" src={logo} style={{ padding: '50px 70px' }} />
...@@ -11,8 +13,12 @@ export default function About(props) { ...@@ -11,8 +13,12 @@ export default function About(props) {
<Card.Title>Mímir // A Visual Browser for the Federal Archives</Card.Title> <Card.Title>Mímir // A Visual Browser for the Federal Archives</Card.Title>
<Card.Text>{message}</Card.Text> <Card.Text>{message}</Card.Text>
</Card.Body> </Card.Body>
<Card.Footer> <Card.Footer style={footerStyle}>
Developed with ❤️ at the{' '} Developed with{' '}
<span role="img" aria-label="heart">
❤️
</span>{' '}
at the{' '}
<a href="https://si.usi.ch/" target="_blank" rel="noopener noreferrer"> <a href="https://si.usi.ch/" target="_blank" rel="noopener noreferrer">
Software Institute Software Institute
</a> </a>
......
...@@ -18,7 +18,7 @@ export default function AboutModal(props) { ...@@ -18,7 +18,7 @@ export default function AboutModal(props) {
<Modal.Title>About Mímir</Modal.Title> <Modal.Title>About Mímir</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body className="p-sm-0"> <Modal.Body className="p-sm-0">
<About /> <About isMobile={false} />
</Modal.Body> </Modal.Body>
<Modal.Footer> <Modal.Footer>
<Button variant="secondary" onClick={handleClose}> <Button variant="secondary" onClick={handleClose}>
......
...@@ -4,8 +4,13 @@ import About from '../about/About'; ...@@ -4,8 +4,13 @@ import About from '../about/About';
export default function Mobile() { export default function Mobile() {
return ( return (
<Card className="vh-100 min-vh-100 border-0"> <Card className="border-bottom-0">
<About message={'Mímir is not yet optimized for mobile devices. Please come back using your desktop computer.'} /> <About
isMobile={true}
message={
'Mímir is not yet optimized for mobile devices. Please come back using your desktop computer.'
}
/>
</Card> </Card>
); );
} }
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