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.

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

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

Merged
merged 6 commits into from
Mar 11, 2024

Conversation

danilo-leal
Copy link
Contributor

@danilo-leal danilo-leal commented Mar 11, 2024

I wasn't enjoying how the "Live Preview" button was hidden beneath a hover on the template's thumbnail; I think most people would want to quickly check out what the template looks like before diving deeper into the source code. So, this PR, ultimately, approximates the card design to the one we're already using on the Joy UI docs, making both buttons side to side.

https://deploy-preview-41450--material-ui.netlify.app/material-ui/getting-started/templates/

@danilo-leal danilo-leal added docs Improvements or additions to the documentation package: material-ui Specific to @mui/material design This is about UI or UX design, please involve a designer labels Mar 11, 2024
@danilo-leal danilo-leal self-assigned this Mar 11, 2024
@mui-bot
Copy link

mui-bot commented Mar 11, 2024

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 0480da1

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

The "Live preview" change makes total sense to me 👍🏼

I'm not so sure about the added padding:

Screenshot 2024-03-11 at 10 33 41

Feels to me that we loose real state compared to the previous implementation

Screenshot 2024-03-11 at 10 33 47

@danilo-leal
Copy link
Contributor Author

True, yeah; both work, but the current design's slightly bigger image is indeed beneficial. Good call 👌

Copy link
Contributor

@zanivan zanivan left a comment

Choose a reason for hiding this comment

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

Thanks so much for tackling this! It was on my list to review this page after I've finished all the templates.

I Agree with @DiegoAndai though, we could leave more space for the template thumbnail. What if we had two cards like Joy UI?

Screenshot 2024-03-11 at 10 48 39

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

🚀

Copy link
Contributor

@zanivan zanivan left a comment

Choose a reason for hiding this comment

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

Looks good!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design This is about UI or UX design, please involve a designer docs Improvements or additions to the documentation package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants