Challenge Overview
Welcome to CS Global Regulation Protocol Tablet Mobile Enhancement UI Prototype Challenge
This is continuation challenge to update existing UI prototype to support Responsive solution for tablet and mobile screen sizes.
The result of this prototype needs to implement best practice of responsive solution across required browsers.
Let’s discuss any questions you have on challenge forum
- For this prototype submission we need you stick with existing AngularJS version and Angular Bootstrap
- Grab existing UI Prototype from this gitlab repo: https://gitlab.com/Credit-S-RegHome
- As possible DO NOT override existing HTML codes, you must optimize the prototype to support tablet and mobile screen sizes
- All page must look sharp on Standard & Retina
- Use SCSS/SASS for the submission styling
- You must follow https://angular.io/guide/styleguide
- AngularJS Components must re-usable. Component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Your submission must follow Angular Coding guidelines
- Put clear comment/documentation for all AngularJS components
- All table datas need loaded by JSON.
- Create Routes that use proper naming with existing pages
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
Downloadable Files:
https://drive.google.com/open?id=15ivG84s4DTv--pf_NbKyHc2Phtql2SW2
Page Requirements
00). General Layout
a). TABLET VERSION
Screenshot: T01_0_Dashboard.png
- This is general application page look for each layout section on Tablet version
- Support tablet version for 768px - 1366px screen width
Header
- Header need to remain use fluid width
- You might need reduce quick search input to fit within tablet version
- Notice there’s no Welcome User text for tablet version
- User see My Profile and Logout button when click the username (Screenshot: T01_09_Dashboard.png)
Sidebar
- No changes for sidebar on tablet if compared with desktop
- This is how the expand look (Screenshot: T01_03_Dashboard.png)
Main Content
- Refer more details for each page below.
Footer
- No changes for sidebar on tablet if compared with desktop
b). MOBILE VERSION
Screenshot: M01_0_Dashboard.png
- This is general application page look for each layout section on Mobile version
- Support mobile version for 320px - 768px screen width
Header
- For mobile version, there’s hamburger menu on the left side
- Quick Search moving down and need display fluid width
- Setting button become hidden
- User see My Profile and Logout button when click the username (Screenshot: M01_07A_Dashboard.png)
Sidebar
- No changes for sidebar on tablet if compared with desktop
- This navigation menu look when user click the hamburger menu (Screenshot: M01_04_Dashboard.png)
Main Content
- Each boxes need move to separated row
- Refer more details for each page below.
Footer
- For mobile you need make text and social icons become centered
1). Dashboard
a). TABLET VERSION
Screenshot: T01_00_Dashboard.png
Regulations & Standard
- Display content using 4 columns layout
Global Regulators
- Global Regulators need moving down to separated row
- Click Fullsize button on Global regulator need load modal window
- Click on dot need display the tooltip (Screenshot: T01_1_Dashboard.png)
- This is how tooltip content (Screenshot: T01_02_Dashboard.png)
- For tablet, user can drag & drop from one row to another (Screenshot: T01_04_Dashboard.png)
- Keep existing behaviour when dragging the row like on Desktop version (Screenshot: T01_05_Dashboard.png, Screenshot: T01_06_Dashboard.png)
- User can minimize the box (Screenshot: T01_07_Dashboard.png)
Upcoming Events
- This box can use 50% width
Saved Documents
- This box can use 50% width
b). MOBILE VERSION
Screenshot: M01_0_Dashboard.png
Global Regulators
- Global Regulators need move up to the 1st row
- Click Fullsize button on Global regulator need load modal window (Screenshot: M01_0_Dashboard.png)
- User need drag to see other map region (Screenshot: M01_1_Dashboard.png & Screenshot: M01_02_Dashboard.png)
- Click the dot need load the flyout (Screenshot: M01_03_Dashboard.png)
- User can minimize the box (Screenshot: M01_05_Dashboard.png, Screenshot: M01_06_Dashboard.png)
Regulations & Standard
- Display content using 2 columns layout
Upcoming Events
- Use 100% width for mobile
Saved Documents
- Use 100% width for mobile
2). Profile
a). TABLET VERSION
Screenshot: T01_09B_Profile.png
- For tablet version user thumbnail, information and all buttons need placed on top
- Dashboard Settings & Notification Settings placed below the user information
- You can keep remain button size like on desktop
- Update Profile and Change Password need move to the right side
b). MOBILE VERSION
Screenshot: M01_07B_Dashboard.png
- For mobile version user thumbnail, information and all buttons need placed on top
- Dashboard Settings & Notification Settings placed below the user information
3). Search
a). TABLET VERSION
Screenshot: T01_10_Search.png
- For tablet version, all boxes on the Documents and Milestones tabs need move to separated row (Screenshot: T01_11_Search.png)
- When user click Apply button on the Filter need display the parameters on search result ( T01_12_Search.png)
- Notice there's 3 dots on the right, like on Desktop we need display Clear All and Save Filter as dropdown options
- This Saved tab look (Screenshot: T01_13_Search.png)
- Click Save Filter link need load the modal (Screenshot: T01_14_Search.png)
b). MOBILE VERSION
Screenshot: M01_08_Search.png
- For mobile version you need collapse the left sidebar. Click the blue button need load the filter.
- For mobile, when filter showing up make sure it placed above of search content. Use similar behavior like on main navigation
- All boxes on the Documents and Milestones tabs need move to separated row
- This Milestone tab look (Screenshot: M01_09_Search.png)
- Ignore this Filter & Saved tab (Screenshot: M01_10_Search.png & Screenshot: M01_11_Search.png). You need display as floating sidebar.
- Saved modal window need displayed like existing (Screenshot: M01_12_Search.png)
4) Search Result
a). TABLET VERSION
Screenshot: T01_15_Search.png
- This is search result look after user search from the Quick Search on header bar
- Display all boxes in separated row for tablet version
b). MOBILE VERSION
Screenshot: M01_13_Search.png
- This is search result look after user search from the Quick Search on header bar
- Display all boxes in separated row for tablet version
- For mobile version you need collapse the left sidebar. Click the blue button need load the filter.
- For mobile, when filter showing up make sure it placed above of search content. Use similar behavior like on main navigation
5). Regulators
a). TABLET VERSION
Screenshot: T01_16_Regulators.png
- For tablet version, you need able to hide the Regulator list when click the arrow on top
- Sort By & search button need move down right below the tab
- Display all boxes for Documents & Milestones in separated row
- See Detail button need load the modal window (Screenshot: T01_17_Regulators.png)
- This is Milestones tab (Screenshot: T01_18_Regulators.png)
- See Detail button need load the modal window (Screenshot: T01_19_Regulators.png)
b). MOBILE VERSION
Screenshot: M01_15_Regulators.png
- For mobile version you need collapse the Regulator list. Click the blue button need load the Regulator list.
- When Regulator list showing up make sure it placed above of search content. Use similar behavior like on main navigation
- No need build the title & dropdown on top of banner like storyboard
- Sort By & search button need move down right below the tab
- Display all boxes for Documents & Milestones in separated row
- See Detail button need load the modal window (Screenshot: M01_16_Regulators.png)
- This is Milestones tab (Screenshot: M01_17_Regulators.png)
- See Detail button need load the modal window (Screenshot: M01_18_Regulators.png)
6). Regulations
a). TABLET VERSION
Screenshot: T01_20_Regulations.png
- For tablet version, you need able to hide the left sidebar when click the arrow on top
- Display all boxes for each tabs in separated row
- Tabs need to be swipeable to see another menu
- Sort By & search button need move down right below the tab
- Milestone tab (Screenshot: T01_21_Regulations.png)
- Quick Guide tab (Screenshot: T01_22_Regulations.png)
- This is sub tab for Glossary (Screenshot: T01_23_Regulations.png)
- Implementation Guide tab (Screenshot: T01_24_Regulations.png)
- Contact tab (Screenshot: T01_25_Regulations.png)
- Links tab (Screenshot: T01_26_Regulations.png)
b). MOBILE VERSION
Screenshot: M01_19B_Regulations.png
- For mobile version you need collapse the Regulation list. Click the blue button need load the Regulation list.
- When Regulation list showing up make sure it placed above of search content. Use similar behavior like on main navigation
- No need build the title & dropdown on top of banner like storyboard
- Tabs need to be swipeable to see another menu
- Sort By & search button need move down right below the tab
- Milestone tab (Screenshot: M01_20_Regulations.png)
- Quick Guide, hide the left overview sidebar for mobile (Screenshot: M01_21_Regulations.png)
- Need able to navigate the content by click Prev and Next button
- No need display dropdown like storyboard
- This is Glossary look (Screenshot: M01_22_Regulations.png)
- Implementation Guide tab (Screenshot: M01_23_Regulations.png)
- Contact tab (Screenshot: M01_24_Regulations.png)
- Links tab (Screenshot: M01_25_Regulations.png)
6). Notifications
a). TABLET VERSION
Screenshot: T01_27_Notifications.png
- Adapt fluid width for tablet version
b). MOBILE VERSION
Screenshot: M01_26_Notifications.png
- Adapt fluid width for mobile version
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines
- Put clear comment/documentation for all AngularJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- Firefox latest version on Tablet
- Safari latest version on Tablet
- Chrome latest version on Tablet
- Firefox latest version on Mobile
- Safari latest version on Mobile
- Chrome latest version on Mobile
This is continuation challenge to update existing UI prototype to support Responsive solution for tablet and mobile screen sizes.
The result of this prototype needs to implement best practice of responsive solution across required browsers.
Let’s discuss any questions you have on challenge forum
Final Submission Guidelines
Important:- For this prototype submission we need you stick with existing AngularJS version and Angular Bootstrap
- Grab existing UI Prototype from this gitlab repo: https://gitlab.com/Credit-S-RegHome
- As possible DO NOT override existing HTML codes, you must optimize the prototype to support tablet and mobile screen sizes
- All page must look sharp on Standard & Retina
- Use SCSS/SASS for the submission styling
- You must follow https://angular.io/guide/styleguide
- AngularJS Components must re-usable. Component should be derived based on the configuration. Configuration file to contain the required configurations required to render the page
- Your submission must follow Angular Coding guidelines
- Put clear comment/documentation for all AngularJS components
- All table datas need loaded by JSON.
- Create Routes that use proper naming with existing pages
- Create README.md file that explains your UI Prototype submission structure and commands
- Create clear documentation to set-up your submission locally and on Heroku.
- Also, you must put your submission on Heroku for client review. Include the link on your README.md
Downloadable Files:
https://drive.google.com/open?id=15ivG84s4DTv--pf_NbKyHc2Phtql2SW2
Page Requirements
00). General Layout
a). TABLET VERSION
Screenshot: T01_0_Dashboard.png
- This is general application page look for each layout section on Tablet version
- Support tablet version for 768px - 1366px screen width
Header
- Header need to remain use fluid width
- You might need reduce quick search input to fit within tablet version
- Notice there’s no Welcome User text for tablet version
- User see My Profile and Logout button when click the username (Screenshot: T01_09_Dashboard.png)
Sidebar
- No changes for sidebar on tablet if compared with desktop
- This is how the expand look (Screenshot: T01_03_Dashboard.png)
Main Content
- Refer more details for each page below.
Footer
- No changes for sidebar on tablet if compared with desktop
b). MOBILE VERSION
Screenshot: M01_0_Dashboard.png
- This is general application page look for each layout section on Mobile version
- Support mobile version for 320px - 768px screen width
Header
- For mobile version, there’s hamburger menu on the left side
- Quick Search moving down and need display fluid width
- Setting button become hidden
- User see My Profile and Logout button when click the username (Screenshot: M01_07A_Dashboard.png)
Sidebar
- No changes for sidebar on tablet if compared with desktop
- This navigation menu look when user click the hamburger menu (Screenshot: M01_04_Dashboard.png)
Main Content
- Each boxes need move to separated row
- Refer more details for each page below.
Footer
- For mobile you need make text and social icons become centered
1). Dashboard
a). TABLET VERSION
Screenshot: T01_00_Dashboard.png
Regulations & Standard
- Display content using 4 columns layout
Global Regulators
- Global Regulators need moving down to separated row
- Click Fullsize button on Global regulator need load modal window
- Click on dot need display the tooltip (Screenshot: T01_1_Dashboard.png)
- This is how tooltip content (Screenshot: T01_02_Dashboard.png)
- For tablet, user can drag & drop from one row to another (Screenshot: T01_04_Dashboard.png)
- Keep existing behaviour when dragging the row like on Desktop version (Screenshot: T01_05_Dashboard.png, Screenshot: T01_06_Dashboard.png)
- User can minimize the box (Screenshot: T01_07_Dashboard.png)
Upcoming Events
- This box can use 50% width
Saved Documents
- This box can use 50% width
b). MOBILE VERSION
Screenshot: M01_0_Dashboard.png
Global Regulators
- Global Regulators need move up to the 1st row
- Click Fullsize button on Global regulator need load modal window (Screenshot: M01_0_Dashboard.png)
- User need drag to see other map region (Screenshot: M01_1_Dashboard.png & Screenshot: M01_02_Dashboard.png)
- Click the dot need load the flyout (Screenshot: M01_03_Dashboard.png)
- User can minimize the box (Screenshot: M01_05_Dashboard.png, Screenshot: M01_06_Dashboard.png)
Regulations & Standard
- Display content using 2 columns layout
Upcoming Events
- Use 100% width for mobile
Saved Documents
- Use 100% width for mobile
2). Profile
a). TABLET VERSION
Screenshot: T01_09B_Profile.png
- For tablet version user thumbnail, information and all buttons need placed on top
- Dashboard Settings & Notification Settings placed below the user information
- You can keep remain button size like on desktop
- Update Profile and Change Password need move to the right side
b). MOBILE VERSION
Screenshot: M01_07B_Dashboard.png
- For mobile version user thumbnail, information and all buttons need placed on top
- Dashboard Settings & Notification Settings placed below the user information
3). Search
a). TABLET VERSION
Screenshot: T01_10_Search.png
- For tablet version, all boxes on the Documents and Milestones tabs need move to separated row (Screenshot: T01_11_Search.png)
- When user click Apply button on the Filter need display the parameters on search result ( T01_12_Search.png)
- Notice there's 3 dots on the right, like on Desktop we need display Clear All and Save Filter as dropdown options
- This Saved tab look (Screenshot: T01_13_Search.png)
- Click Save Filter link need load the modal (Screenshot: T01_14_Search.png)
b). MOBILE VERSION
Screenshot: M01_08_Search.png
- For mobile version you need collapse the left sidebar. Click the blue button need load the filter.
- For mobile, when filter showing up make sure it placed above of search content. Use similar behavior like on main navigation
- All boxes on the Documents and Milestones tabs need move to separated row
- This Milestone tab look (Screenshot: M01_09_Search.png)
- Ignore this Filter & Saved tab (Screenshot: M01_10_Search.png & Screenshot: M01_11_Search.png). You need display as floating sidebar.
- Saved modal window need displayed like existing (Screenshot: M01_12_Search.png)
4) Search Result
a). TABLET VERSION
Screenshot: T01_15_Search.png
- This is search result look after user search from the Quick Search on header bar
- Display all boxes in separated row for tablet version
b). MOBILE VERSION
Screenshot: M01_13_Search.png
- This is search result look after user search from the Quick Search on header bar
- Display all boxes in separated row for tablet version
- For mobile version you need collapse the left sidebar. Click the blue button need load the filter.
- For mobile, when filter showing up make sure it placed above of search content. Use similar behavior like on main navigation
5). Regulators
a). TABLET VERSION
Screenshot: T01_16_Regulators.png
- For tablet version, you need able to hide the Regulator list when click the arrow on top
- Sort By & search button need move down right below the tab
- Display all boxes for Documents & Milestones in separated row
- See Detail button need load the modal window (Screenshot: T01_17_Regulators.png)
- This is Milestones tab (Screenshot: T01_18_Regulators.png)
- See Detail button need load the modal window (Screenshot: T01_19_Regulators.png)
b). MOBILE VERSION
Screenshot: M01_15_Regulators.png
- For mobile version you need collapse the Regulator list. Click the blue button need load the Regulator list.
- When Regulator list showing up make sure it placed above of search content. Use similar behavior like on main navigation
- No need build the title & dropdown on top of banner like storyboard
- Sort By & search button need move down right below the tab
- Display all boxes for Documents & Milestones in separated row
- See Detail button need load the modal window (Screenshot: M01_16_Regulators.png)
- This is Milestones tab (Screenshot: M01_17_Regulators.png)
- See Detail button need load the modal window (Screenshot: M01_18_Regulators.png)
6). Regulations
a). TABLET VERSION
Screenshot: T01_20_Regulations.png
- For tablet version, you need able to hide the left sidebar when click the arrow on top
- Display all boxes for each tabs in separated row
- Tabs need to be swipeable to see another menu
- Sort By & search button need move down right below the tab
- Milestone tab (Screenshot: T01_21_Regulations.png)
- Quick Guide tab (Screenshot: T01_22_Regulations.png)
- This is sub tab for Glossary (Screenshot: T01_23_Regulations.png)
- Implementation Guide tab (Screenshot: T01_24_Regulations.png)
- Contact tab (Screenshot: T01_25_Regulations.png)
- Links tab (Screenshot: T01_26_Regulations.png)
b). MOBILE VERSION
Screenshot: M01_19B_Regulations.png
- For mobile version you need collapse the Regulation list. Click the blue button need load the Regulation list.
- When Regulation list showing up make sure it placed above of search content. Use similar behavior like on main navigation
- No need build the title & dropdown on top of banner like storyboard
- Tabs need to be swipeable to see another menu
- Sort By & search button need move down right below the tab
- Milestone tab (Screenshot: M01_20_Regulations.png)
- Quick Guide, hide the left overview sidebar for mobile (Screenshot: M01_21_Regulations.png)
- Need able to navigate the content by click Prev and Next button
- No need display dropdown like storyboard
- This is Glossary look (Screenshot: M01_22_Regulations.png)
- Implementation Guide tab (Screenshot: M01_23_Regulations.png)
- Contact tab (Screenshot: M01_24_Regulations.png)
- Links tab (Screenshot: M01_25_Regulations.png)
6). Notifications
a). TABLET VERSION
Screenshot: T01_27_Notifications.png
- Adapt fluid width for tablet version
b). MOBILE VERSION
Screenshot: M01_26_Notifications.png
- Adapt fluid width for mobile version
CODE REQUIREMENTS:
HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
CSS3
- Provide comments on the SCSS code. We need comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all code so developers can follow.
- All SCSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
Javascript
- You must using Typescript (.ts) file format
- Use Linter, Jest and other best practice library to maintain your code quality.
- Your submission must follow Angular Coding guidelines
- Put clear comment/documentation for all AngularJS components
- All JavaScript must not have a copyright by a third party.
- It is fine to use GPL/MIT/Open Source code.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
IMAGES/SVG
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- If any icons are required, ask and they will be provided
Web Browsers Requirements
- Firefox latest version on Tablet
- Safari latest version on Tablet
- Chrome latest version on Tablet
- Firefox latest version on Mobile
- Safari latest version on Mobile
- Chrome latest version on Mobile