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 Error page to fit on mobile
cennznet
HTML, CSS, JavaScript
As a user, when I do something I shouldn’t on my mobile, I should see an error page that fits the screen.
# Replication steps
1. Type: http://localhost:3000/xyz and press ‘enter’.
Or
1. Open the menu.
2. Click in the search box.
3. Enter the value: 100000000000000000000000000.
4. Press ‘enter’.
The desktop version of the error page is shown which is not mobile friendly.
# Prerequisites
You will need to know basic css for this task.
# 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 Error Page](https://projects.invisionapp.com/share/73TY7JHJHRY#/screens/391032476_Error)
You will need to request access permission to access inspect mode on the InVision prototype.
Screenshot of intended design also attached.
# 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 current system uses the ‘error or not-found’ template and English localised text from locals\en.json. These do not have to be changed.
You will have to add some custom mobile css to _mobile.scss.
# 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 uses search in dropdown menu
**When** user inputs invalid search parameter
**Then** user should see the error page that fits on a mobile screen
**Given** user uses the browser search bar
**When** user enters an invalid url
**Then** user should see the error page that fits on a mobile screen
**Given** user uses the system
**When** user triggers an error
**Then** user should see the error page that fits on a mobile screen
## 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 Screenshot
Designed Screen (what your design should look like)
[UNcover Bounty Tasks Error Page](https://projects.invisionapp.com/share/73TY7JHJHRY#/screens/391032476_Error)
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
