Challenge Overview
Project Overview
This project, the CSFV Community Gaming website project will provide the web site infrastructure and integration of the games. This will be a web site that is available on the Internet, and also will be delivered in a form where the server and the games can be installed and used behind a firewall.
In this challenge you will be updating CSFV Forums UI Prototypes.
Competition Task Overview
You are provided with existing UI prototypes and update it to match the provided PSD/Screenshot files, here are list of notes to follow when updating the UI prototypes :
- All UI prototypes pages must match the new design.
- Ignore header/footer/main-menu in the provided PSD, Keep the existing ones in provided UI Prototypes
- Screenshots of verigames UI prototype contains notes about the new things in the updated design
- forums-admin-* pages are not needed any more, they are excluded except the page to add/edit categories
- All forums pages should be updated to match the structure of the updated design :
- Breadcrumb in existing UI prototype should be kept, it is not shown in PSD but it should be included. (i.e. refer to forums-thread.html for how it is implemented)
- No pagination : any page that has pagination should be replaced with progressive loading by adding "load more" and "::: loading more" buttons. here is list of pages that should have this progressive loading :
- forums-main.html
- forums-my-post.html
- forums-my-watches.html
- forums-search-results.html
- forums-thread.html
- forums-advanced-search.html
- Sorting as shown in "Main-Site ~ 03C ~ Sort Intent.png" and "Main-Site ~ 04 ~ Sorted.png" should be applied to all pages with tables.
- 'Watch Categories' :
- The panel should be scrollable
- Implement the following styling when clicking on the checkbox :
- By default it is unselected, when user click on it, the ticker should have a 'light' color than the one in screenshot as indication that an ajax call is made to backend, on success update on backend it's color will become the same as in screenshot
- For "manage categories" link (refer to Main-Site ~ 03B ~ Watch Categories.png)
- Add new page that has same table as in threads list page
- Columns are :
- 'Category' : it display category name and description (same as Admin Posts 'Post' column)
- 'Action' : it should have 'edit', 'delete' buttons. clicking 'edit' will take user to forums-admin-new-category.html. Display the custom popup when clicking 'delete' to get user confirmation on deleting the category.
- For thread messages, implement the quote style for all websites in all prototypes. (It might alrady been implemented in the UI Prototype but this is just to emphasize that it should be there for all websites)
- The 6 websites should have the same pages
- Use sprites for the new images.
- The required pages to deliver in this challenge
- forums-main.html (this is Main-Site ~ 01 ~ Init.png)
- forums-admin-edit-category.html
- forums-admin-new-category.html
- forums-my-post.html
- forums-my-watches.html
- forums-new-thread-post.html
- forums-new-thread-preview.html
- forums-new-thread.html
- forums-permission.html
- forums-post-edit.html
- forums-post-reply.html
- forums-post-revision-history.html
- forums-search-results.html
- forums-thread.html (Main-Site ~ 08A ~ Thread.png)
- forums-advanced-search.html
Specific HTML/CSS/Javascript Requirements
Follow the HTML/CSS/Javascript requirements outline in this WIKI page
Documentation Provided
Storyboard and UI Prototype part are provided in forums
Browser Requirements
- IE7, IE8, IE9+
- Latest FireFox Mac & PC
- Latest Safari on Mac & PC
- Chrome Latest Mac & PC
Final Submission Guidelines
Submission Deliverables
All the pages that are shown in PNGs in the provided storyboard file are required.