#5167 breadcrumbs for min and max price

[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 Price in breadcrumbs and sidebar #5167
• 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 #5167 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	809a81e
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/6423a570888d3b00086abb27
😎 Deploy Preview	https://deploy-preview-5348--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.

[prachi00]

Known issue:

with fluid layout, the content cuts off when value is 2 digits or 3 digits

@exezbcz Also, I did not disable the apply button as there were issues with keeping track of the previous value as well and when to make it enable, are you okay with how it works right now?

[exezbcz]

@prachi00

the design is the same, we can collapse the price into one breadcrumb - it will say something like: min 15 KSM, max 20 KSM

• can you please make it like that

it wont fit more digits?
there could be less padding

Yeah, best solution would be to put it on second row and make the apply button smaller

• layout similar to this
  

soo no disabled button when filter is applied?

• that is pretty nice feature because otherwise you could think that you can click apply again

[prachi00]

@exezbcz do you mean instead of 2 breadcrumbs, there should be 1 for min and max?
I think it should be two because you can remove one of them and just have stuff for max to show up, for example right now, you can do max 20ksm without giving any value to min, and still click on apply, so in this case only max breadcrumb would show up

[vikiival]

Code looks oki

Waiting for @exezbcz

[exezbcz]

@prachi00 you can click apply when you input only one parameter. - there will be either min, or max - when you apply both, there is min: ... max: ....
The thing why grouping the breadcrumbs is better is that you can than close both with one click.

[exezbcz]

@vikiival , yeah, it's mostly okay from my point of view. Still, one specification is missing, which is to make the button inactive when you click 'Apply' and the filter is applied. So, I'm not sure if we should move on and make a follow-up issue.

[vikiival]

@vikiival , yeah, it's mostly okay from my point of view. Still, one specification is missing, which is to make the button inactive when you click 'Apply' and the filter is applied. So, I'm not sure if we should move on and make a follow-up issue.

you can click apply when you input only one parameter.

I think this is imo fine

[vikiival]

pay 30 usd

[vikiival]

Nice job @prachi00 ^-^

[yangwao]

😍 Perfect, I’ve sent the payout
💵 $30 @ 32.7 USD/KSM ~ 0.917 $KSM
🧗 EzGc4s9PgCPx1YnF3fqzhLzVHpHMTL4LWPScwpDrR8JKgSU
🔗 0x1f39b4485c7acd962d585ea6eb6f9f0fca49a41e5372175c49af3cb982c5f2d2

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

[prachi00]

@vikiival we can merge this one

[codeclimate]

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

View more on Code Climate.