feat: More cards on mobile carousels

[hassnian]

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes More cards on mobile carousels  #9094

Needs Design check

• @exezbcz please review

Did your issue had any of the "$" label on it?

• Fill up your DOT address: Payout

Screenshot 📸

• My fix has changed something on UI;

[netlify]

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	cc6e42f
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/65b3309d66d9e6000855c021
😎 Deploy Preview	https://deploy-preview-9135--koda-canary.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[kodabot]

WARNING @hassnian PR for issue #9094 which isn't assigned to you. Please be warned that this PR may get rejected if there's another assignee for issue #9094

[reviewpad]

AI-Generated Summary: This pull request contains changes across three files that primarily focus on the design of a Carousel component within a NFT application. The changes include additional minimal styling for the carousel and modifications in CarouselInfo. Also, the carousel's appearance on mobile is accounted for by adjusting the number of slides and spacing shown. Added control over the display of NFT card information within the carousel is provided, enabling a minimal display mode that reduces the information shown on smaller screens. Notably, the code for the CarouselAgnostic.vue and CarouselInfo.vue components has been modified to introduce a minimal carousel display option. This mode adjusts the provided information, padding, and other display attributes to appear optimally on smaller screens. In the _carousel.scss stylesheet, a new minimal class is added for controlling the padding. Further, breakpoints have been adjusted to optimize the carousel's display across various screen sizes.

[roiLeo]

any way to do it without passing minimal prop?

[hassnian]

any way to do it without passing minimal prop?

without a prop called minimal ?
maybe what nftcarddoes with a prop variant 'primary'| 'minimal'

or using a slot?

[exezbcz]

there should not even be the network IMO

- this is the card from explore

in old explorer v0.9 figma file its without

• its not that important on mobile to see what network is it

[preschian]

any way to do it without passing minimal prop?

without a prop called minimal ? maybe what nftcarddoes with a prop variant 'primary'| 'minimal'

or using a slot?

Use $device.isMobile? so we can drop the prop

[sonarcloud]

Quality Gate passed

Kudos, no new issues were introduced!

0 New issues
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[codeclimate]

Code Climate has analyzed commit cc6e42f and detected 0 issues on this pull request.

View more on Code Climate.

[exezbcz]

loooks okay!

[preschian]

lgtm. It can be a follow-up issue for the CSS helper (isMobile). Related:

• use css helpers to toggle visiblity #8767
• SSR Preparation #8489

[yangwao]

Thanks!
pay 30 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 6.7 USD/DOT ~ 4.478 $DOT
🧗 16faLfsywwNATaEfbH2ah75dn6ZmctQWpMS5G4KFhbmj5hnD
🔗 0xadfa9894c3cea2836c87bdc902457bea0dac6630970396083d9657551af21880

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues