Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: collection on mobile is broken #5473

Merged
merged 2 commits into from
Apr 3, 2023
Merged

fix: collection on mobile is broken #5473

merged 2 commits into from
Apr 3, 2023

Conversation

Jarsen136
Copy link
Contributor

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

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

Screenshot 📸

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

image

image

@Jarsen136 Jarsen136 requested a review from a team as a code owner April 2, 2023 05:39
@Jarsen136 Jarsen136 requested review from roiLeo and daiagi and removed request for a team April 2, 2023 05:39
@kodabot
Copy link
Collaborator

kodabot commented Apr 2, 2023

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

@netlify
Copy link

netlify bot commented Apr 2, 2023 •
edited

✅ Deploy Preview for koda-canary ready!

Name Link
🔨 Latest commit b96c047
🔍 Latest deploy log https://app.netlify.com/sites/koda-canary/deploys/642acd9ad7f936000874a3fb
😎 Deploy Preview https://deploy-preview-5473--koda-canary.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@yangwao yangwao added the S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked label Apr 2, 2023
daiagi
daiagi requested changes Apr 3, 2023
View reviewed changes
Copy link
Contributor

@daiagi daiagi left a comment •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this brakes the design.
it needs to remain 2 columns on mobile.

from figma:

image

@Jarsen136
Copy link
Contributor Author

this brakes the design. it needs to remain 2 columns on mobile.

from figma:

image

For 2 columns struct, the text would overflow out of the screen. I guess placing them in one column on mobile could contain more text content. WDYT @exezbcz
image

@exezbcz
Copy link
Member

exezbcz commented Apr 3, 2023

@Jarsen136 yes. that is better, I made it like that to make it simpler to convert the desktop design to mobile.

In this case I dont mind that, but thanks for noticing! @daiagi

@roiLeo
Copy link
Contributor

roiLeo commented Apr 3, 2023 •
edited

Tested on pixel

Before After
Screenshot_20230403-091059.png Screenshot_20230403-091114.png

roiLeo
roiLeo reviewed Apr 3, 2023
View reviewed changes
components/collection/CollectionInfo.vue Outdated
@@ -19,15 +19,15 @@
@click.native="toggleSeeAllDescription" />
</div>
<div>
<div class="columns is-mobile">
<div class="column">
<div class="columns pt-3">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't add padding on columns/column, wrap it in a new div instead

Copy link
Contributor Author

@Jarsen136 Jarsen136 Apr 3, 2023 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this component, I need to overwrite some padding on column, so I guess I could not wrap it in a new div. wdyt

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please don't add spacing in columns/column class. If you want to add spacing then create a inner div that wrap content.
If you don't want spacing you can use gapless helper or change columns to flex.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I have changed columns to flex.

@vikiival
Copy link
Member

vikiival commented Apr 3, 2023

Sooo last fixes and LG (let's go/ life's good)(choose for yourself) 🚀

@codeclimate
Copy link

codeclimate bot commented Apr 3, 2023

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

View more on Code Climate.

@yangwao
Copy link
Member

yangwao commented Apr 3, 2023

pay 30 usd

@yangwao
Copy link
Member

yangwao commented Apr 3, 2023

😍 Perfect, I’ve sent the payout
💵 $30 @ 32.69 USD/KSM ~ 0.918 $KSM
🧗 Caiv9TbPz68q5dC8EcHu5xKYPRnremimGzqmEejDFNpWWLG
🔗 0x6a9c557c89c010eb06b670ed682b642500ce4bc3d3df71d2b65bf6485845166c

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

@yangwao yangwao added the paid pull-request has been paid label Apr 3, 2023
@yangwao yangwao merged commit b6fbcab into kodadot:main Apr 3, 2023
16 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@roiLeo roiLeo roiLeo left review comments

@vikiival vikiival vikiival left review comments

@daiagi daiagi daiagi approved these changes

Assignees
No one assigned
Labels
paid pull-request has been paid S-visual-ok-✅ S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Collection on mobile 📱 is broke
7 participants
@Jarsen136 @kodabot @exezbcz @roiLeo @vikiival @yangwao @daiagi