Skip to content

[material-ui][docs] Remove Masonry component and Material Design icon from the landing page template #41080

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

Merged
zanivan merged 13 commits into from
Feb 15, 2024
Merged

[material-ui][docs] Remove Masonry component and Material Design icon from the landing page template #41080

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
1cc92a2
Replace Masonry for Grid
zanivan Feb 13, 2024
e451d6a
Replace Material Design icon
zanivan Feb 13, 2024
7b186fd
Run docs:typescript:formatted
zanivan Feb 13, 2024
90b5771
Fix eslint
zanivan Feb 13, 2024
8ce1c30
Fix lint
zanivan Feb 13, 2024
0aab215
Rerun-tests
zanivan Feb 13, 2024
bba4442
Replace icon for 'MD2' label
zanivan Feb 14, 2024
5219fde
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 14, 2024
04da734
Rerun tests
zanivan Feb 14, 2024
534b941
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 15, 2024
0f08c05
Danilo's feedback
zanivan Feb 15, 2024
0e3af36
Merge remote-tracking branch 'upstream/master' into material-ui-templ…
zanivan Feb 15, 2024
2c600dc
Fix lint
zanivan Feb 15, 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
6 changes: 4 additions & 2 deletions docs/data/material/getting-started/templates/landing-page/LandingPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import AppAppBar from './components/AppAppBar';
import Hero from './components/Hero';
import LogoCollection from './components/LogoCollection';
Expand Down Expand Up @@ -52,7 +52,9 @@ function ToggleCustomTheme({ showCustomTheme, toggleCustomTheme }) {
Custom theme
</ToggleButton>
<ToggleButton value={false}>
<SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
<Typography fontWeight={800} sx={{ mr: 1 }}>
MD2
</Typography>
Material Design
</ToggleButton>
</ToggleButtonGroup>
Expand Down
6 changes: 4 additions & 2 deletions docs/data/material/getting-started/templates/landing-page/LandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
import SvgMaterialDesign from 'docs/src/icons/SvgMaterialDesign';
import AppAppBar from './components/AppAppBar';
import Hero from './components/Hero';
import LogoCollection from './components/LogoCollection';
Expand Down Expand Up @@ -59,7 +59,9 @@ function ToggleCustomTheme({
Custom theme
</ToggleButton>
<ToggleButton value={false}>
<SvgMaterialDesign sx={{ fontSize: '20px', mr: 1 }} />
<Typography fontWeight={800} sx={{ mr: 1 }}>
MD2
</Typography>
Material Design
</ToggleButton>
</ToggleButtonGroup>
Expand Down
57 changes: 34 additions & 23 deletions docs/data/material/getting-started/templates/landing-page/components/Testimonials.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Masonry from '@mui/lab/Masonry';
import { useMediaQuery } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useTheme } from '@mui/system';

const userTestimonials = [
Expand Down Expand Up @@ -80,8 +79,6 @@ const logoStyle = {

export default function Testimonials() {
const theme = useTheme();
const isSmallScreen = useMediaQuery('(max-width:600px)');
const columns = isSmallScreen ? 1 : 3;
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;

return (
Expand Down Expand Up @@ -112,32 +109,46 @@ export default function Testimonials() {
and reliable support.
</Typography>
</Box>
<Masonry columns={columns} spacing={2}>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Card key={index} sx={{ p: 1 }}>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
<Card
sx={{
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
justifyContent: 'space-between',
pr: 2,
flexGrow: 1,
p: 1,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
</Box>
</Card>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
pr: 2,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Masonry>
</Grid>
</Container>
);
}
57 changes: 34 additions & 23 deletions docs/data/material/getting-started/templates/landing-page/components/Testimonials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@ import Avatar from '@mui/material/Avatar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Container from '@mui/material/Container';
import Masonry from '@mui/lab/Masonry';
import { useMediaQuery } from '@mui/material';
import Grid from '@mui/material/Grid';
import { useTheme } from '@mui/system';

const userTestimonials = [
Expand Down Expand Up @@ -80,8 +79,6 @@ const logoStyle = {

export default function Testimonials() {
const theme = useTheme();
const isSmallScreen = useMediaQuery('(max-width:600px)');
const columns = isSmallScreen ? 1 : 3;
const logos = theme.palette.mode === 'light' ? darkLogos : whiteLogos;

return (
Expand Down Expand Up @@ -112,32 +109,46 @@ export default function Testimonials() {
and reliable support.
</Typography>
</Box>
<Masonry columns={columns} spacing={2}>
<Grid container spacing={2}>
{userTestimonials.map((testimonial, index) => (
<Card key={index} sx={{ p: 1 }}>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
<Grid item xs={12} sm={6} md={4} key={index} sx={{ display: 'flex' }}>
<Card
sx={{
display: 'flex',
flexDirection: 'row',
flexDirection: 'column',
justifyContent: 'space-between',
pr: 2,
flexGrow: 1,
p: 1,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img src={logos[index]} alt={`Logo ${index + 1}`} style={logoStyle} />
</Box>
</Card>
<CardContent>
<Typography variant="body2" color="text.secondary">
{testimonial.testimonial}
</Typography>
</CardContent>
<Box
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
pr: 2,
}}
>
<CardHeader
avatar={testimonial.avatar}
title={testimonial.name}
subheader={testimonial.occupation}
/>
<img
src={logos[index]}
alt={`Logo ${index + 1}`}
style={logoStyle}
/>
</Box>
</Card>
</Grid>
))}
</Masonry>
</Grid>
</Container>
);
}
2 changes: 1 addition & 1 deletion docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
"author": "MUI Team",
"license": "MIT",
"scripts": {
"build": "rimraf docs/export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=4096 next build --profile && pnpm build-sw",
"build": "rimraf docs/export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=6144 next build --profile && pnpm build-sw",
"build:clean": "rimraf .next && pnpm build",
"build-sw": "node ./scripts/buildServiceWorker.js",
"dev": "next dev",
Expand Down