feat: carousel for resources on gallery detail #5751

preschian · 2023-04-21T10:44:48Z

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

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

PR Type

Bugfix
Feature
Refactoring

Context

Closes Make carrousel viewer for multi-resource NFTs #5603

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

Optional

I've tested it at </ksm/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.

Copilot Summary

`🤖 Generated by Copilot at f754fbe`

This pull request enhances the gallery item component to show the additional resources of the NFT in a carousel. It introduces a new custom type NftResources to represent the resources, and updates the useGalleryItem and useNft composables to handle the new type. It also modifies the GalleryItem.vue component to use the carousel and hide the fullscreen button if there are resources.

`🤖 Generated by Copilot at f754fbe`

To show more resources of an NFT
We added a carousel, you see
We used useNft
And changed ItemResources a bit
To make the types more consistent and pretty

…sel-for-resources

netlify · 2023-04-21T10:44:54Z

✅ Deploy Preview for koda-canary ready!

Name	Link
🔨 Latest commit	`311f491`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-canary/deploys/645677ba3497ec0008368a57
😎 Deploy Preview	https://deploy-preview-5751--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 settings.

reviewpad · 2023-04-21T10:45:17Z

AI-Generated Summary: This pull request introduces a carousel feature for the gallery component. It modifies three files, GalleryItem.vue, useGalleryItem.ts, and useNft.ts. The changes include adding a new carousel component with O-carousel and O-carousel-item in GalleryItem.vue, updating the item resources in useNft.ts, and handling the new resources and their sanitization in useGalleryItem.ts. The updated files now manage the resources and enable a functional carousel for displaying multiple media items in the gallery.

preschian · 2023-04-21T11:12:13Z

@exezbcz while waiting expected design use this temporarily?

Jarsen136

It looks strange that there is only one dot there.
https://deploy-preview-5751--koda-canary.netlify.app/ksm/gallery/13328844-54bbd380dc3baaa27b-EVRSOULS-Alchemist-00000783

components/gallery/GalleryItem.vue

exezbcz · 2023-04-21T12:01:50Z

@preschian yup, works

roiLeo

Hey I don't know if it's related but it's missing hover fullscreenn button on media

preschian · 2023-04-21T13:50:24Z

It looks strange that there is only one dot there.

Hey I don't know if it's related but it's missing hover fullscreenn button on media

noted, will check later. currently, the query seems didn't load on my end. stuck on loading

components/gallery/GalleryItem.vue

…sel-for-resources

preschian · 2023-04-23T02:01:38Z

Hey I don't know if it's related but it's missing hover fullscreenn button on media

seems like there is no hover style even on canary or production?

Jarsen136

otherwise lgtm

components/gallery/GalleryItem.vue

floyd-li · 2023-04-23T05:32:38Z

Hey I don't know if it's related but it's missing hover fullscreenn button on media

seems like there is no hover style even on canary or production?

yes it do have the fullscreen button, i added it lol

and this fullscreen preview has different behavior with current one. but i think it's okay to merge this pr first, it can done in a separate pr.

iShot_2023-04-23_13.25.36.mp4

floyd-li

lgtm

components/gallery/GalleryItem.vue

vikiival · 2023-04-23T13:27:24Z

noted, will check later. currently, the query seems didn't load on my end. stuck on loading

@preschian there was a service outage

Marck is unable to return any data rubick#256

roiLeo

otherwise lgtm

components/gallery/GalleryItem.vue

…sel-for-resources

exezbcz · 2023-04-29T16:16:02Z

full screen is not working how it should - missing button on hover and it triggers the full screen with a click on the img

floyd-li · 2023-04-30T05:24:13Z

full screen is not working how it should - missing button on hover and it triggers the full screen with a click on the img

yes. seems o-carousel got a default fullscreen behavior which is different to current. you may take a reference of #5321 i added.

…sel-for-resources

preschian · 2023-05-04T11:38:08Z

Hey I don't know if it's related but it's missing hover fullscreenn button on media

oohh, sorry I misread this, I thought it was about hover style. added now

exezbcz · 2023-05-04T13:12:13Z

functionality good - i will follow up with the stylign

components/gallery/GalleryItem.vue

codeclimate · 2023-05-06T15:52:52Z

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

View more on Code Climate.

vikiival · 2023-05-08T12:16:30Z

pay 70 usd

yangwao · 2023-05-08T12:16:43Z

😍 Perfect, I’ve sent the payout
💵 $70 @ 26.82 USD/KSM ~ 2.61 $KSM
🧗 DY4SQF2iD456tH89aQtz5wv1EV3BbSW8wKKuMcwbmXaj1pM
🔗 0xf9993bc082d1f157f175d8666a8b18a04a9b49ac868d8d23f95265e53fd31a30

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

yangwao · 2023-05-08T20:03:25Z

pay 70 usd

yangwao · 2023-05-08T20:03:38Z

😍 Perfect, I’ve sent the payout
💵 $70 @ 25.52 USD/KSM ~ 2.743 $KSM
🧗 DY4SQF2iD456tH89aQtz5wv1EV3BbSW8wKKuMcwbmXaj1pM
🔗 0xafecdedeca3088e06a577137aa6b44d365693d2cbf5e90bf4e3b2c1d89f0028e

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

preschian added 2 commits April 21, 2023 17:43

feat: carousel for resources

623291c

Merge branch 'main' of github.com:kodadot/nft-gallery into feat/carou…

f754fbe

…sel-for-resources

reviewpad bot added the small Pull request is small label Apr 21, 2023

chore: unused console

cc7966c

preschian marked this pull request as ready for review April 21, 2023 11:11

preschian requested a review from a team as a code owner April 21, 2023 11:11

preschian requested review from roiLeo and Jarsen136 and removed request for a team April 21, 2023 11:11

reviewpad bot added the waiting-for-review label Apr 21, 2023

Jarsen136 reviewed Apr 21, 2023

View reviewed changes

components/gallery/GalleryItem.vue Outdated Show resolved Hide resolved

roiLeo reviewed Apr 21, 2023

View reviewed changes

exezbcz mentioned this pull request Apr 21, 2023

Multi resource nfts carousel #5753

Open

floyd-li reviewed Apr 21, 2023

View reviewed changes

components/gallery/GalleryItem.vue Outdated Show resolved Hide resolved

yangwao mentioned this pull request Apr 22, 2023

Beta update #5769

Merged

preschian added 3 commits April 23, 2023 08:53

chore: scoped scss and show carousel on > 1

24206f9

chore: css class with props

115c106

Merge branch 'main' of github.com:kodadot/nft-gallery into feat/carou…

628f993

…sel-for-resources

preschian requested review from roiLeo, Jarsen136 and floyd-li April 23, 2023 02:03

Jarsen136 reviewed Apr 23, 2023

View reviewed changes

components/gallery/GalleryItem.vue Outdated Show resolved Hide resolved

floyd-li approved these changes Apr 23, 2023

View reviewed changes

components/gallery/GalleryItem.vue Outdated Show resolved Hide resolved

roiLeo reviewed Apr 24, 2023

View reviewed changes

components/gallery/GalleryItem.vue Outdated Show resolved Hide resolved

components/gallery/GalleryItem.vue Show resolved Hide resolved

preschian added 2 commits April 24, 2023 21:13

Merge branch 'main' of github.com:kodadot/nft-gallery into feat/carou…

7d5e5ae

…sel-for-resources

chore: remove duplicate scss vars and hasResources

d5c014f

roiLeo approved these changes Apr 24, 2023

View reviewed changes

Merge branch 'main' into feat/carousel-for-resources

98e793d

fix: use existing previewer

597fe5c

reviewpad bot added medium Pull request is medium and removed small Pull request is small labels May 4, 2023

Merge branch 'main' of github.com:kodadot/nft-gallery into feat/carou…

01a226a

…sel-for-resources

exezbcz added the S-visual-ok-✅ label May 4, 2023

roiLeo added the S-code-lgtm-✅ code review guild has reviewed this PR and it's code is approved label May 4, 2023

Jarsen136 approved these changes May 4, 2023

View reviewed changes

vikiival reviewed May 6, 2023

View reviewed changes

components/gallery/GalleryItem.vue Show resolved Hide resolved

Merge branch 'main' into feat/carousel-for-resources

311f491

vikiival merged commit 15b95b8 into main May 8, 2023

vikiival deleted the feat/carousel-for-resources branch May 8, 2023 12:16

yangwao added paid pull-request has been paid and removed paid pull-request has been paid labels May 8, 2023

yangwao added the paid pull-request has been paid label May 8, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: carousel for resources on gallery detail #5751

feat: carousel for resources on gallery detail #5751

preschian commented Apr 21, 2023 •

edited

Loading

netlify bot commented Apr 21, 2023 •

edited

Loading

reviewpad bot commented Apr 21, 2023

preschian commented Apr 21, 2023 •

edited

Loading

Jarsen136 left a comment

exezbcz commented Apr 21, 2023

roiLeo left a comment

preschian commented Apr 21, 2023

preschian commented Apr 23, 2023

Jarsen136 left a comment

floyd-li commented Apr 23, 2023

floyd-li left a comment

vikiival commented Apr 23, 2023

roiLeo left a comment

exezbcz commented Apr 29, 2023

floyd-li commented Apr 30, 2023

preschian commented May 4, 2023

exezbcz commented May 4, 2023

codeclimate bot commented May 6, 2023

vikiival commented May 8, 2023

yangwao commented May 8, 2023

yangwao commented May 8, 2023

yangwao commented May 8, 2023

feat: carousel for resources on gallery detail #5751

feat: carousel for resources on gallery detail #5751

Conversation

preschian commented Apr 21, 2023 • edited Loading

PR Type

Context

Before submitting pull request, please make sure:

Optional

Had issue bounty label?

Community participation

Screenshot 📸

Copilot Summary

🤖 Generated by Copilot at f754fbe

🤖 Generated by Copilot at f754fbe

netlify bot commented Apr 21, 2023 • edited Loading

✅ Deploy Preview for koda-canary ready!

reviewpad bot commented Apr 21, 2023

preschian commented Apr 21, 2023 • edited Loading

Jarsen136 left a comment

Choose a reason for hiding this comment

exezbcz commented Apr 21, 2023

roiLeo left a comment

Choose a reason for hiding this comment

preschian commented Apr 21, 2023

preschian commented Apr 23, 2023

Jarsen136 left a comment

Choose a reason for hiding this comment

floyd-li commented Apr 23, 2023

floyd-li left a comment

Choose a reason for hiding this comment

vikiival commented Apr 23, 2023

roiLeo left a comment

Choose a reason for hiding this comment

exezbcz commented Apr 29, 2023

floyd-li commented Apr 30, 2023

preschian commented May 4, 2023

exezbcz commented May 4, 2023

codeclimate bot commented May 6, 2023

vikiival commented May 8, 2023

yangwao commented May 8, 2023

yangwao commented May 8, 2023

yangwao commented May 8, 2023

preschian commented Apr 21, 2023 •

edited

Loading

`🤖 Generated by Copilot at f754fbe`

`🤖 Generated by Copilot at f754fbe`

netlify bot commented Apr 21, 2023 •

edited

Loading

preschian commented Apr 21, 2023 •

edited

Loading