Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[material-ui][docs] Adjust the Templates card design #41450

Merged
merged 6 commits into from
Mar 11, 2024
Merged

[material-ui][docs] Adjust the Templates card design #41450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0143b4c
simplify overall layout and code
danilo-leal Mar 11, 2024
bdd248a
reduce description length a bit
danilo-leal Mar 11, 2024
00252d0
cleaning up
danilo-leal Mar 11, 2024
014fd3b
rework padding as per Diego's suggestion
danilo-leal Mar 11, 2024
f35ae27
two column layout on desktop as per Victor's suggestion
danilo-leal Mar 11, 2024
0480da1
tweak the landing page description
danilo-leal Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/data/material/getting-started/templates/templates.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@

# React Templates

<p class="description">Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React admin panel, and more.</p>
<p class="description">Browse our collection of free React templates to get started building your app with Material UI, including a React dashboard, React landing page, and more.</p>

Check warning on line 8 in docs/data/material/getting-started/templates/templates.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'our'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'our'.", "location": {"path": "docs/data/material/getting-started/templates/templates.md", "range": {"start": {"line": 8, "column": 31}}}, "severity": "WARNING"}

<!-- #default-branch-switch -->

## Free templates

Our curated collection of free Material UI templates includes dashboards, sign-in and sign-up pages, a blog, a checkout flow, and more.
Our curated collection of free Material UI templates includes dashboards, landing pages, sign-in and sign-up pages, a blog, a checkout flow, and more.

Check warning on line 14 in docs/data/material/getting-started/templates/templates.md

View workflow job for this annotation

GitHub Actions / runner / vale 

[vale] reported by reviewdog 🐶
[Google.We] Try to avoid using first-person plural like 'Our'.

Raw Output:
{"message": "[Google.We] Try to avoid using first-person plural like 'Our'.", "location": {"path": "docs/data/material/getting-started/templates/templates.md", "range": {"start": {"line": 14, "column": 1}}}, "severity": "WARNING"}
They can be combined with one of the [example projects](/material-ui/getting-started/example-projects/) to form a complete starter.

Sections of each layout are clearly defined either by comments or use of separate files,
Expand Down
128 changes: 45 additions & 83 deletions docs/src/modules/components/MaterialFreeTemplatesCollection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
/* eslint-disable material-ui/no-hardcoded-labels */
import * as React from 'react';
import NextLink from 'next/link';
import { alpha } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Card from '@mui/material/Card';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
import Visibility from '@mui/icons-material/Visibility';
import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
import { useTranslate } from '@mui/docs/i18n';
Expand Down Expand Up @@ -80,105 +77,70 @@ export default function Templates() {
const t = useTranslate();

return (
<Grid container spacing={2} sx={{ pt: 2, pb: 4 }}>
<Grid container spacing={2} sx={{ py: 2 }}>
{layouts(t).map((layout) => (
<Grid item xs={12} sm={4} key={layout.title}>
<Grid item xs={12} sm={6} key={layout.title}>
<Card
variant="outlined"
sx={{
height: '100%',
background: 'background.paper',
borderColor: 'divider',
display: 'flex',
flexDirection: 'column',
borderColor: 'divider',
}}
>
<Box
<CardMedia
component="img"
image={layout.src}
title={layout.title}
sx={{
overflow: 'auto',
position: 'relative',
aspectRatio: '16 / 9',
objectPosition: 'top',
borderBottom: '1px solid',
borderColor: 'divider',
}}
>
<CardMedia
component="a"
href={layout.href}
image={layout.src}
title={layout.title}
rel="nofollow"
target="_blank"
sx={(theme) => ({
height: 0,
pt: '65%',
'&:focus-visible': {
borderRadius: 1,
outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
outlineOffset: '-8px',
},
})}
/>
<NextLink href={layout.href} passHref legacyBehavior>
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
tabIndex={-1}
aria-hidden
data-ga-event-category="material-ui-template"
data-ga-event-label={layout.title}
data-ga-event-action="preview-img"
sx={(theme) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
gap: 1,
transition: '0.15s',
position: 'absolute',
width: '100%',
height: '100%',
top: 0,
left: 0,
bgcolor: alpha(theme.palette.primary[50], 0.5),
backdropFilter: 'blur(4px)',
opacity: 0,
'&:hover, &:focus-visible': {
opacity: 1,
},
...theme.applyDarkStyles({
bgcolor: alpha(theme.palette.common.black, 0.8),
}),
})}
>
<Visibility />
<Typography
fontWeight="bold"
color="text.primary"
sx={{ textDecorationLine: 'underline' }}
>
View live preview
</Typography>
</Link>
</NextLink>
</Box>
<Box sx={{ p: 2, flexGrow: 1, display: 'flex', flexDirection: 'column' }}>
<Typography component="h3" variant="subtitle1" fontWeight="bold" gutterBottom>
/>
<Box sx={{ p: 2, pt: 1.5 }}>
<Typography component="h3" variant="body1" fontWeight="semiBold">
{layout.title}
</Typography>
<Typography variant="body2" color="text.secondary" mb={2}>
{layout.description}
</Typography>
<Button
component="a"
href={layout.source}
size="small"
fullWidth
variant="outlined"
color="secondary"
startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
sx={{ mt: 'auto' }}
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', sm: 'row' },
gap: 1,
mt: 'auto',
}}
>
{t('sourceCode')}
</Button>
<Button
component="a"
href={layout.source}
size="small"
fullWidth
variant="outlined"
color="secondary"
startIcon={<Visibility sx={{ mr: 0.5 }} />}
data-ga-event-category="material-ui-template"
data-ga-event-label={layout.title}
data-ga-event-action="preview-img"
>
Live preview
</Button>
<Button
component="a"
href={layout.source}
size="small"
fullWidth
variant="outlined"
color="secondary"
startIcon={<CodeRoundedIcon sx={{ mr: 0.5 }} />}
>
Source code
</Button>
</Box>
</Box>
</Card>
</Grid>
Expand Down
8 changes: 4 additions & 4 deletions packages/mui-docs/src/translations/translations.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"joy-variant": "To learn how to add your own variants, check out <a href='/joy-ui/customization/themed-components/#extend-variants'>Themed components—Extend variants</a>."
}
},
"landingPageDescr": "A responsive landing page layout with many common sections.",
"landingPageDescr": "A responsive landing page layout with common sections found in marketing pages.",
"landingPageTitle": "Landing page",
"searchButton": "Search…",
"algoliaSearch": "What are you looking for?",
Expand All @@ -75,13 +75,13 @@
"toggleSettings": "Toggle settings drawer"
},
"backToTop": "Scroll back to top",
"blogDescr": "A sophisticated blog page layout. Markdown support is courtesy of markdown-to-jsx.",
"blogDescr": "A polished blog page layout. Markdown support is courtesy of markdown-to-jsx.",
"blogTitle": "Blog",
"bundleSize": "Bundle size",
"bundleSizeTooltip": "Scroll down to 'Exports Analysis' for a more detailed report.",
"cancel": "Cancel",
"cdn": "or use a CDN.",
"checkoutDescr": "A step-by-step checkout page layout. Adapt the number of steps to suit your needs, or make steps optional.",
"checkoutDescr": "A step-by-step checkout flow with an adaptable (or optional) number of steps.",
"checkoutTitle": "Checkout",
"clickToCopy": "Click to copy",
"close": "Close",
Expand Down Expand Up @@ -176,7 +176,7 @@
"showSource": "Show code",
"showTSSource": "Show TypeScript source",
"signInDescr": "A simple sign-in page using text fields, buttons, checkboxes, links, and more.",
"signInSideDescr": "A simple sign-in page with a two-column layout using text fields, buttons, and more.",
"signInSideDescr": "A sign-in page with a two-column layout using text fields, buttons, and more.",
"signInSideTitle": "Sign-in side",
"signInTitle": "Sign-in",
"signUpDescr": "A simple sign-up page using text fields, buttons, checkboxes, links, and more.",
Expand Down
Loading