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

💄 improve placeholder on personal page and home cards #328

Merged
merged 2 commits into from
Oct 4, 2023

Conversation

BuildmodeOne
Copy link
Member

@BuildmodeOne BuildmodeOne commented Oct 3, 2023

Examples:

Old New
dev neuland app_personal_(iPhone 12 Pro) localhost_3000_personal_(iPhone 12 Pro) (3)

🤖 Generated by Copilot at 75642a4

Summary

🎨🚀🌐

This pull request adds custom placeholders for various components of the neuland.app using react-placeholder and CSS modules. This improves the user experience and the visual consistency of the app while the data is loading. The pull request also updates a dependency and adds funding information.

Sing, O Muse, of the skillful coder who devised
Custom placeholders for the cards of food and room,
Of mobility and timetable, with TextBlock styled
By Home.module.css and Personal.module.css in bloom.

Walkthrough

  • Import TextBlock component from react-placeholder to create custom placeholders for different cards and pages (link, link, link, link, link)
  • Define placeholder variables as JSX elements that contain list group items with text blocks of different sizes and margins to mimic the data entries for food, room, timetable, and personal cards and pages (link, link, link, link)
  • Modify ReactPlaceholder components to use the customPlaceholder prop and pass the placeholder variables as the value instead of using the type and rows props (link, link, link, link)
  • Import RenderMobilityEntryPlaceholder function from mobility-utils to create custom placeholders for the mobility card (link)
  • Define placeholder variable as JSX element that contains list group items with mobility entry placeholders of different kinds depending on the mobility settings (link)
  • Modify ReactPlaceholder component to use the customPlaceholder prop and pass the placeholder variable as the value instead of using the type and rows props (link)
  • Define RenderMobilityEntryPlaceholder function as a component that returns a text block or a dashed line depending on the kind of mobility entry (link)
  • Modify RenderMobilityEntry function to use the styles prop to apply custom margins to the mobility destination and time elements (link)
  • Import styles variable from Home.module.css to apply custom margins to the text blocks in the timetable card (link)
  • Define .placeholder_2_5, .placeholder_3_0, and .placeholder_4_0 classes in Home.module.css to apply custom margins of 2.5px, 3px, and 4px respectively to the text blocks (link)
  • Define .placeholder class in Personal.module.css to apply a custom margin of 3.5px to the text blocks (link)
  • Update caniuse-lite dependency to the latest version and add github funding type and url in package-lock.json (link, link)

@BuildmodeOne BuildmodeOne requested a review from Robert27 October 3, 2023 23:11
@BuildmodeOne BuildmodeOne merged commit cd4e129 into neuland-ingolstadt:develop Oct 4, 2023
4 checks passed
@BuildmodeOne BuildmodeOne deleted the placeholders branch April 11, 2024 13:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants