Challenge Overview
Welcome to CS Global Regulation Protocol Application Admin UI Prototype Challenge
This is continuation challenge, you need re-use provided winning submission and add Admin page. You also must follow existing UI prototype structure to use AngularJS and Angular Bootstrap library. Please grab all necessary elements from existing prototype.
Remember we need build this Admin page to support responsive solution for Desktop and Tablet only. No need the mobile layout.
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 desktop and tablet screen size
- For mobile, you need remain use the tablet screen size. It’s okay if scrollbar show up.
- 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
- 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 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
- As part of winner task, need push the updated code to our github
Downloadable Files:
https://drive.google.com/open?id=17MUlCF19a0xQ-72K-dccUvzLYQqhTJAo
Page Requirements
1). Overview
a). DESKTOP VERSION
Screenshot: 01_0-Landing-Page.gif
- This is Overview Page look and feel
- All boxes using 2 columns layout for Desktop
- Overview title placed on the left side
- Manage Overview and View All List placed on the right side
- Notice on Events user can scrolling vertically & horizontally. You can use browser based scrollbar
- Need expand/collapse each boxes (Screenshot: 01_1-Landing-Page.gif)
- Click Manage Overview need load the flyout menu (Screenshot: 01_2-Landing-Page.gif)
- User need able to toggle the option, then hide/show the boxes in page
- You can use some data to simulate different table
- Click x button need close the flyout
- Need able to drag & drop each box (Screenshot: 01_3-Landing-Page.gif)
- View All List will take user to View All List button (Screenshot: 01_4-Landing-Page.gif)
- Edit button need take user to Edit Event screen explained below. Also Quick Guide need take to related Edit Quick Guide screen
- Note: Each table on this landing will have functions, see details on View List explained below
b). TABLET VERSION
Screenshot: T01_0-Landing-Page.gif
- For tablet version, you need make all boxes move to separate row
2). Events
a). DESKTOP VERSION
Screenshot: 02_1-View-List.gif
- Use this version of Events page
- On top left there’s a dropdown on the left side and tabs
- When change tab, content on dropdown need changed as well. See complete options on the left sidebar (02_0-View-List-(Alternative).gif)
- On top right, click this button take user to Overview page
- Events title placed on the left side
- Search button need use existing function like on Dashboard Global Regulator
- Need able to use the auto-complete
- Hover on the table header with arrow need display the tooltip (Screenshot: 02_1-View-List.gif, Screenshot: 02_2-View-List.gif, Screenshot: 02_3-View-List.gif)
- Hover on the Edit Button (Screenshot: 02_4-View-List.gif)
- Edit button need take user to Edit Event screen explained below
- Click show filter link need load the dropdown below each table header (Screenshot: 02_5-View-List.gif)
- Reset link need reset all dropdown values.
- User can drag and drop each table column (Screenshot: 02_6-View-List.gif)
- Make sure drag & drop working on desktop and tablet
- This is Quick Guide look (Screenshot: 02_7-View-List.gif)
- Edit Quick Guide need take to related Edit Quick Guide screen
- Display show per page on the left side
- And pagination on the right side
- IMPORTANT: Implement table function on any page with similar look
b). TABLET VERSION
Screenshot: T02_0-View-List.gif
- For tablet version, you need remain display dropdown on the left side
- You need remain displayed tab like on Desktop version.
- Tabs need to be swipeable like existing function
- Search, Filter, and Add New Event need placed on the right side
- This is Quick Guide content look (Screenshot: T02_7-View-List.gif)
3). Edit Event Screen
a). DESKTOP VERSION
Screenshot: 03_0-Create-or-Edit-Event.gif
- Use this version for Edit Screen
- All action buttons need placed on the top right
- Match all form fields like on storyboard
- Suggest library to build the text editor
b). TABLET VERSION
Screenshot: T03_0-Create-or-Edit-Event.gif
- Adjust form fields for fluid layout
4) Edit Quick Guide Screen
a). DESKTOP VERSION
Screenshot: 04_0-Quick-Guide-Editing.gif
- This is Edit Quick Guide
- Action buttons placed on the top right side
- There are tabs for Sections, Impacts & Glossary
- User need able to drag and drop list below the Impacts
- Delete and Update Impact placed on the bottom
b). TABLET VERSION
Screenshot: T04_0-Quick-Guide-Editing.gif
- Not have differences with desktop layout
- Need support the fluid width
5). Users
a). DESKTOP VERSION
Screenshot: 05_0-User-Viewing-or-Editing.gif
- This is Users list
- Match data like storyboard
- Make sure function working like other table
- Click Edit button need take to Edit User screen
b). TABLET VERSION
Screenshot: T05_0-User-Viewing-or-Editing.gif
- Need fluid width for Users page on tablet version
5).1) Edit User
a). DESKTOP VERSION
Screenshot: 05_1-User-Viewing-or-Editing.gif
- This is Edit User screen
- Match the toggle option placement
b). TABLET VERSION
Screenshot: T05_1-User-Viewing-or-Editing.gif
- Need fluid width for Edit User page on tablet version
6). Attributes
a). DESKTOP VERSION
Screenshot: 06_0-Attribute-Viewing-or-Editing.gif
- This is Regulation Attribute look
- There are some checkboxes on the left side of table
- For this page, you need support the inline editing
- Click edit button need change the row to editable form (Screenshot: 06_1-Attribute-Viewing-or-Editing.gif)
- Selected row look (Screenshot: 06_2-Attribute-Viewing-or-Editing.gif)
- Notice the selected message replaced the page title
b). TABLET VERSION
Screenshot: T06_0-Attribute-Viewing-or-Editing.gif
- Need make the table fluid on tablet version
- Also inline editing need working (Screenshot: T06_1-Attribute-Viewing-or-Editing.gif)
7). Glossary
a). DESKTOP VERSION
Screenshot: 07_0-Glossary.gif
- This is Glossary tab look
- Edit button need take user to Edit Glossary page
b). TABLET VERSION
Screenshot: T07_0-Glossary.gif
- Need fluid width for tablet version
7).1) Edit Glossary
a). DESKTOP VERSION
Screenshot: 07_1-Glossary.gif
- This is Edit Glossary tab look
- Match field like storyboard
b). TABLET VERSION
Screenshot: T07_1-Glossary.gif
- Need fluid width for tablet version
8). Messages
a). DESKTOP VERSION
Screenshot: 08_0-Messages.gif
- You can display this message on page load of Admin landing page
- x button need close the pop up
b). TABLET VERSION
Screenshot: T08_0-Messages.gif
- You can display this message on page load of Admin landing page
- x button need close the pop up
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
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
- Firefox latest version on Tablet
- Safari latest version on Tablet
- Chrome latest version on Tablet
This is continuation challenge, you need re-use provided winning submission and add Admin page. You also must follow existing UI prototype structure to use AngularJS and Angular Bootstrap library. Please grab all necessary elements from existing prototype.
Remember we need build this Admin page to support responsive solution for Desktop and Tablet only. No need the mobile layout.
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 desktop and tablet screen size
- For mobile, you need remain use the tablet screen size. It’s okay if scrollbar show up.
- 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
- 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 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
- As part of winner task, need push the updated code to our github
Downloadable Files:
https://drive.google.com/open?id=17MUlCF19a0xQ-72K-dccUvzLYQqhTJAo
Page Requirements
1). Overview
a). DESKTOP VERSION
Screenshot: 01_0-Landing-Page.gif
- This is Overview Page look and feel
- All boxes using 2 columns layout for Desktop
- Overview title placed on the left side
- Manage Overview and View All List placed on the right side
- Notice on Events user can scrolling vertically & horizontally. You can use browser based scrollbar
- Need expand/collapse each boxes (Screenshot: 01_1-Landing-Page.gif)
- Click Manage Overview need load the flyout menu (Screenshot: 01_2-Landing-Page.gif)
- User need able to toggle the option, then hide/show the boxes in page
- You can use some data to simulate different table
- Click x button need close the flyout
- Need able to drag & drop each box (Screenshot: 01_3-Landing-Page.gif)
- View All List will take user to View All List button (Screenshot: 01_4-Landing-Page.gif)
- Edit button need take user to Edit Event screen explained below. Also Quick Guide need take to related Edit Quick Guide screen
- Note: Each table on this landing will have functions, see details on View List explained below
b). TABLET VERSION
Screenshot: T01_0-Landing-Page.gif
- For tablet version, you need make all boxes move to separate row
2). Events
a). DESKTOP VERSION
Screenshot: 02_1-View-List.gif
- Use this version of Events page
- On top left there’s a dropdown on the left side and tabs
- When change tab, content on dropdown need changed as well. See complete options on the left sidebar (02_0-View-List-(Alternative).gif)
- On top right, click this button take user to Overview page
- Events title placed on the left side
- Search button need use existing function like on Dashboard Global Regulator
- Need able to use the auto-complete
- Hover on the table header with arrow need display the tooltip (Screenshot: 02_1-View-List.gif, Screenshot: 02_2-View-List.gif, Screenshot: 02_3-View-List.gif)
- Hover on the Edit Button (Screenshot: 02_4-View-List.gif)
- Edit button need take user to Edit Event screen explained below
- Click show filter link need load the dropdown below each table header (Screenshot: 02_5-View-List.gif)
- Reset link need reset all dropdown values.
- User can drag and drop each table column (Screenshot: 02_6-View-List.gif)
- Make sure drag & drop working on desktop and tablet
- This is Quick Guide look (Screenshot: 02_7-View-List.gif)
- Edit Quick Guide need take to related Edit Quick Guide screen
- Display show per page on the left side
- And pagination on the right side
- IMPORTANT: Implement table function on any page with similar look
b). TABLET VERSION
Screenshot: T02_0-View-List.gif
- For tablet version, you need remain display dropdown on the left side
- You need remain displayed tab like on Desktop version.
- Tabs need to be swipeable like existing function
- Search, Filter, and Add New Event need placed on the right side
- This is Quick Guide content look (Screenshot: T02_7-View-List.gif)
3). Edit Event Screen
a). DESKTOP VERSION
Screenshot: 03_0-Create-or-Edit-Event.gif
- Use this version for Edit Screen
- All action buttons need placed on the top right
- Match all form fields like on storyboard
- Suggest library to build the text editor
b). TABLET VERSION
Screenshot: T03_0-Create-or-Edit-Event.gif
- Adjust form fields for fluid layout
4) Edit Quick Guide Screen
a). DESKTOP VERSION
Screenshot: 04_0-Quick-Guide-Editing.gif
- This is Edit Quick Guide
- Action buttons placed on the top right side
- There are tabs for Sections, Impacts & Glossary
- User need able to drag and drop list below the Impacts
- Delete and Update Impact placed on the bottom
b). TABLET VERSION
Screenshot: T04_0-Quick-Guide-Editing.gif
- Not have differences with desktop layout
- Need support the fluid width
5). Users
a). DESKTOP VERSION
Screenshot: 05_0-User-Viewing-or-Editing.gif
- This is Users list
- Match data like storyboard
- Make sure function working like other table
- Click Edit button need take to Edit User screen
b). TABLET VERSION
Screenshot: T05_0-User-Viewing-or-Editing.gif
- Need fluid width for Users page on tablet version
5).1) Edit User
a). DESKTOP VERSION
Screenshot: 05_1-User-Viewing-or-Editing.gif
- This is Edit User screen
- Match the toggle option placement
b). TABLET VERSION
Screenshot: T05_1-User-Viewing-or-Editing.gif
- Need fluid width for Edit User page on tablet version
6). Attributes
a). DESKTOP VERSION
Screenshot: 06_0-Attribute-Viewing-or-Editing.gif
- This is Regulation Attribute look
- There are some checkboxes on the left side of table
- For this page, you need support the inline editing
- Click edit button need change the row to editable form (Screenshot: 06_1-Attribute-Viewing-or-Editing.gif)
- Selected row look (Screenshot: 06_2-Attribute-Viewing-or-Editing.gif)
- Notice the selected message replaced the page title
b). TABLET VERSION
Screenshot: T06_0-Attribute-Viewing-or-Editing.gif
- Need make the table fluid on tablet version
- Also inline editing need working (Screenshot: T06_1-Attribute-Viewing-or-Editing.gif)
7). Glossary
a). DESKTOP VERSION
Screenshot: 07_0-Glossary.gif
- This is Glossary tab look
- Edit button need take user to Edit Glossary page
b). TABLET VERSION
Screenshot: T07_0-Glossary.gif
- Need fluid width for tablet version
7).1) Edit Glossary
a). DESKTOP VERSION
Screenshot: 07_1-Glossary.gif
- This is Edit Glossary tab look
- Match field like storyboard
b). TABLET VERSION
Screenshot: T07_1-Glossary.gif
- Need fluid width for tablet version
8). Messages
a). DESKTOP VERSION
Screenshot: 08_0-Messages.gif
- You can display this message on page load of Admin landing page
- x button need close the pop up
b). TABLET VERSION
Screenshot: T08_0-Messages.gif
- You can display this message on page load of Admin landing page
- x button need close the pop up
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
- IE11
- Microsoft Edge
- Firefox latest version
- Safari latest version
- Chrome latest version
- Firefox latest version on Tablet
- Safari latest version on Tablet
- Chrome latest version on Tablet