topcoder - View Checkpoints and View Submissions - UI Prototype

Welcome to Responsive View Checkpoints - View Submissions UI Prototype Challenge.  
The new topcoder.com website has been released and now it's time to get more areas of the community functionality redesigned. The new site is tailored to our talented community and our goal is to give everyone a great user experience. 
This challenge would produce clickable UI Prototype (HTML) and will be built as wordpress template on next challenges.
 

General Rules :

• Storyboard and baseline UI Prototype is attached in forum
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
• Please update existing related CSS files instead of creating new CSS files
• Ensure you submission clear of HTML and CSS Validation error and warning
• Ensure existing Challenges Pages, My TopCoder pages, Register - Submit - view Results pages work properly
• Watch word typos in every place including the source code. Make sure they have correct meaning
• Layout (background) should be fluid, depend on browser width
• Please provide animated mouse hover  (with transition effect) for each clickable icons/buttons
• Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example :http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and provided Prototype
• Please follow existing  (community.topcoder.com/tc) naming class for handle color, ie.”coderTextYellow” for yellow handle color
• Scope of this challenge is only Register, submit and view challenge result process
• We've replaced lato google webfont with source sans pro as is used on www.topcoder.com, please ensure to replace 'purchased' font which is used in PSD files with  source sans pro google webfont

 

View Checkpoints
- This new page will be similar to challenge detail page. There is no provided UI Prototype for existing Challenge Detail, please just grab it directly from prod http://www.topcoder.com/challenge-details/30039554/?type=develop and  http://www.topcoder.com/challenge-details/30039498/?type=design. as you can see, there is reserved "result" tab. Please update existing challenge-detail-software.css and challenge-detail-software.js
- Please ensure this new tabs should be displayed by Javascript since Challenge Detail, Registrant, and this new "Result" content come from same API and will be loaded in single API call later. example : http://api.topcoder.com/v2/develop/challenges/30036134
- Should support responsive view
- All screens should be implemented

 

View Submissions
All Submissions View
Reference : https://studio.topcoder.com/?module=ViewSubmissions&ct=30039316
- Handle, Magnifier and download icons should be clickable and have simple mouse hover effect
- Since data of submissions will be loaded together with main page (challenge detail) and other tabs, please build Javascripts based for showing this new tabs, for pagination (next/prev) and for "View All" . We can say "Load All then Show some"
- Should support responsive view
- Clicking Magnifier icons will bring user to single submission view
- All screens should be implemented
 

Single Submission View
Reference : https://studio.topcoder.com/?module=ViewSubmissions&ct=30039316&sbmid=170559&pn=1&ps=12
- Clicking on thumbnails (Desktop View) will show large image (by Javascript)
- Scrollbar Thumbnails area should match to storyboard
- Clicking on "See More" hyperlink below Stock Art list should expand the list
- Clicking on "Fullscreen button" would open image in overlay. clicking on overlay (outside of image) will exit from fullscreen
- Should support responsive view
- All screens should be implemented

Not viewable
Some challenges don't allow members to see the submissions, i.e http://studio.topcoder.com/?module=ViewSubmissions&ct=30039511,
please also build this page (tabs) with responsive view as designed

Reviewers will pay attention on how this UI Prototype will be easy to build as wordpress template later.

 

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS/CSS3
• 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 lay out 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 stylesheet.
• 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 Libraries/Plugins

JavaScript libraries already used in the current site can be used in this challenge too. New ones need to be proved by client first.

 

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest
• Chrome / Safari on tablets / phones

Final Submission Guidelines