Skip to content

style(tangle-dapp): Improve mobile responsiveness#2657

Merged
drewstone merged 16 commits intodevelopfrom
yuri/mobile-responsiveness-fixes
Nov 17, 2024
Merged

style(tangle-dapp): Improve mobile responsiveness#2657
drewstone merged 16 commits intodevelopfrom
yuri/mobile-responsiveness-fixes

Conversation

@yuri-xyz
Copy link
Copy Markdown
Contributor

@yuri-xyz yuri-xyz commented Nov 15, 2024

Summary of changes

Provide a detailed description of proposed changes.

  • 🔧 Improved the code & styling of the modal components to have a more standardized modal interface.
  • 🎨 Improved the responsiveness of all modals, and added mobile-friendly positioning & animations (ex. they now slide up from the bottom and are located on the bottom of the screen instead of the center for mobile viewports).
  • 🎨 Improved the design of the Bridge page and made the UI a bit more intuitive. For example, now the dropdown icon no longer appears if there's only one chain option.
  • 🎨 Improved the responsiveness of the Liquid Staking page.

Proposed area of change

Put an x in the boxes that apply.

  • apps/tangle-dapp
  • apps/tangle-cloud
  • libs/tangle-shared-ui
  • libs/webb-ui-components

Associated issue(s)

Specify any issues that can be closed from these changes (e.g. Closes #233).

Screen Recording

If possible provide screenshots and/or a screen recording of proposed change.

modal-responsiveness.mp4

@yuri-xyz yuri-xyz self-assigned this Nov 15, 2024
@netlify
Copy link
Copy Markdown

netlify Bot commented Nov 15, 2024

Deploy Preview for tangle-dapp ready!

Name Link
🔨 Latest commit a2f8ca0
🔍 Latest deploy log https://app.netlify.com/sites/tangle-dapp/deploys/673940ae670e950008a30810
😎 Deploy Preview https://deploy-preview-2657--tangle-dapp.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 configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented Nov 15, 2024

Deploy Preview for tangle-cloud ready!

Name Link
🔨 Latest commit a2f8ca0
🔍 Latest deploy log https://app.netlify.com/sites/tangle-cloud/deploys/673940ae4407da00080c878b
😎 Deploy Preview https://deploy-preview-2657--tangle-cloud.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 configuration.

@yuri-xyz yuri-xyz changed the title refactor(tangle-dapp): Improve mobile responsiveness style(tangle-dapp): Improve mobile responsiveness Nov 17, 2024
@yuri-xyz yuri-xyz marked this pull request as ready for review November 17, 2024 01:09
@drewstone
Copy link
Copy Markdown
Contributor

How do we get nomination label (or bridge or restaked, etc) into the top navbar row?

@yuri-xyz
Copy link
Copy Markdown
Contributor Author

How do we get nomination label (or bridge or restaked, etc) into the top navbar row?

@drewstone The breadcrumbs I think its better to leave them under for now, the thing is it does look better above but breadcrumbs get wide so it'll look awkward in some cases or run out of space, and also it's complex to refactor it that way

@drewstone drewstone merged commit b8f05eb into develop Nov 17, 2024
@drewstone drewstone deleted the yuri/mobile-responsiveness-fixes branch November 17, 2024 13:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[TASK] Improve mobile responsiveness

2 participants