No funded issue found.
Check out the Issue Explorer
Be the OSS Funding you wish to see in the world.
Looking to fund some work? You can submit a new Funded Issue here .
Time left
Opened
Issue Type
Workers Auto Approve
Project Type
Time Commitment
Experience Level
Permissions
Accepted
Reserved For
Update Assets page to fit on mobile
cennznet
HTML, CSS, JavaScript
As a user I want to see full assets page when I’m on my mobile.
# Replication steps
1. Click 'Assets' in mobile view
The assets page has poor formatting. Please update to make it match the attached design.
Please ensure:
- All the columns can be seen, including: (symbol, volume, decimal, type).
- The items in the ‘Type’ dropdown are visible.
Currently a different ‘Asset’ and/or ‘Type’ dropdown item can be set and the results can be filtered when the ‘Filter’ button is clicked.
# Prerequisites
You will need to know basic Javascript (jQuery) and css (scss) to do this task.
# 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’ directory.
# Design
Please refer to the InVision prototype here: [UNcover Bounty Tasks](https://projects.invisionapp.com/share/7TUN9MQY259#/screens/391426174)
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
# Guidelines & Hints
The main reason why the information looks poor on mobile is because it was coded up using an HTML Table Tag.
We do not want to change the HTML structure.
The main thing to do here is to add a horizontal scrollbar and make the table data scrollable.
We also want to always show the scrollbar, so the user knows in advance that there is more data to be seen.
The assets page is located at: views/pages/token-list.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 reflect the design (hint: see className mobile-wrapper-tx-table.
The transaction’s page (pages/tx-list.njk) filter controls have already been styled so please refer there for guidance on how to style the assets page’s filter controls.
# 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 assets page using mobile device
When user navigates to the assets section
Then user should see symbol
And user should see volume
And user should see decimal
And user should see type
Given user navigates to assets page using mobile device
When user navigates to the assets filter section
And user clicks on Assets or Type filter
Then user should see native scrollbar
Given user navigates to assets page using mobile device
When user navigates to the assets filter section
And user selects filter
Then user should see filtered results
Given user navigates to assets page using desktop
When user navigates to the assets section
Then user should see standard full screen UI
## If you have any questions, please don’t hesitate to contact our team on [Slack](https://join.slack.com/t/centralitydev/shared_invite/enQtNjk5NjE1MDI5NjgzLWJlOTM2NjMxNTMyZDY0OGM0MjY2YjQ1YjJkNTk2ZTIzNTFmYmM3OTIwZWE3NzNhMzE4Mjg4MmY1YzBiZDk0ZDE).
Current screenshots
–––––––––––––––Designed Screen (how your design should look)
Setup your profile
Tell us a little about you:
Skills
No results found for [[search]] .
Type to search skills..
Bio Required
[[totalcharacter]] / 240
Are you currently looking for work?
[[ option.string ]]
Next
Setup your profile
Our tools are based on the principles of earn (💰), learn (📖), and meet (💬).
Select the ones you are interested in. You can change it later in your settings.
I'm also an organization manager looking for a great community.
Back
Next
Save
Enable your organization profile
Gitcoin products can help grow community around your brand. Create your tribe, events, and incentivize your community with bounties. Announce new and upcoming events using townsquare. Find top-quality hackers and fund them to work with you on a grant.
These are the organizations you own. If you don't see your organization here please be sure that information is public on your GitHub profile. Gitcoin will sync this information for you.
Select the products you are interested in:
Out of the box you will receive Tribes Lite for your organization. Please provide us with a contact email:
Email
Back
Save
