diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js index 1d8757afc2b11a11a7a35dab4fb97fea2965a29b..c4c09f8eb28bd59603ed66f48a291f395116542d 100644 --- a/src/components/ManifestForm.js +++ b/src/components/ManifestForm.js @@ -70,7 +70,7 @@ export class ManifestForm extends Component { return ( <form onSubmit={this.formSubmit}> <Grid container spacing={24}> - <Grid item sm={9}> + <Grid item xs={12} sm={8} md={9}> <TextField fullWidth value={formValue} @@ -88,7 +88,7 @@ export class ManifestForm extends Component { }} /> </Grid> - <Grid item sm={3}> + <Grid item xs={12} sm={4} md={3} className={classes.buttons}> { onCancel && ( <Button onClick={this.handleCancel}> {t('cancel')} diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js index 81adbf9caf1ef58d3e57442e63f1b374c45cf259..da05970f60d9e0d106beb802c9490848aa2c82db 100644 --- a/src/components/WorkspaceAdd.js +++ b/src/components/WorkspaceAdd.js @@ -56,10 +56,12 @@ export class WorkspaceAdd extends React.Component { return ( <div className={ns('workspace-add')}> - <Typography variant="srOnly" component="h1">{t('miradorResources')}</Typography> - <List> - {manifestList} - </List> + <Paper className={classes.list}> + <Typography variant="srOnly" component="h1">{t('miradorResources')}</Typography> + <List> + {manifestList} + </List> + </Paper> <Fab variant="extended" @@ -76,10 +78,10 @@ export class WorkspaceAdd extends React.Component { className={classNames({ [classes.displayNone]: !addResourcesOpen, })} + classes={{ paper: classes.paper }} variant="persistent" anchor="bottom" open={addResourcesOpen} - PaperProps={{ style: { position: 'absolute', left: 100 } }} ModalProps={{ disablePortal: true, hideBackdrop: true, @@ -90,7 +92,7 @@ export class WorkspaceAdd extends React.Component { className={classes.form} > <AppBar position="absolute" color="secondary" onClick={() => (this.setAddResourcesVisibility(false))}> - <Toolbar> + <Toolbar variant="dense"> <MiradorMenuButton aria-label={t('closeAddResourceMenu')} className={classes.menuButton} diff --git a/src/containers/ManifestForm.js b/src/containers/ManifestForm.js index caa9571c4b1c7aff69c4df8c978dc3b3c86e2ac1..8ec3a3ba568a9f561048aea88daac22cce89e150 100644 --- a/src/containers/ManifestForm.js +++ b/src/containers/ManifestForm.js @@ -17,6 +17,12 @@ const mapDispatchToProps = { fetchManifest: actions.fetchManifest }; * @param theme */ const styles = theme => ({ + buttons: { + textAlign: 'right', + [theme.breakpoints.up('sm')]: { + textAlign: 'inherit', + }, + }, input: { ...theme.typography.body1, }, diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js index 98492f12e0b77b42166bd0f8567c9fb5951d74d9..8113688ee3cb26f2606755c2efddcc0b8108ce35 100644 --- a/src/containers/WorkspaceAdd.js +++ b/src/containers/WorkspaceAdd.js @@ -31,9 +31,11 @@ const mapDispatchToProps = { setWorkspaceAddVisibility: actions.setWorkspaceAddV const styles = theme => ({ form: { ...theme.mixins.gutters(), + left: '0', paddingTop: theme.spacing.unit * 2, paddingBottom: theme.spacing.unit * 2, - marginTop: 64, + right: '0', + marginTop: 48, }, fab: { position: 'absolute', @@ -43,6 +45,16 @@ const styles = theme => ({ displayNone: { display: 'none', }, + list: { + margin: '16px', + }, + paper: { + borderTop: '0', + left: '0', + [theme.breakpoints.up('sm')]: { + left: '65px', + }, + }, typographyBody: { flexGrow: 1, }, diff --git a/src/styles/index.scss b/src/styles/index.scss index 0ac95a47fa4829bb97590e5bab97de8eeee6ce9c..dfb51ff56cc48f9ec044afbc9ec0472fe2311e1e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -77,10 +77,8 @@ &-workspace-add { height: 100%; - overflow: auto; - padding-left: 6px; - padding-right: 6px; - padding-top: 92px; + overflow: hidden auto; + padding-top: 68px; } @media (min-width: 600px) { @@ -91,7 +89,7 @@ &-workspace-add { padding-left: 68px; - padding-top: 18px; + padding-top: 0; } }