#4496 gallery card changes

[prachi00]

Thank you for your contribution to the KodaDot NFT gallery.

👇 _ Let's make a quick check before the contribution.

PR Type

• Bugfix
• Feature
• Refactoring

Context

• Closes New NFT card  #4496
• Requires deployment <>

Before submitting pull request, please make sure:

• My contribution builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've tried to respect high code quality standards
• I've didn't break any original functionality
• I've posted a screenshot of demonstrated change in this PR

Optional

• I've tested it at </bsx/collection>
• I've tested PR on mobile
• I've written unit tests 🧪
• I've found edge cases

Had issue bounty label?

• Fill up your KSM address:
  Payout

Community participation

• Are you at KodaDot Discord?

Screenshot 📸

• My fix has changed something on UI; a screenshot is best to understand changes for others.
  
  

[kodabot]

SUCCESS @prachi00 PR for issue #4496 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

[netlify]

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	546c0fa
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/63a40d83758cfd0008b0c4b1
😎 Deploy Preview	https://deploy-preview-4511--koda-nuxt.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 settings.

[roiLeo]

Oh no.. CarouselCard, I find it misleading.
Can't we have a fresh GalleryCard component?

[prachi00]

Oh no.. CarouselCard, I find it misleading.

Can't we have a fresh GalleryCard component?

Or can we rename carousel card and use it in both places? Since the ui and functionality is totally same

[roiLeo]

Or can we rename carousel card and use it in both places? Since the ui and functionality is totally same

if the design is exactly the same I'm not against, as long as we don't end up with special cases, I'm fine with it.
Or the best would be to to create GalleryCard component in histoire that will be used by carousel & explore layout.

[exezbcz]

price should not be bold

• the hover on the nft name is for the hover card which isnt implemented yet hover card NFT view #4340

looks like spotlight card is now different?

[prachi00]

@roiLeo so I shifted the gallery card to histoire but I haven't used that yet for carousel, I feel like shifting carousel should be done in a new issue as there is some logical part for that, that might need some moving too
so currently, carousel stays the same like before and the gallery one uses the new histoire component

[roiLeo]

Hey! Why did you change the carousel code if the outcome is not affected?

what needs to change in histoire component:

• use placeholder/fixed data
• don't use nuxt
• don't use buefy helpers
• rename NftCard to NeoNftCard?

I don't see the point of components/rmrk/Gallery/NftCard.vue file you can directly import the component

[yangwao]

@prachi00 Can we please move it outside of rmrk folder? 🥹

https://github.com/kodadot/nft-gallery/pull/4511/files#diff-bc15d2a15f1220c1ae5eaa62bb0d747486a1cee56b21204b5439c46d7dd2e0ec

[prachi00]

I just did the UI changes for the carousel card that should be according to the design

[prachi00]

@roiLeo by buefy helpers, do you mean buefy css classes? is-flex and all?

Also, using histoire newNftCard in a component that is not in vue compostion (gallery.vue) doesnt work, that is why I created a new composition component and used it there

[roiLeo]

@roiLeo by buefy helpers, do you mean buefy css classes? is-flex and all?

Nvm since we use Bulma theme in histoire it's working.

Also, using histoire newNftCard in a component that is not in vue compostion (gallery.vue) doesnt work, that is why I created a new composition component and used it there

lol, Nice move! I didn't knew that Gallery wasn't rewritten in Vue3 way.

• What's the difference between NeoNftCard & NftCard? if one of them is not used please delete it
• Could you please create story for each component you create?
• components/rmrk/Gallery/NftCard.vue stil inside rmrk folder

[prachi00]

@roiLeo by buefy helpers, do you mean buefy css classes? is-flex and all?

Nvm since we use Bulma theme in histoire it's working.

Also, using histoire newNftCard in a component that is not in vue compostion (gallery.vue) doesnt work, that is why I created a new composition component and used it there

lol, Nice move! I didn't knew that Gallery wasn't rewritten in Vue3 way.

• What's the difference between NeoNftCard & NftCard? if one of them is not used please delete it
• Could you please create story for each component you create?
• components/rmrk/Gallery/NftCard.vue stil inside rmrk folder

so NftCard is in vue composition, so it is using NeoNftCard which gallery is not able to yet as it isnt in vue3, I guess we can remove NftCard once gallery is in vue3 and then directly use NeoNftCard in gallery

[roiLeo]

so NftCard is in vue composition...

I'm referring to NeoNftCard & NftCard component in histoire

[prachi00]

@roiLeo I added the story file, but I dont know how to see it, I ran story:dev
But I dont see any of the components, its just loading forever

[preschian]

I ran story:dev But I dont see any of the components, its just loading forever

looks fine on me, is there any error message on your browser console?

[codeclimate]

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

View more on Code Climate.

[roiLeo]

✅ let's move on

[roiLeo]

wfm too, might need to wrap Story in grid layout

[yangwao]

pay 80 usd

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $80 @ 24.65 USD/KSM ~ 3.245 $KSM
🧗 EzGc4s9PgCPx1YnF3fqzhLzVHpHMTL4LWPScwpDrR8JKgSU
🔗 0x9ab254460bf51eabb19888b2e20f862217adcb795c02dcbf80e3f73ffd42ff58

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