feat: Collection description long text wrap #5383

Jarsen136 · 2023-03-26T09:01:35Z

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 Collection description long text wrap #5374
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.

As we also have a markdown format of the description, I have to put the see more button under the description section.

kodabot · 2023-03-26T09:01:39Z

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

netlify · 2023-03-26T09:01:40Z

✅ Deploy Preview for koda-nuxt ready!

Name	Link
🔨 Latest commit	`e0db4c1`
🔍 Latest deploy log	https://app.netlify.com/sites/koda-nuxt/deploys/6421ed688b5caf0008ded3ca
😎 Deploy Preview	https://deploy-preview-5383--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.

exezbcz · 2023-03-26T10:20:18Z

I think we can show more words

Also is possible that the see more links in on the same line at the end of sentence? like on rarible/opensea?
can you add underline please

Jarsen136 · 2023-03-26T10:36:46Z

I think we can show more words

OK, It would show more words now.

Also is possible that the see more links in on the same line at the end of sentence? like on rarible/opensea?

I have no idea to make it at the end of the sentence now. Because we also have a markdown format of the description, I have to put the see more button under the description section.

can you add underline please

Underline was added.

exezbcz · 2023-03-26T10:45:41Z

@Jarsen136 nice!

last changes

different hover effect - from k-grey to either black or white, based on the mode

can you put the link to the left?

Jarsen136 · 2023-03-26T10:56:47Z

last changes

different hover effect - from k-grey to either black or white, based on the mode
can you put the link to the left?

✅ Done

exezbcz · 2023-03-26T12:00:45Z

I forgot to mention also the option to see less once you expand the description :D

can you add that please as well, sorry for that

Jarsen136 · 2023-03-26T13:23:00Z

That's OK. Will check later

Jarsen136 · 2023-03-26T15:31:37Z

I forgot to mention also the option to see less once you expand the description :D can you add that please as well, sorry for that

✅ Done

exezbcz · 2023-03-26T15:52:51Z

yes, works good

the button is activated even in the middle of the screen - can you make the hover area contrained only to the button/text

Jarsen136 · 2023-03-26T16:02:26Z

yes, works good

the button is activated even in the middle of the screen - can you make the hover area contrained only to the button/text !

Fixed

vikiival

Otherwise good

vikiival · 2023-03-26T20:10:25Z

components/collection/CollectionInfo.vue

+
+const toggleSeeAllDescription = () => {
+  seeAllDescription.value = !seeAllDescription.value
+}
+
+const hasSeeAllDescriptionOption = computed(() => {
+  return (
+    (collectionInfo.value?.meta?.description?.length || 0) >
+    DESCRIPTION_MAX_LENGTH
+  )
+})
+
+const visibleDescription = computed(() => {
+  const desc = collectionInfo.value?.meta?.description
+
+  return (
+    (!hasSeeAllDescriptionOption.value || seeAllDescription.value
+      ? desc
+      : desc?.slice(0, DESCRIPTION_MAX_LENGTH)
+    )?.replaceAll('\n', '  \n') || ''
+  )
+})
+
 const { stats } = useCollectionDetails({ collectionId: collectionId.value })


, Would move

It into the component

50 via max Len prop it would se available else where

Do you mean moving these parts into markdown component? If so, PR #5366 should be merged firs, then we could do the refactor.

Lets do it in other PR

roiLeo

DescriptionWrapper is sitting in the corner :(

Not confiant about this "link" button variant, I would replace it with stylised <a /> or create is-text equivalent

Jarsen136 · 2023-03-27T17:03:32Z

DescriptionWrapper is sitting in the corner :(

Thanks for reminding me of it. I think we are about to remove this component after the recent collection redesign as it does not meet our requirements anymore. I will create a new markdown wrapper component.

Not confiant about this "link" button variant, I would replace it with stylised <a /> or create is-text equivalent

Good idea. I have wrapped it with is-text class.

vikiival · 2023-03-27T19:24:51Z

@Jarsen136 please fix deepscan and we can continue

codeclimate · 2023-03-27T19:24:53Z

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

View more on Code Climate.

Jarsen136 · 2023-03-28T02:22:14Z

@Jarsen136 please fix deepscan and we can continue

It's fixed after merging main branch.

vikiival · 2023-03-28T13:04:35Z

pay 20 usd

yangwao · 2023-03-28T18:38:00Z

pay 20 usd

yangwao · 2023-03-28T18:38:32Z

pay 20 usd

yangwao · 2023-03-28T18:38:44Z

😍 Perfect, I’ve sent the payout
💵 $20 @ 32.46 USD/KSM ~ 0.616 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0x769bb7a7ea1431240d2bd8302b89bc2bc614f2906d874c9de9b648ae7cd05b3d

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

feat: Collection description long text wrap

9e1939b

Jarsen136 requested a review from a team as a code owner March 26, 2023 09:01

Jarsen136 requested review from preschian and vikiival and removed request for a team March 26, 2023 09:01

fix: underline button

cd9a94b

fix: show more button style

1c3dca2

fix: show less desc

4133ba3

fix: button area

0c78f4e

exezbcz added the S-visual-ok-✅ label Mar 26, 2023

vikiival reviewed Mar 26, 2023

View reviewed changes

roiLeo reviewed Mar 27, 2023

View reviewed changes

fix: is-text NeoButton

26aecb7

vikiival approved these changes Mar 27, 2023

View reviewed changes

Merge branch 'main' into issue-5374

e0db4c1

preschian approved these changes Mar 28, 2023

View reviewed changes

vikiival merged commit 37a2cbb into kodadot:main Mar 28, 2023

Jarsen136 mentioned this pull request Mar 28, 2023

Revisit failed pull requests payouts #5122

Closed

yangwao added the paid pull-request has been paid label Mar 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Collection description long text wrap #5383

feat: Collection description long text wrap #5383

Jarsen136 commented Mar 26, 2023

kodabot commented Mar 26, 2023

netlify bot commented Mar 26, 2023 •

edited

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

vikiival left a comment

vikiival Mar 26, 2023

vikiival Mar 26, 2023

Jarsen136 Mar 27, 2023

vikiival Mar 27, 2023

roiLeo left a comment

Jarsen136 commented Mar 27, 2023 •

edited

vikiival commented Mar 27, 2023

codeclimate bot commented Mar 27, 2023

Jarsen136 commented Mar 28, 2023

vikiival commented Mar 28, 2023

yangwao commented Mar 28, 2023

yangwao commented Mar 28, 2023

yangwao commented Mar 28, 2023

feat: Collection description long text wrap #5383

feat: Collection description long text wrap #5383

Conversation

Jarsen136 commented Mar 26, 2023

PR Type

Context

Before submitting pull request, please make sure:

Optional

Had issue bounty label?

Community participation

Screenshot 📸

kodabot commented Mar 26, 2023

netlify bot commented Mar 26, 2023 • edited

✅ Deploy Preview for koda-nuxt ready!

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

exezbcz commented Mar 26, 2023

Jarsen136 commented Mar 26, 2023

vikiival left a comment

Choose a reason for hiding this comment

vikiival Mar 26, 2023

Choose a reason for hiding this comment

vikiival Mar 26, 2023

Choose a reason for hiding this comment

Jarsen136 Mar 27, 2023

Choose a reason for hiding this comment

vikiival Mar 27, 2023

Choose a reason for hiding this comment

roiLeo left a comment

Choose a reason for hiding this comment

Jarsen136 commented Mar 27, 2023 • edited

vikiival commented Mar 27, 2023

codeclimate bot commented Mar 27, 2023

Jarsen136 commented Mar 28, 2023

vikiival commented Mar 28, 2023

yangwao commented Mar 28, 2023

yangwao commented Mar 28, 2023

yangwao commented Mar 28, 2023

netlify bot commented Mar 26, 2023 •

edited

Jarsen136 commented Mar 27, 2023 •

edited