TOSCA UI Prototype

Welcome to the TOSCA UI Prototype Challenge. In this challenge, we are looking for you to update the UI of TOSCA POC application using the provided storyboard.

Let us know any question you have!

Technology stack

• Angular 7
• NodeJS
• HTML
• SCSS
• JavaScript

General requirements

Layout

• The UI should support resolutions 1920px x 1080px and above.
• The application layout should match the storyboard as much as possible.
• Keep the UI app consistent, it is acceptable to do minor adjustments to make the UI look consistent.
• SVG format icons are preferred over png or jpg.
• For images without transparency use jpg format.
• For images with transparency use png format.

Framework specific

• Use Observable & Observable.subscribe() method wherever applicable. You may refer this: https://angular.io/tutorial/toh-pt4#subscribe-in-heroescomponent
• Use Dependency Injection coding pattern.
• ng build should work without throwing any error.

Code formatting

• Make sure code is well documented, all classes, methods, variables, parameters, return values must be documented in every single code file, and appropriate inline comments should be provided too where the code is not straightforward to understand.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• Use appropriate linter to validate your code.

HTML Specific

• HTML should be valid HTML5 compliant.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.

CSS Specific

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
• You may use SCSS in the project.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge
• IE11 is the primary browser.

App Requirement

The layout of given POC should be updated based on the new storyboard. As much as possible use the same directory structure.

0 Resources & links

1. Marvel storyboard:
2. The design source has been attached in the challenge forum.
3. The POC to work on is provided in the forum.

1. Storyboard:

Refer forum for Screenshot

1. HeaderAll the sections are in scope.

• The header of the application should match the storyboard.
• TOSCA link should be selected by default.
• Other menus, logo & user icon are dead links.
• Update the layout of buttons bar below the main-header to match the storyboard.
• The POC app contains some new buttons, all those buttons should be present on the app.

2. Sidebar

• Sidebar has already been added to the POC application.
• Update the layout of the sidebar to match the storyboard.
• No need to add new links in the sidebar to match the storyboard.
• Keep the existing links & update their layout according to the storyboard.

3. Main area

• Update the layout of the main area on the right side to match the storyboard.
• There are some new elements in this area https://d.pr/free/i/7Pfxrz implement the UI for all of them.

3.1 Value editor & other left column elements

• Ref: https://d.pr/free/i/U1oWpr
• Update the layout of all the elements in this section.
• For the code view section, keep using the existing them. No need to update the color theme of the code viewer.
• All sub-tabs of the value editor are in scope.

3.2 Constraint section

• Ref Constraint section

• Update the layout of the constraint section on this page to match the storyboard layout.

• All the sub tabs of constraints are in scope. (Refer forum for links)

4. Existing functions

• Make sure all existing functions continue to work after updating the layout.

Final Submission Guidelines