From c5533920927f39740bc53501fcd8220c37833175 Mon Sep 17 00:00:00 2001
From: Jessie Keck <jkeck@stanford.edu>
Date: Wed, 20 Mar 2019 16:37:49 -0700
Subject: [PATCH] Update styling for Workspace Add / Manifest Form components
(#2271)
* Update .mirador-workspace-add styles.
* Add some jss styling to the WorkspaceAdd List
* Add some jss styling fo the WorkspaceAdd form
---
src/components/ManifestForm.js | 4 ++--
src/components/WorkspaceAdd.js | 14 ++++++++------
src/containers/ManifestForm.js | 6 ++++++
src/containers/WorkspaceAdd.js | 14 +++++++++++++-
src/styles/index.scss | 8 +++-----
5 files changed, 32 insertions(+), 14 deletions(-)
diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js
index 1d8757afc..c4c09f8eb 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 81adbf9ca..da05970f6 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 caa9571c4..8ec3a3ba5 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 98492f12e..8113688ee 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 0ac95a47f..dfb51ff56 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;
}
}
--
GitLab