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

[docs] Improve "Example projects" page design #37007

Merged
merged 6 commits into from
May 8, 2023
Merged

[docs] Improve "Example projects" page design #37007

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b727f7c
improve page design
danilo-leal Apr 25, 2023
e357452
fux styles
siriwatknp Apr 28, 2023
c73f7c4
move ExampleCollection to modules
siriwatknp May 8, 2023
9079881
adjust layout
siriwatknp May 8, 2023
45e7604
Merge branch 'master' of https://github.com/mui/material-ui into impr…
siriwatknp May 8, 2023
b73c219
fix border radius
danilo-leal May 8, 2023
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
31 changes: 16 additions & 15 deletions docs/data/material/getting-started/example-projects/ExampleCollection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import Card from '@mui/material/Card';
import Stack from '@mui/material/Stack';
import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Link from '@mui/material/Link';
Expand Down Expand Up @@ -88,6 +88,7 @@ export default function ExampleCollection() {
sx={[
(theme) => ({
p: 2,
height: '100%',
display: 'flex',
alignItems: 'center',
gap: 2,
Expand Down Expand Up @@ -118,17 +119,20 @@ export default function ExampleCollection() {
src={example.src}
alt={example.name}
/>
<span>
<div>
<Typography
variant="body"
fontWeight={600}
sx={{ fontFamily: 'IBM Plex Sans' }}
>
{example.name}
</Typography>
<Stack
direction={{ xs: 'column', sm: 'row' }}
alignItems={{ xs: 'start', sm: 'center' }}
<Box
sx={{
display: 'flex',
flexWrap: 'wrap',
alignItems: 'baseline',
}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@siriwatknp Hey! Just for the sake of learning, I'm curious why the preference for using the Box component rather than the Stack?

>
<Link
href={example.link}
Expand All @@ -144,18 +148,15 @@ export default function ExampleCollection() {
{example.label}
<ChevronRightRoundedIcon fontSize="small" />
</Link>
{example.tsLink ? (
<Stack
direction="row"
spacing={{ xs: 0, sm: 1 }}
alignItems="center"
>
{!!example.tsLink && (
<React.Fragment>
<Typography
variant="caption"
sx={{
fontFamily: 'IBM Plex Sans',
display: { xs: 'none', sm: 'block' },
opacity: 0.2,
mr: 0.75,
}}
>
/
Expand All @@ -173,10 +174,10 @@ export default function ExampleCollection() {
{example.tsLabel}
<ChevronRightRoundedIcon fontSize="small" />
</Link>
</Stack>
) : null}
</Stack>
</span>
</React.Fragment>
)}
</Box>
</div>
</Card>
</Grid>
))}
Expand Down