diff --git a/docs/src/modules/components/withRoot.js b/docs/src/modules/components/withRoot.js
index c762c09c1e55ff..b571b4b4a6b954 100644
--- a/docs/src/modules/components/withRoot.js
+++ b/docs/src/modules/components/withRoot.js
@@ -182,7 +182,7 @@ const pages = [
],
},
{
- pathname: '/layouts',
+ pathname: '/page-layout-examples',
},
{
pathname: '/premium-themes',
diff --git a/docs/src/pages/layouts/layouts.md b/docs/src/pages/layouts/layouts.md
deleted file mode 100644
index e2ca642fa82c72..00000000000000
--- a/docs/src/pages/layouts/layouts.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# Layouts
-
-
A selection of basic layouts to help you get started building your app.
-
-They can be combined with one of the [examples](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
-
-Sections of each layout are clearly defined either by line-spacing, 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.
-
-{{"demo": "pages/layouts/Layouts.js", "hideHeader": true}}
diff --git a/docs/src/pages/layouts/Layouts.js b/docs/src/pages/page-layout-examples/PageLayoutExamples.js
similarity index 67%
rename from docs/src/pages/layouts/Layouts.js
rename to docs/src/pages/page-layout-examples/PageLayoutExamples.js
index 3ed07a3609af46..c140fadaa55a13 100644
--- a/docs/src/pages/layouts/Layouts.js
+++ b/docs/src/pages/page-layout-examples/PageLayoutExamples.js
@@ -33,32 +33,37 @@ 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',
@@ -66,8 +71,9 @@ const themes = [
'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',
@@ -75,12 +81,13 @@ const themes = [
'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 (
@@ -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);
diff --git a/docs/src/pages/layouts/album/Album.js b/docs/src/pages/page-layout-examples/album/Album.js
similarity index 100%
rename from docs/src/pages/layouts/album/Album.js
rename to docs/src/pages/page-layout-examples/album/Album.js
diff --git a/docs/src/pages/layouts/album/README.md b/docs/src/pages/page-layout-examples/album/README.md
similarity index 100%
rename from docs/src/pages/layouts/album/README.md
rename to docs/src/pages/page-layout-examples/album/README.md
diff --git a/docs/src/pages/layouts/blog/Blog.js b/docs/src/pages/page-layout-examples/blog/Blog.js
similarity index 99%
rename from docs/src/pages/layouts/blog/Blog.js
rename to docs/src/pages/page-layout-examples/blog/Blog.js
index 34e9063097a6c5..d37936bbc6e2d7 100644
--- a/docs/src/pages/layouts/blog/Blog.js
+++ b/docs/src/pages/page-layout-examples/blog/Blog.js
@@ -142,7 +142,7 @@ function Blog(props) {
noWrap
className={classes.toolbarTitle}
>
- Blog layout
+ Blog
diff --git a/docs/src/pages/layouts/blog/Markdown.js b/docs/src/pages/page-layout-examples/blog/Markdown.js
similarity index 100%
rename from docs/src/pages/layouts/blog/Markdown.js
rename to docs/src/pages/page-layout-examples/blog/Markdown.js
diff --git a/docs/src/pages/layouts/blog/README.md b/docs/src/pages/page-layout-examples/blog/README.md
similarity index 100%
rename from docs/src/pages/layouts/blog/README.md
rename to docs/src/pages/page-layout-examples/blog/README.md
diff --git a/docs/src/pages/layouts/blog/blog-post.1.md b/docs/src/pages/page-layout-examples/blog/blog-post.1.md
similarity index 98%
rename from docs/src/pages/layouts/blog/blog-post.1.md
rename to docs/src/pages/page-layout-examples/blog/blog-post.1.md
index c196c7a2b4f83a..b9d7c9a4803ca9 100644
--- a/docs/src/pages/layouts/blog/blog-post.1.md
+++ b/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.
diff --git a/docs/src/pages/layouts/blog/blog-post.2.md b/docs/src/pages/page-layout-examples/blog/blog-post.2.md
similarity index 96%
rename from docs/src/pages/layouts/blog/blog-post.2.md
rename to docs/src/pages/page-layout-examples/blog/blog-post.2.md
index 089aad41a6abce..75f88ab1564839 100644
--- a/docs/src/pages/layouts/blog/blog-post.2.md
+++ b/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.
diff --git a/docs/src/pages/layouts/blog/blog-post.3.md b/docs/src/pages/page-layout-examples/blog/blog-post.3.md
similarity index 96%
rename from docs/src/pages/layouts/blog/blog-post.3.md
rename to docs/src/pages/page-layout-examples/blog/blog-post.3.md
index 7e03ab230ad0f7..5b4f033e8bd4c6 100644
--- a/docs/src/pages/layouts/blog/blog-post.3.md
+++ b/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.
diff --git a/docs/src/pages/layouts/checkout/AddressForm.js b/docs/src/pages/page-layout-examples/checkout/AddressForm.js
similarity index 100%
rename from docs/src/pages/layouts/checkout/AddressForm.js
rename to docs/src/pages/page-layout-examples/checkout/AddressForm.js
diff --git a/docs/src/pages/layouts/checkout/Checkout.js b/docs/src/pages/page-layout-examples/checkout/Checkout.js
similarity index 94%
rename from docs/src/pages/layouts/checkout/Checkout.js
rename to docs/src/pages/page-layout-examples/checkout/Checkout.js
index 6156093070ad90..3326330731fb7a 100644
--- a/docs/src/pages/layouts/checkout/Checkout.js
+++ b/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 {
- Checkout layout
+ Checkout
{steps.map(label => (
diff --git a/docs/src/pages/layouts/checkout/PaymentForm.js b/docs/src/pages/page-layout-examples/checkout/PaymentForm.js
similarity index 100%
rename from docs/src/pages/layouts/checkout/PaymentForm.js
rename to docs/src/pages/page-layout-examples/checkout/PaymentForm.js
diff --git a/docs/src/pages/layouts/checkout/README.md b/docs/src/pages/page-layout-examples/checkout/README.md
similarity index 100%
rename from docs/src/pages/layouts/checkout/README.md
rename to docs/src/pages/page-layout-examples/checkout/README.md
diff --git a/docs/src/pages/layouts/checkout/Review.js b/docs/src/pages/page-layout-examples/checkout/Review.js
similarity index 100%
rename from docs/src/pages/layouts/checkout/Review.js
rename to docs/src/pages/page-layout-examples/checkout/Review.js
diff --git a/docs/src/pages/layouts/dashboard/Dashboard.js b/docs/src/pages/page-layout-examples/dashboard/Dashboard.js
similarity index 96%
rename from docs/src/pages/layouts/dashboard/Dashboard.js
rename to docs/src/pages/page-layout-examples/dashboard/Dashboard.js
index ba08ac4619ef45..627e567c479c28 100644
--- a/docs/src/pages/layouts/dashboard/Dashboard.js
+++ b/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)}
>
-
+
- Dashboard layout
+ Dashboard
diff --git a/docs/src/pages/layouts/dashboard/README.md b/docs/src/pages/page-layout-examples/dashboard/README.md
similarity index 100%
rename from docs/src/pages/layouts/dashboard/README.md
rename to docs/src/pages/page-layout-examples/dashboard/README.md
diff --git a/docs/src/pages/layouts/dashboard/SimpleLineChart.js b/docs/src/pages/page-layout-examples/dashboard/SimpleLineChart.js
similarity index 100%
rename from docs/src/pages/layouts/dashboard/SimpleLineChart.js
rename to docs/src/pages/page-layout-examples/dashboard/SimpleLineChart.js
diff --git a/docs/src/pages/layouts/dashboard/SimpleTable.js b/docs/src/pages/page-layout-examples/dashboard/SimpleTable.js
similarity index 100%
rename from docs/src/pages/layouts/dashboard/SimpleTable.js
rename to docs/src/pages/page-layout-examples/dashboard/SimpleTable.js
diff --git a/docs/src/pages/layouts/dashboard/listItems.js b/docs/src/pages/page-layout-examples/dashboard/listItems.js
similarity index 100%
rename from docs/src/pages/layouts/dashboard/listItems.js
rename to docs/src/pages/page-layout-examples/dashboard/listItems.js
diff --git a/docs/src/pages/page-layout-examples/page-layout-examples.md b/docs/src/pages/page-layout-examples/page-layout-examples.md
new file mode 100644
index 00000000000000..07804516c749f0
--- /dev/null
+++ b/docs/src/pages/page-layout-examples/page-layout-examples.md
@@ -0,0 +1,18 @@
+# Page layout examples
+
+A selection of basic page layouts to help you get started building your app.
+
+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).
diff --git a/docs/src/pages/layouts/pricing/Pricing.js b/docs/src/pages/page-layout-examples/pricing/Pricing.js
similarity index 99%
rename from docs/src/pages/layouts/pricing/Pricing.js
rename to docs/src/pages/page-layout-examples/pricing/Pricing.js
index 4fc584ce1ec4c8..5be7700ab941d9 100644
--- a/docs/src/pages/layouts/pricing/Pricing.js
+++ b/docs/src/pages/page-layout-examples/pricing/Pricing.js
@@ -138,7 +138,7 @@ function Pricing(props) {
{/* Hero unit */}
- Pricing layout
+ Pricing
Quickly build an effective pricing table for your potential customers with this layout.
diff --git a/docs/src/pages/layouts/pricing/README.md b/docs/src/pages/page-layout-examples/pricing/README.md
similarity index 100%
rename from docs/src/pages/layouts/pricing/README.md
rename to docs/src/pages/page-layout-examples/pricing/README.md
diff --git a/docs/src/pages/layouts/sign-in/README.md b/docs/src/pages/page-layout-examples/sign-in/README.md
similarity index 100%
rename from docs/src/pages/layouts/sign-in/README.md
rename to docs/src/pages/page-layout-examples/sign-in/README.md
diff --git a/docs/src/pages/layouts/sign-in/SignIn.js b/docs/src/pages/page-layout-examples/sign-in/SignIn.js
similarity index 100%
rename from docs/src/pages/layouts/sign-in/SignIn.js
rename to docs/src/pages/page-layout-examples/sign-in/SignIn.js
diff --git a/pages/layouts.js b/pages/page-layout-examples.js
similarity index 52%
rename from pages/layouts.js
rename to pages/page-layout-examples.js
index 65eb6b9e5542fb..b0d93f5fb273c6 100644
--- a/pages/layouts.js
+++ b/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 (
diff --git a/pages/layouts/blog.js b/pages/page-layout-examples/blog.js
similarity index 75%
rename from pages/layouts/blog.js
rename to pages/page-layout-examples/blog.js
index c9108c41d2741b..ba111155246061 100644
--- a/pages/layouts/blog.js
+++ b/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 (
diff --git a/pages/layouts/checkout.js b/pages/page-layout-examples/checkout.js
similarity index 72%
rename from pages/layouts/checkout.js
rename to pages/page-layout-examples/checkout.js
index 35904ff04e22a8..700acd0f4d7cd0 100644
--- a/pages/layouts/checkout.js
+++ b/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 (
diff --git a/pages/layouts/dashboard.js b/pages/page-layout-examples/dashboard.js
similarity index 71%
rename from pages/layouts/dashboard.js
rename to pages/page-layout-examples/dashboard.js
index 6d9b8daf61459a..f5a548af2576a7 100644
--- a/pages/layouts/dashboard.js
+++ b/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 (
diff --git a/pages/layouts/pricing.js b/pages/page-layout-examples/pricing.js
similarity index 73%
rename from pages/layouts/pricing.js
rename to pages/page-layout-examples/pricing.js
index 9038da8fad7440..2ebca6b8eac09e 100644
--- a/pages/layouts/pricing.js
+++ b/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 (
diff --git a/pages/layouts/sign-in.js b/pages/page-layout-examples/sign-in.js
similarity index 73%
rename from pages/layouts/sign-in.js
rename to pages/page-layout-examples/sign-in.js
index 141c51af7ee7b5..a6425a33c4fe30 100644
--- a/pages/layouts/sign-in.js
+++ b/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 (