Gallery card update

[AndreyGrin]

Hey, added requested styles (issue #230).
This is currently mock Price and EMOTE. Is it possible to add from back-end next params: hasPrice, price and number for EMOTE (this is amount of likes or so?). Implemented without https://vuesax.com/docs/components/Card.html#default. Check plz styles and let me know what do you think. I've added zoom animation for video previews as well to be consistent.

[yangwao]

Siiick! Like it!
I mean just manage to hide the tittle so it could roll over picture once there is hover.
For hasPrice, price cc @vikiival

[vikiival]

@AndreyGrin NFT has already field price field

hasPrice why ?

number for EMOTE
due to current architecture it's a bit complicated but we are working on migration

However, if you want to be make the consistent put there something like emoteCount field I will update it later

[AndreyGrin]

@vikiival hasPrice used on ntf-item page but actually, just price will be enough.
@yangwao changed animation. Do you consider mobile version as well? For mobile, I think, it better to leave NFT title visible.

[vikiival]

For mobile, I think, it better to leave NFT title visible.

Yeah It wold be perfect to leave it visible (you have no hover on mobile)

[vikiival]

@AndreyGrin I am not sure if it's because of this pr but detail seems a bit broken

[AndreyGrin]

@vikiival last commit should prevent any impact on other pages

[AndreyGrin]

Guys, if you confirm design implementation, I will update code to support price and emoteCount params but it will make labels disappear until yours back-end will add it's part. Please confirm @yangwao

[yangwao]

Hey checking in.

Seems the search is gone?

Meanwhile please fetch recent main into your PR to avoid some conflicts in the merge.

[AndreyGrin]

main was up to date. Fixed styles and added a bit cleaner animation for sliding-up not title.

[yangwao]

Hey, can you re-check one more time? There was recent merge to the main, where you should see sort-filter in search d7eaa80

[yangwao]

oh found something weird semi-state.
https://user-images.githubusercontent.com/5887929/114833250-a8c1db00-9dcf-11eb-9f24-37375aacf8a0.mov

[yangwao]

@AndreyGrin NFT has already field price field

hasPrice why ?

number for EMOTE
due to current architecture it's a bit complicated but we are working on migration

However, if you want to be make the consistent put there something like emoteCount field I will update it later

Hey by this price should be there?
@vikiival will add emoteCount, so you can prepare it to be ready :)

[AndreyGrin]

Screen.Recording.2021-04-15.at.13.23.41.mov

in order to get rid of the animation glitch but to keep card structure same, applied overflow:hidden for the card in the gallery, but had to change animation for labels to show them in full.

[AndreyGrin]

Hey, @yangwao! Any news on the PR?

[vikiival]

Hey, @yangwao! Any news on the PR?

Hey @AndreyGrin please make sure that you are using correct prices for NFTs (there is field price on nft) and also conditionally render the emoteCount

[AndreyGrin]

@vikiival check comments to the code. I believe I use correct not props

[AndreyGrin]

@vikiival changed Price to use component

[yangwao]

Hey checking @AndreyGrin
I don't see any price here on this NFT on gallery view
https://deploy-preview-289--nftkodadot.netlify.app/rmrk/gallery

We would like close this so it can go to our 7k changelog

[vikiival]

We didn't project price from query. Pushed the fixed.

@yangwao /@AndreyGrin I would maybe remove USD value. But it's personal prefference

[yangwao]

Yeah, checking on rarible.
USD -> $ ?

This is from item detail.

But generally they strip it from gallery view.

I would remove it as well and leave it only for item detail

[yangwao]

huh wha's this 🗡️ 🥶
ok cant reproduce, seems some local glitch

[AndreyGrin]

@yangwao what exactly? Unit?

[yangwao]

let's merge it! gonna process payout!
I mean, if you @AndreyGrin are interested and be add value to the KodaDot NFT gallery,
I'm inviting you to KodaDot:Anteriors (Frontend stuff) channel https://t.me/joinchat/eyLAW64RKsNlZjVk - link expires in day