Challenge Overview
Welcome to $800 Living Progress - WWF - AngularJS App Fixes F2F Challenge
For this F2F we need your help fixing some issues on provided Living Progress - WWF AngularJS app to follow original HTML/CSS/JS UI Prototype. On some tasks, we also need your help update and adding some new screens to the Living Progress - WWF - AngularJS app.
This F2F is subjective - so the first solution that the client likes and fulfill the required updates will win. We will consider all submissions until a the winner is declared.
Downloadable Files
https://drive.google.com/drive/folders/0B31nrwic_6z0eEo0Sm1JcWFWUXM?usp=sharing
WWF-AngularJS.zip - AngularJS App as base updates
WWF-UI-Prototype.zip - Original WWF UI Prototype
Storyboard.zip - Storyboard for Updated Look
F2F Requirements
A). Consistency with Existing UI Prototype
Notes: For these issues below please compare provided AngularJS App and existing Prototype to check the issues
General
- Buttons/Links need display pointer cursor
- Remove the notification on the bottom screen
- Console error, after go to some pages. You’ll see console error on Developer Tools chrome. - Please fix the error across the pages, click around on some pages to see the error
- On Register page Dropdown missing the arrow
1) Login page
http://imgur.com/pcxaP65
- Login page should match with provided prototype. http://imgur.com/bJNiQUQ
- Top area and form width need follow existing prototype
- Need remove the top border
- Copyright need follow existing prototype
2) Search Data
- Go to this page from another page. You’ll see multi-dropdown form breaking.
3) Alert Detail
- 'Comments (9)' sections missed.
- User image not displayed. https://gyazo.com/685c8c2ce79c868eedfbdadf1f72a303
- Collaborators tab should display Querties http://imgur.com/0H9nZk2
4) Dashboard
- In 'Trends in' section, chart should not break when we toggling annual and month tab http://imgur.com/wmuzuk9
5) Profile page
- Should load if we click on name after login. Now guest only loading register page.
B). Dashboard Updates
- Implement a news feed in the top right component on the web site which currently says “Notifications”.
- Please change the section header from “Notification” to “News”.
- In this section, create AngularJS RSS news feed which queries Google News for the following topics: “illegal fishing”, “IUU fishing”
- Use scrollbar for longer rows
- Remove the “See All Notifications” text at the bottom of the section.
- Remove the Search Bar at the top of the page.
- Remove search for help inputs, guide, refresh and manage buttons. (Important: Apply to all pages)
- Remove Notification with bell icons on top right of page. (Important: Apply to all pages)
C). Create some new screens
1). Landing Page
Screenshot: Extra-Screens/00 - Landing Page.jpg
- On main navigation, replace Forum with News menu
- Keep other menu like existing prototype
2). My Profile
Screenshot: Extra-Screens/01 - My Profile - admin button.jpg
- User landed to this page from top right menu
- Click the user thumbnail need load My Profile screen
- Add new “+ Admin” button that will that user to NEW Admin page explained below
- Not included in storyboard, create new “Public Profile View” button before the “+ Admin”. This button will take user to Public Profile screen explained below
3). Admin Page
Screenshot: Extra-Screens/02_1 - Admin Page.jpg
- This is Admin Page screen look
- Match fields like storyboard content
- We need simulate the confirmation modal window after click save button (Screenshot: Extra-Screens/02_2 - Admin Page - Confirmation.jpg)
4). Public Profile Screen
Screenshot: Extra-Screens/05 - User Profile Public.jpg
- This is Public User Profile
- User see this page after click “Public Profile” button from My Profile page
- User profile placed on the left side
- Send Invitation button placed below user description
- Contact information on the right side
5). Error Screens
Database Error
Screenshot: Extra-Screens/06_1 - Database error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom
404 Error Screen
Screenshot: Extra-Screens/06_2 - 404 error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom
HTTP Error Screen
Screenshot: Extra-Screens/06_3 - HTTP error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom
Let us know if you have any questions.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
F2F GUIDELINES
We will review submissions as they are submitted! Pay attention to Forum activity!
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Please let us know if you have questions or need clarification on some things
Thank you
For this F2F we need your help fixing some issues on provided Living Progress - WWF AngularJS app to follow original HTML/CSS/JS UI Prototype. On some tasks, we also need your help update and adding some new screens to the Living Progress - WWF - AngularJS app.
Final Submission Guidelines
IMPORTANTThis F2F is subjective - so the first solution that the client likes and fulfill the required updates will win. We will consider all submissions until a the winner is declared.
Downloadable Files
https://drive.google.com/drive/folders/0B31nrwic_6z0eEo0Sm1JcWFWUXM?usp=sharing
WWF-AngularJS.zip - AngularJS App as base updates
WWF-UI-Prototype.zip - Original WWF UI Prototype
Storyboard.zip - Storyboard for Updated Look
F2F Requirements
A). Consistency with Existing UI Prototype
Notes: For these issues below please compare provided AngularJS App and existing Prototype to check the issues
General
- Buttons/Links need display pointer cursor
- Remove the notification on the bottom screen
- Console error, after go to some pages. You’ll see console error on Developer Tools chrome. - Please fix the error across the pages, click around on some pages to see the error
- On Register page Dropdown missing the arrow
1) Login page
http://imgur.com/pcxaP65
- Login page should match with provided prototype. http://imgur.com/bJNiQUQ
- Top area and form width need follow existing prototype
- Need remove the top border
- Copyright need follow existing prototype
2) Search Data
- Go to this page from another page. You’ll see multi-dropdown form breaking.
3) Alert Detail
- 'Comments (9)' sections missed.
- User image not displayed. https://gyazo.com/685c8c2ce79c868eedfbdadf1f72a303
- Collaborators tab should display Querties http://imgur.com/0H9nZk2
4) Dashboard
- In 'Trends in' section, chart should not break when we toggling annual and month tab http://imgur.com/wmuzuk9
5) Profile page
- Should load if we click on name after login. Now guest only loading register page.
B). Dashboard Updates
- Implement a news feed in the top right component on the web site which currently says “Notifications”.
- Please change the section header from “Notification” to “News”.
- In this section, create AngularJS RSS news feed which queries Google News for the following topics: “illegal fishing”, “IUU fishing”
- Use scrollbar for longer rows
- Remove the “See All Notifications” text at the bottom of the section.
- Remove the Search Bar at the top of the page.
- Remove search for help inputs, guide, refresh and manage buttons. (Important: Apply to all pages)
- Remove Notification with bell icons on top right of page. (Important: Apply to all pages)
C). Create some new screens
1). Landing Page
Screenshot: Extra-Screens/00 - Landing Page.jpg
- On main navigation, replace Forum with News menu
- Keep other menu like existing prototype
2). My Profile
Screenshot: Extra-Screens/01 - My Profile - admin button.jpg
- User landed to this page from top right menu
- Click the user thumbnail need load My Profile screen
- Add new “+ Admin” button that will that user to NEW Admin page explained below
- Not included in storyboard, create new “Public Profile View” button before the “+ Admin”. This button will take user to Public Profile screen explained below
3). Admin Page
Screenshot: Extra-Screens/02_1 - Admin Page.jpg
- This is Admin Page screen look
- Match fields like storyboard content
- We need simulate the confirmation modal window after click save button (Screenshot: Extra-Screens/02_2 - Admin Page - Confirmation.jpg)
4). Public Profile Screen
Screenshot: Extra-Screens/05 - User Profile Public.jpg
- This is Public User Profile
- User see this page after click “Public Profile” button from My Profile page
- User profile placed on the left side
- Send Invitation button placed below user description
- Contact information on the right side
5). Error Screens
Database Error
Screenshot: Extra-Screens/06_1 - Database error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom
404 Error Screen
Screenshot: Extra-Screens/06_2 - 404 error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom
HTTP Error Screen
Screenshot: Extra-Screens/06_3 - HTTP error screen.jpg
- Create this is stand alone screen. Put not how to access to page from your submission.
- Error message placed on top
- Email and Message text placed on the bottom
Let us know if you have any questions.
Browsers Requirements
- IE11
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser
F2F GUIDELINES
We will review submissions as they are submitted! Pay attention to Forum activity!
We will review ALL submissions until we declare a winner based on
1) Task Requirements
2) Client is happy with how it looks/works
3) Time the solution was submitted
Please let us know if you have questions or need clarification on some things
Thank you