Challenge Overview
Project Overview:
The goal of this challenge is to update the web arena app to fix some bugs.
NOTE: This application is using AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started). Please follow coding standards and write clean code for AngularJS data binding instead of using plain HTML code.
Tips for Success: Asking questions early and getting Copilot or PM's feedback is very important for the success of this challenge.
Competition Task Overview:
Several users are complaninig that there is too much scrolling going on in the web arena, specially if you use lower resolutions.
For this challenge, we'd like to update the web arena to some new sizes so that we'll have to scoll less on various pages to improve user experience.
Below are the detailed requirements:
- Update the coding page (both srm and practice room) to match the new design. The idea is that:
- The page should not require the user to scroll outside of the problem / coding areas.
- Page height needs to set with minimum 768px, width needs to be set with minimum 1024px.
- For wider screen, height must increased too, create js function to set both boxes adapting screen height.
- Bug I-143251:
- Access application link http://qa.arena.topcoder.com -> Use own credentials to login. -> Expand Leaderboard section. -> Expand Rounds drop down list and select the last item from list. -> Close drop down list item. -> Expand again drop down list.
- Expected Result: keep the same position of drop down list(the last item) when expand list second time
- Actual Result: vertical scroll bar position is set to the first item from list
- Bug I-135674:
- Go to Practice room on web arena -> Go to last page of the list and notice
- Expected Result: List should not be squeezed and pagination should stay at bottom
- Actual Result: List squeezes and pagination options are displayed right under the list items. Screencast : http://screencast.com/t/oeOrO1yRLrxy
- https://github.com/appirio-tech/arena-web/issues/99
- https://github.com/appirio-tech/arena-web/issues/97
- https://github.com/appirio-tech/arena-web/issues/133
- Please check https://github.com/appirio-tech/arena-web/issues/168, basically we're seeing the scrollbar to have inconsistent look & feel under different browsers. For example it looks different on Chrome and Firefox (see screenshots below). We need this fixed so all browsers use the same style for the scrollbars.
- The fixes must be done for all 3 themes and developers should provide test data / instructions to verify the fixes.
General Rules
- Test in all the required browsers.
- Watch word typos in every place including source code. Make sure they have correct meaning.
- Use CSS3 for whenever required.
- Your code or HTML layout should be Responsive ready.
- For any popup/modal you code, make it close if you click on x icon or if you click outside the popup/modal.
- Make sure the page rendered properly different screen resolutions.
Important:
- Previous challenge has provided a good code base to start with - https://github.com/appirio-tech/arena-web, please clone and work out directly with that repository, using scrolling_fixes branch. please follow the instructions found inside README.md file, then you will need to update the content (css/js/images/html) inside app folder in order to totally redo the styling to match what we are looking for in the Web Arena.
- Its going to be up to you to define the actual state names and state hierarchy, but you need to think of something clear and extendable. We expect the wireframe/design pages to be broken up into appropriate partials that get loaded according to the state hierarchy you define.
- widgets that appear on more than one page must be done as directives, other widgets may also be done as directives if they member wishes.
Coding Guide
Please define seperate controller files and make controller files reside in a new app/js/controllers directory, the same to directives.
Winner Responsiblity
During the final fix phase, winner will be responsible to create a pull request and help with the merge.
About Code Base
For the code under /home/apps/dev directory, some are hosted in internal svn repositories, some are hosted in private repositories in github.
You can check Source Code Management For TopCoder Competition Engine - TopCoder Wiki
For SVN Access, please send request to support@topcoder.com, For github access, please post your github account in forum to ask PM to grant you access.
Arena VM
Before asking your own VM, you need to have a public key on your profile before asking for the VM.
You can find more details on how to generate a key http://apps.topcoder.com/wiki/display/projects/Generate+SSH+Key and how to connect using it http://apps.topcoder.com/wiki/display/projects/Connect+Using+SSH+Key.
To use the Arena VM, please follow http://apps.topcoder.com/wiki/display/docs/Competition+Engine+VM+Setup
Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
JavaScript Requirements:
- jQuery
- AngularJS
- All custom javascript (written by the competitors) must pass jslint checks
Browsers Requirements:
- IE10
- IE11
- Latest Safari
- Latest Firefox
- Latest Chrome
Final Submission Guidelines
PROTOTYPE GOALS:
- We need clean documentation of the code as possible please create detailed comments for the different HTML5, CSS3 and JavaScript code.
- Please note, we are expecting the HTML5 prototype to work on mobiles.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Remember, all pages should link where possible. Please help us show correct page flow.
- Please use Bootstrap 3 for css.
- Please use AngularJS framework for data binding.
- Please use angular-ui components:
1- ui-bootstrap
2- ui-router (for app structure as a state machine)
3- ui-ace or ui-codemirror (for the code editor)
4- other ui components as needed (date, calendar)
TECHNOLOGY GUIDELINES:
1. HTML5
- Provide comments on the page elements to give clear explanation of 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
- Make sure all HTML files pass Validation without Error/Warning.
2. CSS3
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.
3. JAVASCRIPT
- Provide comments on the JavaScript code, JS codes to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.
4. ANGULAR JS
- Angular models are plain old JavaScript objects. Use JSON objects for data binding with view.
- Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
- Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form.
- Use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) to populate JSON data.
5. IMAGES
- For mobile development, images should be properly compressed while still having good visual quality.
- As possible using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference