Update Address overview to fit on mobile

[AlexZhenWang]

As a user, I want the address overview to be responsive, so that I can view it on my mobile.

Replication steps

1. In mobile view, click ‘Explore’ > ‘Transaction’

2. Then click an address link in the From or To column

The address overview page has images overlapping with text and poor formatting. Please update it, to make it match the attached design.

Prerequisites

You will need to know basic Javascript (jQuery) and css (scss) to do this task. The knowledge of nunjucks will be helpful.

Guidelines & Hints

For the Transactions section at the end of the page, we always want to show the scrollbar, so the user knows in advance that there is more data to be seen.

You can check the code used in the Menu -> Transactions page.

The address overview page is located at: views/pages/address-detail.njk.

The current scrollbar is implemented on views/pages/tx-list.njk (look for className scroll-bar-wrapper).

The code to handle the scrollbar is located at: src/assets/js/mobile/scroll-bar.js (you should not have to change this).

Add any other necessary mobile css to _mobile.scss to match the design.

Please make sure your code doesn’t affect the desktop version.

We do not want to change the HTML structure.

We also recommend putting all mobile related styling code to the _mobile.scss file.

Resources

Repository link

https://github.com/cennznet/explorer/tree/master

This ‘explorer’ repository contains several projects.

The project you need to work on is in the ‘portal’ folder.

Design:

Please refer to the InVision prototype here: UNcover Bounty Tasks

You will need to request access permission to access inspect mode on the InVision prototype.

Screenshot of intended design also attached.

*Please note there may be some inconsistencies with the InVision prototype and the live CSS. If this occurs, please use the styles defined by the exisiting CSS.

Get Up & Running

Please check the README and CONTRIBUTING files:

https://github.com/cennznet/explorer/blob/master/portal/README.md https://github.com/cennznet/explorer/blob/master/portal/CONTRIBUTING.md

Test & Verify Your Changes

Mobile Devices

Ensure your changes work on:

• The latest Android and iPhones phones.
• Chrome, Safari and FireFox responsive views.

Ensure your changes work as expected and look exactly like the attached design.

Also ensure that the changes do not introduce bugs or break the desktop version.

Expected Outcome

Given user navigates to address overview page using mobile device

When user navigates to address section

Then user should see QR code with address

And user should see full address

And user should see copy symbol

Given user navigates to address overview page using mobile device

When user navigates to address section

And user clicks the copy symbol

Then user should have address copied to the clipboard and a tooltip appears

Given user navigates to address overview page using mobile device

When user navigates to assets section

Then user should see all assets stored in that address

Given user navigates to address overview page using mobile device

When user navigates to assets section

And user clicks the buttons on the left top side of the assets section

Then user should see the assets displaying style changes

Given user navigates to address overview page using mobile device

When user navigates to transactions section

Then user should see time

And user should see address

And user should see incoming

And user should see outgoing

And user should see type

And user should see status

And user should see balance

Given user navigates to address overview page using mobile device

When user navigates to transactions section

And user clicks on arrow sign at the end of the line

Then user should see expanded section

And user should see block

And user should see transaction

And user should see size

And user should see fee

Given user navigates to address overview page using mobile device

When user navigates to transactions section

Then user should see transaction type selection dropdown

Given user navigates to address overview page using mobile device

When user navigates to transactions section

Then user should see transaction flow selection dropdown

Given user navigates to address overview page using mobile device

When user navigates to transactions section

Then user should see start date selection dropdown

Given user navigates to address overview page using mobile device

When user navigates to transactions section

Then user should see end date selection dropdown

If you have any questions, please don’t hesitate to contact our team on Slack.

Current Screenshots

–––––––––––––––––––––––––––––––––––––––––––

Designed Screen (how your design should look)

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 200.0 DAI (200.0 USD @ $1.0/DAI) attached to it as part of the Centrality CENNZnet fund.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $130,925.04 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work has been started.

These users each claimed they can complete the work by 2 years, 2 months ago.
Please review their action plans below:

1) iamonuwa has been approved to start work.

Quick fix for me, I'll fix and test on multiple devices. Expect turn around this night
2) ashokk1990 has applied to start work (Funders only: approve worker | reject worker).

I will make overview responsive so that It will have great UX for users on mobile.
3) cassidypignatello has applied to start work (Funders only: approve worker | reject worker).

I plan to modify the CSS where needed to make it responsive and match the expected outcome exactly. I also plan to work with Flexbox so it looks good on all screens and devices.
4) dexterstat has applied to start work (Funders only: approve worker | reject worker).

I am a webdeveloper for 10 years. I can do any work in HTML, CSS and jQuery. Have multiple projects finished and i would like to make this page responsive. Thank you!
5) bdesselle has applied to start work (Funders only: approve worker | reject worker).

Work Plan: Since the issue is pretty straight forward I'll keep my plans straight forward as well. I plan to implement media queries following the mock-up provided, I'll also probably add a few more media queries to be a little more thorough with the responsiveness (eg. tablet and larger cellular devices).

Learn more on the Gitcoin Issue Details page.

[gitcoinbot]

@iamonuwa Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• reminder (3 days)
• escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[iamonuwa]

@AlexZhenWang please take a look and let me know

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

Work for 200.0 DAI (200.0 USD @ $1.0/DAI) has been submitted by:

1. @iamonuwa

@centrality-bounties please take a look at the submitted work:

• PR by @iamonuwa

---

• Learn more on the Gitcoin Issue Details page
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $128,739.70 more funded OSS Work available on the Gitcoin Issue Explorer

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

The funding of 200.0 SAI (200.0 USD @ $1.0/SAI) attached to this issue has been approved & issued to @iamonuwa.

• Learn more on the Gitcoin Issue Details page
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $103,728.58 more funded OSS Work available on the Gitcoin Issue Explorer