Salimsara/enhancement/556 complete gameart page redesign

[salimsara]

📄 Pull Request Overview

Closes #556

🔧 Changes Made

Implemented the new Figma design to GameArt Page:

• Created a reusable SectionCard component using the existing ModularCard system
• Extended ModularCardImageProps to include optional width and height props for better image control in cards

Refactoring/clean up tasks

• Made the dropdown sidebar visible on mobile screens
• Adjusted the gap between page title and mobile sidebar.

---

✅ Checklist Before Submission

• Functionality: I have tested my code, and it works as expected.
• JSDoc: I have added or updated JSDoc comments for all relevant code.
• Debugging: No console.log() or other debugging statements are left.
• Clean Code: Removed commented-out or unnecessary code.
• Tests: Added new tests or updated existing ones for the changes made.
• Documentation: Documentation has been updated (if applicable).

---

📝 Additional Information

Screenshots:

---

Known issues:

• As seen in the screenshots, the diagonal clipping angle varies depending on the aspect ratio of each image (e.g. horizontal vs. vertical, or different heights).
  • Because of this, some cards also end up with extra whitespace between the text section and the image section, especially when the image dimensions differ significantly from the others.
• The mobile menu does not close automatically when navigating to another page; this issue likely existed before my changes, it is not caused by my code

[Rutjake]

Good job! The page looks great. However, something is broken in the page navigation: the anchor links do not work (do not scroll to sections) on a mobile device or desktop, and the mobile menu does not close when clicking on a link.

[Rutjake]

Why did you remove the breakpoint?

[salimsara]

I removed the breakpoint because I wanted the padding-top to also apply at screen width (1023px), which is exactly between the lg and xl breakpoints. Since that screen width is where sidebar switches to a dropdown, and that creates a gap between the dropdown and the title (which doesn't align with the Figma design). No problem, I will put it back.

[Rutjake]

Good job! The page looks great. However, something is broken in the page navigation: the anchor links do not work (do not scroll to sections) on a mobile device or desktop, and the mobile menu does not close when clicking on a link.

Nvm. The sidebar menu issue has been resolved in the dev branch as part of another related issue.

[Skoivumaki]

Nvm. The sidebar menu issue has been resolved in the dev branch as part of another related issue.

The problem comes from the removal of WikiContent component, which declares id tags for each section upon rendering. When this branch gets merged, it will break again.
A simple solution would be to include id={section.id} in section mapping in GameArtPage.tsx
Then the legacy html #id based href should work.

[Skoivumaki]

Good work! Readable and clean code 👍
Theres still small improvements todo:
On tablets the margin/padding between image and text is awkwardly big:

See: #584 (comment)

IMO the images look off. I tried to make the images fit more clean to the clip-path frame thing, but honestly no matter how you scale/transform them. They wont look any better. Artist problem not ours... 😅

[Skoivumaki]

On tablets the margin/padding between image and text is awkwardly big:

Issue still persists

[Skoivumaki]

Resolved in Discord