[docs] Rename layouts to page-layout-examples + minor fixes

docs/src/modules/components/withRoot.js

@@ -182,7 +182,7 @@ const pages = [
     ],
   },
   {
-    pathname: '/layouts',
+    pathname: '/page-layout-examples',
   },
   {
     pathname: '/premium-themes',

docs/src/pages/layouts/Layouts.js → docs/src/pages/page-layout-examples/PageLayoutExamples.js

@@ -33,54 +33,61 @@ const themes = [
     name: 'Sign-in',
     description: 'A simple sign-in page.',
     src: '/static/images/layouts/sign-in.png',
-    href: '/layouts/sign-in',
-    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/sign-in',
+    href: '/page-layout-examples/sign-in',
+    source:
+      'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/page-layout-examples/sign-in',
   },
   {
     name: 'Album',
-    description: 'A reponsive album / gallery layout with a hero unit and footer.',
+    description: 'A reponsive album / gallery page layout with a hero unit and footer.',
     src: '/static/images/layouts/album.png',
-    href: '/layouts/album',
-    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/album',
+    href: '/page-layout-examples/album',
+    source:
+      'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/page-layout-examples/album',
   },
   {
     name: 'Blog',
     description:
-      'A sophisticated blog layout. Markdown support is courtesy of react-markdown, ' +
+      'A sophisticated blog page layout. Markdown support is courtesy of react-markdown, ' +
       'but is easily replaced.',
     src: '/static/images/layouts/blog.png',
-    href: '/layouts/blog',
-    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/blog',
+    href: '/page-layout-examples/blog',
+    source:
+      'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/page-layout-examples/blog',
   },
   {
     name: 'Pricing',
     description:
-      'Quickly build an effective pricing table for your potential customers with this layout.',
+      'Quickly build an effective pricing table for your potential customers with this page ' +
+      'layout.',
     src: '/static/images/layouts/pricing.png',
-    href: '/layouts/pricing',
-    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/pricing',
+    href: '/page-layout-examples/pricing',
+    source:
+      'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/page-layout-examples/pricing',
   },
   {
     name: 'Checkout',
     description:
       'A step-by-step checkout page layout. ' +
       'Adapt the number of steps to suit your needs, or make steps optional.',
     src: '/static/images/layouts/checkout.png',
-    href: '/layouts/checkout',
-    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/checkout',
+    href: '/page-layout-examples/checkout',
+    source:
+      'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/page-layout-examples/checkout',
   },
   {
     name: 'Dashboard',
     description:
       'A minimal dasboard with taskbar and mini variant draw. ' +
       'The chart is courtesy of Recharts, but it is simple to substitute an alternative.',
     src: '/static/images/layouts/dashboard.png',
-    href: '/layouts/dashboard',
-    source: 'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/layouts/dashboard',
+    href: '/page-layout-examples/dashboard',
+    source:
+      'https://github.com/mui-org/material-ui/tree/master/docs/src/pages/page-layout-examples/dashboard',
   },
 ];
 
-function Layouts(props) {
+function PageLayoutExamples(props) {
   const { classes } = props;
   return (
     <Grid container spacing={16}>
@@ -113,8 +120,8 @@ function Layouts(props) {
   );
 }
 
-Layouts.propTypes = {
+PageLayoutExamples.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(Layouts);
+export default withStyles(styles)(PageLayoutExamples);

docs/src/pages/layouts/blog/Blog.js → docs/src/pages/page-layout-examples/blog/Blog.js

@@ -142,7 +142,7 @@ function Blog(props) {
             noWrap
             className={classes.toolbarTitle}
           >
-            Blog layout
+            Blog
           </Typography>
           <IconButton>
             <SearchIcon />

docs/src/pages/layouts/blog/blog-post.1.md → docs/src/pages/page-layout-examples/blog/blog-post.1.md

@@ -1,6 +1,6 @@
 # Sample blog post
 
-#### January 1, 2014 by Olivier
+#### April 1, 2020 by Olivier
 
 This blog post shows a few different types of content that are supported and styled with
 Material styles. Basic typography, images, and code are all supported.

docs/src/pages/layouts/blog/blog-post.2.md → docs/src/pages/page-layout-examples/blog/blog-post.2.md

@@ -1,6 +1,6 @@
 # Another blog post
 
-#### December 23, 2013 by Matt
+#### March 23, 2020 by Matt
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

docs/src/pages/layouts/blog/blog-post.3.md → docs/src/pages/page-layout-examples/blog/blog-post.3.md

@@ -1,6 +1,6 @@
 # New feature
 
-#### December 14, 2013 by Tom
+#### March 14, 2020 by Tom
 
 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.

docs/src/pages/layouts/checkout/Checkout.js → docs/src/pages/page-layout-examples/checkout/Checkout.js

@@ -20,10 +20,10 @@ const styles = theme => ({
   },
   layout: {
     width: 'auto',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-    [theme.breakpoints.up(700 + theme.spacing.unit * 3 * 2)]: {
-      width: 700,
+    marginLeft: theme.spacing.unit * 2,
+    marginRight: theme.spacing.unit * 2,
+    [theme.breakpoints.up(600 + theme.spacing.unit * 2 * 2)]: {
+      width: 600,
       marginLeft: 'auto',
       marginRight: 'auto',
     },
@@ -32,14 +32,14 @@ const styles = theme => ({
     marginTop: theme.spacing.unit * 3,
     marginBottom: theme.spacing.unit * 3,
     padding: theme.spacing.unit * 2,
-    [theme.breakpoints.up(700 + theme.spacing.unit * 3 * 2)]: {
+    [theme.breakpoints.up(600 + theme.spacing.unit * 3 * 2)]: {
       marginTop: theme.spacing.unit * 6,
       marginBottom: theme.spacing.unit * 6,
       padding: theme.spacing.unit * 3,
     },
   },
   stepper: {
-    padding: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 8}px`,
+    padding: `${theme.spacing.unit * 3}px 0 ${theme.spacing.unit * 5}px`,
   },
   buttons: {
     display: 'flex',
@@ -108,7 +108,7 @@ class Checkout extends React.Component {
         <main className={classes.layout}>
           <Paper className={classes.paper}>
             <Typography variant="display1" align="center">
-              Checkout layout
+              Checkout
             </Typography>
             <Stepper activeStep={activeStep} className={classes.stepper}>
               {steps.map(label => (

docs/src/pages/layouts/dashboard/Dashboard.js → docs/src/pages/page-layout-examples/dashboard/Dashboard.js

@@ -24,6 +24,9 @@ const styles = theme => ({
   root: {
     display: 'flex',
   },
+  toolbar: {
+    paddingRight: 24, // keep right padding when drawer closed
+  },
   toolbarIcon: {
     display: 'flex',
     alignItems: 'center',
@@ -115,7 +118,7 @@ class Dashboard extends React.Component {
             position="absolute"
             className={classNames(classes.appBar, this.state.open && classes.appBarShift)}
           >
-            <Toolbar disableGutters={!this.state.open}>
+            <Toolbar disableGutters={!this.state.open} className={classes.toolbar}>
               <IconButton
                 color="inherit"
                 aria-label="Open drawer"
@@ -128,7 +131,7 @@ class Dashboard extends React.Component {
                 <MenuIcon />
               </IconButton>
               <Typography variant="title" color="inherit" noWrap className={classes.title}>
-                Dashboard layout
+                Dashboard
               </Typography>
               <IconButton color="inherit">
                 <Badge badgeContent={4} color="secondary">

docs/src/pages/page-layout-examples/page-layout-examples.md

@@ -0,0 +1,18 @@
+# Page layout examples
+
+<p class="description">A selection of basic page layouts to help you get started building your app.</p>
+
+They can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
+
+Sections of each layout are clearly defined either by comments or use of separate files, 
+making it simple to extract parts of a page (such as a "hero unit", or footer, for example) 
+for reuse in other pages.
+
+For multi-part examples, a table in the README at the linked source code location describes 
+the purpose of each file. 
+
+{{"demo": "pages/page-layout-examples/PageLayoutExamples.js", "hideHeader": true}}
+
+If while using these examples you make changes or enhancements that could improve the 
+developer experience, or you would like to contrbute an additional example,
+please consider creating a [pull-request on GitHub](https://github.com/mui-org/material-ui/pulls). 

docs/src/pages/layouts/pricing/Pricing.js → docs/src/pages/page-layout-examples/pricing/Pricing.js

@@ -138,7 +138,7 @@ function Pricing(props) {
         {/* Hero unit */}
         <div className={classes.heroContent}>
           <Typography variant="display3" align="center" color="textPrimary" gutterBottom>
-            Pricing layout
+            Pricing
           </Typography>
           <Typography variant="title" align="center" color="textSecondary" component="p">
             Quickly build an effective pricing table for your potential customers with this layout.

pages/layouts.js → pages/page-layout-examples.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import withRoot from 'docs/src/modules/components/withRoot';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import markdown from 'docs/src/pages/layouts/layouts.md';
+import markdown from 'docs/src/pages/page-layout-examples/page-layout-examples.md';
 
 function Page() {
   return (
     <MarkdownDocs
       markdown={markdown}
       demos={{
-        'pages/layouts/Layouts.js': {
-          js: require('docs/src/pages/layouts/Layouts').default,
+        'pages/page-layout-examples/PageLayoutExamples.js': {
+          js: require('docs/src/pages/page-layout-examples/PageLayoutExamples').default,
           raw: preval`
 module.exports = require('fs')
-  .readFileSync(require.resolve('docs/src/pages/layouts/Layouts'), 'utf8')
+  .readFileSync(require.resolve('docs/src/pages/page-layout-examples/PageLayoutExamples'), 'utf8')
 `,
         },
       }}

pages/layouts/album.js → pages/page-layout-examples/album.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import withRoot from 'docs/src/modules/components/withRoot';
 import Head from 'docs/src/modules/components/Head';
-import Album from 'docs/src/pages/layouts/album/Album';
+import Album from 'docs/src/pages/page-layout-examples/album/Album';
 
 function Page() {
   return (
     <React.Fragment>
       <Head
-        title="Album layout - Material-UI"
+        title="Album page layout - Material-UI"
         description="An example layout for creating an albumn or gallery."
       />
       <Album />

pages/layouts/blog.js → pages/page-layout-examples/blog.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import withRoot from 'docs/src/modules/components/withRoot';
 import Head from 'docs/src/modules/components/Head';
-import Blog from 'docs/src/pages/layouts/blog/Blog';
+import Blog from 'docs/src/pages/page-layout-examples/blog/Blog';
 
 function Page() {
   return (
     <React.Fragment>
       <Head
-        title="Blog layout - Material-UI"
+        title="Blog page layout example - Material-UI"
         description="An example layout for creating a blog or newsletter."
       />
       <Blog />

pages/layouts/checkout.js → pages/page-layout-examples/checkout.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import withRoot from 'docs/src/modules/components/withRoot';
 import Head from 'docs/src/modules/components/Head';
-import Checkout from 'docs/src/pages/layouts/checkout/Checkout';
+import Checkout from 'docs/src/pages/page-layout-examples/checkout/Checkout';
 
 function Page() {
   return (
     <React.Fragment>
       <Head
-        title="Checkout layout - Material-UI"
+        title="Checkout page layout example - Material-UI"
         description="An example layout for creating a checkout page."
       />
       <Checkout />

pages/layouts/dashboard.js → pages/page-layout-examples/dashboard.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import withRoot from 'docs/src/modules/components/withRoot';
 import Head from 'docs/src/modules/components/Head';
-import Dashboard from 'docs/src/pages/layouts/dashboard/Dashboard';
+import Dashboard from 'docs/src/pages/page-layout-examples/dashboard/Dashboard';
 
 function Page() {
   return (
     <React.Fragment>
       <Head
-        title="Dashboard layout - Material-UI"
+        title="Dashboard page layout example - Material-UI"
         description="An example layout for creating an albumn."
       />
       <Dashboard />

pages/layouts/pricing.js → pages/page-layout-examples/pricing.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import withRoot from 'docs/src/modules/components/withRoot';
 import Head from 'docs/src/modules/components/Head';
-import Pricing from 'docs/src/pages/layouts/pricing/Pricing';
+import Pricing from 'docs/src/pages/page-layout-examples/pricing/Pricing';
 
 function Page() {
   return (
     <React.Fragment>
       <Head
-        title="Pricing layout - Material-UI"
+        title="Pricing page layout example - Material-UI"
         description="An example layout for creating a pricing page."
       />
       <Pricing />

pages/layouts/sign-in.js → pages/page-layout-examples/sign-in.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import withRoot from 'docs/src/modules/components/withRoot';
 import Head from 'docs/src/modules/components/Head';
-import SignIn from 'docs/src/pages/layouts/sign-in/SignIn';
+import SignIn from 'docs/src/pages/page-layout-examples/sign-in/SignIn';
 
 function Page() {
   return (
     <React.Fragment>
       <Head
-        title="Sign-in layout - Material-UI"
+        title="Sign-in page layout example - Material-UI"
         description="An example layout for creating a sign-in page."
       />
       <SignIn />