improve mobile display

mui · Nov 21, 2019 · 345dfc1 · 345dfc1
1 parent 1318772
commit 345dfc1
Show file tree

Hide file tree

Showing 18 changed files with 122 additions and 126 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -54,13 +54,16 @@ const styles = theme => ({
     position: 'relative',
     outline: 0,
     margin: 'auto',
-    borderRadius: theme.shape.borderRadius,
     display: 'flex',
     justifyContent: 'center',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
     border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
-    padding: theme.spacing(2),
+    padding: theme.spacing(3),
     [theme.breakpoints.up('sm')]: {
-      padding: theme.spacing(3),
+      borderRadius: theme.shape.borderRadius,
+      borderLeftWidth: 1,
+      borderRightWidth: 1,
     },
   },
   demoBg: {

diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -8,7 +8,6 @@ import FormLabel from '@material-ui/core/FormLabel';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
-import Paper from '@material-ui/core/Paper';
 import Avatar from '@material-ui/core/Avatar';
 import Chip from '@material-ui/core/Chip';
 import FaceIcon from '@material-ui/icons/Face';
@@ -18,12 +17,8 @@ const styles = theme => ({
   root: {
     flexGrow: 1,
   },
-  control: {
-    padding: theme.spacing(2),
-  },
   chipWrapper: {
-    height: theme.spacing(8),
-    marginBottom: theme.spacing(4),
+    height: theme.spacing(10),
   },
 });
 
@@ -111,7 +106,7 @@ function ChipsPlayground(props) {
   return (
     <Grid container className={classes.root}>
       <Grid item xs={12}>
-        <Grid container justify="center" alignItems="center" spacing={5}>
+        <Grid container justify="center" alignItems="center">
           <Grid item className={classes.chipWrapper}>
             <Chip
               label="Chip Component"
@@ -127,103 +122,101 @@ function ChipsPlayground(props) {
         </Grid>
       </Grid>
       <Grid item xs={12}>
-        <Paper className={classes.control}>
-          <Grid container spacing={3}>
-            <Grid item xs={12}>
-              <FormControl component="fieldset">
-                <FormLabel>variant</FormLabel>
-                <RadioGroup
-                  row
-                  name="variant"
-                  aria-label="variant"
-                  value={variant}
-                  onChange={handleChange('variant')}
-                >
-                  <FormControlLabel value="default" control={<Radio />} label="default" />
-                  <FormControlLabel value="outlined" control={<Radio />} label="outlined" />
-                </RadioGroup>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12}>
-              <FormControl component="fieldset">
-                <FormLabel>color</FormLabel>
-                <RadioGroup
-                  row
-                  name="color"
-                  aria-label="color"
-                  value={color}
-                  onChange={handleChange('color')}
-                >
-                  <FormControlLabel value="default" control={<Radio />} label="default" />
-                  <FormControlLabel value="primary" control={<Radio />} label="primary" />
-                  <FormControlLabel value="secondary" control={<Radio />} label="secondary" />
-                </RadioGroup>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12}>
-              <FormControl component="fieldset">
-                <FormLabel>size</FormLabel>
-                <RadioGroup
-                  row
-                  name="sizet"
-                  aria-label="size"
-                  value={size}
-                  onChange={handleChange('size')}
-                >
-                  <FormControlLabel value="medium" control={<Radio />} label="medium" />
-                  <FormControlLabel value="small" control={<Radio />} label="small" />
-                </RadioGroup>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12}>
-              <FormControl component="fieldset">
-                <FormLabel>icon</FormLabel>
-                <RadioGroup
-                  row
-                  name="icon"
-                  aria-label="icon"
-                  value={icon}
-                  onChange={handleChange('icon')}
-                >
-                  <FormControlLabel value="none" control={<Radio />} label="none" />
-                  <FormControlLabel value="icon" control={<Radio />} label="icon" />
-                </RadioGroup>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12}>
-              <FormControl component="fieldset">
-                <FormLabel>avatar</FormLabel>
-                <RadioGroup
-                  row
-                  name="avatar"
-                  aria-label="avatar"
-                  value={avatar}
-                  onChange={handleChange('avatar')}
-                >
-                  <FormControlLabel value="none" control={<Radio />} label="none" />
-                  <FormControlLabel value="letter" control={<Radio />} label="letter" />
-                  <FormControlLabel value="img" control={<Radio />} label="img" />
-                </RadioGroup>
-              </FormControl>
-            </Grid>
-            <Grid item xs={12}>
-              <FormControl component="fieldset">
-                <FormLabel>onDelete</FormLabel>
-                <RadioGroup
-                  row
-                  name="onDelete"
-                  aria-label="on delete"
-                  value={onDelete}
-                  onChange={handleChange('onDelete')}
-                >
-                  <FormControlLabel value="none" control={<Radio />} label="none" />
-                  <FormControlLabel value="default" control={<Radio />} label="default" />
-                  <FormControlLabel value="custom" control={<Radio />} label="custom" />
-                </RadioGroup>
-              </FormControl>
-            </Grid>
+        <Grid container spacing={3}>
+          <Grid item xs={12} md={6}>
+            <FormControl component="fieldset">
+              <FormLabel>variant</FormLabel>
+              <RadioGroup
+                row
+                name="variant"
+                aria-label="variant"
+                value={variant}
+                onChange={handleChange('variant')}
+              >
+                <FormControlLabel value="default" control={<Radio />} label="default" />
+                <FormControlLabel value="outlined" control={<Radio />} label="outlined" />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <FormControl component="fieldset">
+              <FormLabel>color</FormLabel>
+              <RadioGroup
+                row
+                name="color"
+                aria-label="color"
+                value={color}
+                onChange={handleChange('color')}
+              >
+                <FormControlLabel value="default" control={<Radio />} label="default" />
+                <FormControlLabel value="primary" control={<Radio />} label="primary" />
+                <FormControlLabel value="secondary" control={<Radio />} label="secondary" />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <FormControl component="fieldset">
+              <FormLabel>size</FormLabel>
+              <RadioGroup
+                row
+                name="sizet"
+                aria-label="size"
+                value={size}
+                onChange={handleChange('size')}
+              >
+                <FormControlLabel value="medium" control={<Radio />} label="medium" />
+                <FormControlLabel value="small" control={<Radio />} label="small" />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <FormControl component="fieldset">
+              <FormLabel>icon</FormLabel>
+              <RadioGroup
+                row
+                name="icon"
+                aria-label="icon"
+                value={icon}
+                onChange={handleChange('icon')}
+              >
+                <FormControlLabel value="none" control={<Radio />} label="none" />
+                <FormControlLabel value="icon" control={<Radio />} label="icon" />
+              </RadioGroup>
+            </FormControl>
           </Grid>
-        </Paper>
+          <Grid item xs={12} md={6}>
+            <FormControl component="fieldset">
+              <FormLabel>avatar</FormLabel>
+              <RadioGroup
+                row
+                name="avatar"
+                aria-label="avatar"
+                value={avatar}
+                onChange={handleChange('avatar')}
+              >
+                <FormControlLabel value="none" control={<Radio />} label="none" />
+                <FormControlLabel value="letter" control={<Radio />} label="letter" />
+                <FormControlLabel value="img" control={<Radio />} label="img" />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+          <Grid item xs={12} md={6}>
+            <FormControl component="fieldset">
+              <FormLabel>onDelete</FormLabel>
+              <RadioGroup
+                row
+                name="onDelete"
+                aria-label="on delete"
+                value={onDelete}
+                onChange={handleChange('onDelete')}
+              >
+                <FormControlLabel value="none" control={<Radio />} label="none" />
+                <FormControlLabel value="default" control={<Radio />} label="default" />
+                <FormControlLabel value="custom" control={<Radio />} label="custom" />
+              </RadioGroup>
+            </FormControl>
+          </Grid>
+        </Grid>
       </Grid>
       <Grid item xs={12}>
         <MarkdownElement text={code} />

diff --git a/docs/src/pages/components/chips/chips.md b/docs/src/pages/components/chips/chips.md
@@ -54,7 +54,7 @@ You can use the `size` prop to define a small Chip.
 
 ## Chip Playground
 
-{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true, "bg": true}}
+{{"demo": "pages/components/chips/ChipsPlayground.js", "hideHeader": true}}
 
 ## Accessibility
 

diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js
@@ -156,7 +156,7 @@ ColorlibStepIcon.propTypes = {
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '90%',
+    width: '100%',
   },
   button: {
     marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.tsx b/docs/src/pages/components/steppers/CustomizedSteppers.tsx
@@ -146,7 +146,7 @@ function ColorlibStepIcon(props: StepIconProps) {
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '90%',
+      width: '100%',
     },
     button: {
       marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js
@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '90%',
+    width: '100%',
   },
   backButton: {
     marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx
@@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '90%',
+      width: '100%',
     },
     backButton: {
       marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.js b/docs/src/pages/components/steppers/HorizontalLinearStepper.js
@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '90%',
+    width: '100%',
   },
   button: {
     marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx
@@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '90%',
+      width: '100%',
     },
     button: {
       marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js
@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '90%',
+    width: '100%',
   },
   button: {
     marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx
@@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '90%',
+      width: '100%',
     },
     button: {
       marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js
@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '90%',
+    width: '100%',
   },
   button: {
     marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx
@@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '90%',
+      width: '100%',
     },
     button: {
       marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js
@@ -8,7 +8,7 @@ import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '90%',
+    width: '100%',
   },
   button: {
     marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx
@@ -9,7 +9,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '90%',
+      width: '100%',
     },
     button: {
       marginRight: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/VerticalLinearStepper.js b/docs/src/pages/components/steppers/VerticalLinearStepper.js
@@ -10,7 +10,7 @@ import Typography from '@material-ui/core/Typography';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    width: '90%',
+    width: '100%',
   },
   button: {
     marginTop: theme.spacing(1),

diff --git a/docs/src/pages/components/steppers/VerticalLinearStepper.tsx b/docs/src/pages/components/steppers/VerticalLinearStepper.tsx
@@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
-      width: '90%',
+      width: '100%',
     },
     button: {
       marginTop: theme.spacing(1),