Challenge Overview
Welcome to Styx Credential Manager Application UI Prototype Challenge
The main task of this challenge is need to create the Styx Credential Manager Application UI Prototype for Search Functionality only by following layout and interactions of provided .ai Illustrator file to guide you of our expected look and feel. The result of this prototype needs to be a responsive solution supported on IE11, Microsoft Edge Browser, Chrome, Firefox desktop browsers as well as on iOS Safari browser (iPad Landscape View)
We provide you our existing Styx UI Prototype as reference, you can grab existing code, but for this challenge we need you to build using ReactJs OR AngularJS as base framework.
Let’s discuss any questions you have.
Final Submission Guidelines
Downloadable Files:
- Storyboard_Search_management.zip : Styx Credential Management Storyboard Design for Search (.ai & .pdf files)
Important:
- For this challenge you just need build 1(one) page with dynamic Search filter and Interaction
- Your UI Prototype must support responsive solution with focus on Desktop and iPad browsers as specified above
- For this prototype submission we need you to build using ReactJs (preferable) OR AngularJS as base framework.
- Your prototype need submit correct informations. Pay attention to all small details, let us know if need clarifications.
- Do not use jQuery.
- All datas as possible need loaded by JSON.
- We need you capture all required interactions and functionality
UI PROTOTYPE REQUIREMENTS
- For specification below please refer to provided Storyboard_CM_search.pdf file
User Management Page
Screen: Storyboard_CM_search.pdf > page 1
- Ignore all UI elements except for what is relevant to the Search functionality.
- But, Search Functionality need created using ReactJs OR AngularJS
- Below the title, display total rows information. This is updated as a result of the search output
- This Search filter need have fluid width from 1024px and upper.
Search Filter Logic
Screen: Storyboard_UMM_search.pdf > page 2
- This is Filter look after filled with some values
- Filter button style changed when the filter panel show up
- When filter panel show up need move the table down
- User can close the panel by click the X button in the right side or by clicking the filter icon
- Panel divided by 3 columns
1st column, This is for Filters
- Use the page 2 look but consult with other pages to see various possible states.
- Fix the vertical size of the entire Search container and provide a scroll bar in FILTERS pane when the content needs to exceed the maximum fixed height
- Checkbox values in the FIELD pane will be added programmatically via an API call. For now, just create enough checkboxes to show operation of scroll bar.
2nd column, This is for Condition
- Options for the FIELD dropdowns will be added dynamically via an API call. For now, just hardcode some values for demonstration purposes.
- Options for the operator dropdowns will be added dynamically. For now, just show <, >, = options in every dropdown
- Provide various containers for the VALUE column.
- Provide a field that can support any input.
- Provide a field that can suppot only numeric input.
- Provide a dropdown control
- No need for a datepicker
- Fix the vertical size of the entire Search container and provide a separate scroll bar in the FIELD/OPERATOR/VALUE pane
3rd column
- The dropdown options are “All Conditions” and “Any Condition”
- The “RESET” button should clear out all of the “FIELD/OPERATOR/VALUE” input and leave only the “ADD CONDITION” button available and one row of input showing (see MINIMUM/EMPTY view on page 3 for example)
- The “RESET” button should not affect the FILTERS pane at all, only the FIELD/OPERATOR/VALUE pane..
Screen: Storyboard_UMM_search.pdf > page 3
MINIMUM/EMPTY
- Create this look on your prototype submission by default
- Panel height need use fluid height that will wrap number of filter on panel
- Click Add Condition button need add new row field
- Click ”-” button need remove the selected row
IDEAL
- When field with more rows, need auto expand the filter panel height
Screen: Storyboard_UMM_search.pdf > page 4
MAX BOTH COLUMNS
- This is panel look when scrollbar show up.
- Use default browser scrollbars. Do not style or use any 3rd party scrollbar..
Screen: Storyboard_UMM_search.pdf > page 5
MAX LEFT COLUMN and MAX RIGHT COLUMN
- As mentioned before, the vertical size should be fixed. Given the padding shown in the .ai files, ensure that the scrollbar shows up when the total vertical height occupied by the filters will exceed the available max height of the container.
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.
- Each of the HTML pages need adapted both difference of tablet and phone layout.
SCSS
- 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.
IMAGES
- 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
- Firefox latest version
- Microsoft Edge Browser latest version
- Chrome latest version
- iOS Safari (iPad Landscape View)