Release Assembly - CSFV Forums Frontend Revamp Part 4

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.

 

This is a series of small and simple challenges to revamp forums UX and UI in CSFV websites. We've completed the first challenge

Competition Task Overview

The goal of this challenge is to revamp the forums frontend in csfv_minisite_frontend_module branch #minisite3_forums_ux.

General Notes

• Use forums_ux branch from csfv_frontend_module to check how we implemented it
• You must REFERENCE the forums.js file from csfv_frontend_module#forums_ux branch
• You only need to implement the Views in this challenge.
• Demonstrate how to use one of the categories defined in ForumCategory as the root category of the minisite3 forums (don't use Uncategorized)
• There are few changes between csfv_frontend_module#forums_ux views and the provided protototype in that challenge, you should implement these differences in this challenge as well.

• All pages must be updated to match the UI Prototype unless it is outlined above that there are changes neede to specific pages.

• Any non-admin page in production are not found in prototype should be kept, don't delete any non-admin page unless it is stated in requirements or confirmed in forums.

• By default we display 20 posts, “Load more” will also pull another 20 posts. In both thread list page and thread details page.

• Any button currently displayed in the black forums bar should be moved ot the top forums buttons menu

Updated Pages

• Forums main page : GET /forums

  • UI Prototype page forums-main.html

  • By default it lists all threads under all categories of the configured category. already addressed in csfv_forums_module#forums_ux branch, you only need to apply the config in #minisite3_forums_ux branch.

  • Remove 'Add Forum' Button

  • Remove 'Pipeline' Button

  • 'MY POST' should be 'MY POSTS' in all pages

  • Change 'Add Subcategory' to 'Add Category'

  • Pinned posts are always displayed at the top except when sorting

  • Pinned posts are decided as follow :

    • If ‘All Categories’ (the default) then the ‘Uncategorized’ pinned thread will be displayed.

    • Other than that, Pinned threads are only retrieved for the selected category.

  • Implement sorting as in prototype

  • Implement pagination as in prototype, the backend should send total number of items so “Load more” button don’t display if there is no more posts to load.

  • The new tabs are used to improve UX

    • by default 'Most Recent' is active tab, which display threads that were posted recently, "Pinned" threads are only these from 'Uncategorized'

    • 'Admin Posts' - this tab will pull the posts under configured category that will be used as "Blog" category, the threads will look like 'pinned' threads except that the 'pinned' icon should be removed

    • 'Most Viewed' - this display posts with most viewed

    • 'Most Popular' - display threads sorted by highest number of replies

    • Unread - this tab display unread threads of the user

    • The notification number on the tab represents the number of new/unread threads under that tab, if the number exceed 1000, use the 'k' to reduce the width, for example 1345 should be displayed as 1.3k

  • 'Watch Category' popup - it will list all categories with their descriptions, user can watch/unwatch category from this popup. The "manage categories" link will only be available to Admins.

  • Hover over users photo should display tooltip with the username.

  • Clicking in any 'category' tag will filter the page with threads of the selected category and it's subcategories. Same behavior as selecting category from “All Categories’ drop down list.

  • The route when filter the page with specific category should be "GET /forums/{category-name} where dash (-) should replace spaces.

  • Use JS templates when loading more threads instead of hardcoding the html in the JS files.

  • “Last Poster” column - use the format as done in csfv_frontend_module.

  • the backend should send the total number of threads so that if no more to load then “Load more’ button should not be displayed

• Threads Page

  • Prototype page is : forums-thread.html

  • Must match prototype

  • Move ‘Watch’ and ‘Delete’ buttons from black header to forums menu.

  • Progressive loading to replace pagination

  • The backend should send the total number of threads so that if no more to load then “Load more’ button should not be displayed

  • ‘Share’ button is out of scope, don’t add it to the page.

  • Add ‘Pin Thread’ button at the forums top buttons, it will only be visible to the admins. When clicking that button, the thread will be pinned and a post will be posted automatically in that thread by the user who pinned the post with text “This topic is now pinned. It will appear at the top of its category."

  • Add ‘Lock’ button, when clicking the thread will be locked and no more accepting replies, a post will be posted automatically in that thread by the user who pinned the post with text “This topic is now locked. It will accept no more replies.” you can use the lock icon from forums-my-post.html to be displayed in the forums-main.html

• Post/Update Thread

  • UI prototype page : forums-new-thread.html

  • Update post thread to match prototype

    • Category drop down list will list all categories and child categories.

    • Remove Pin Post checkbox

• Search pages

  • UI Prototyep page : forums-advanced-search.html and forums-search-results.html

  • Should implement progressive loading and sorting

• Manage Categories

  • UI Prototype page : forums-manage-categories.html

  • Only accessed by admins

  • Display list of categories with their descriptions

  • user can delete or edit the categories

  • Sorting to be implemented in the page

  • Progressive loading to be implemented in this page

• Add/Edit Category :

  • Same page as we currently have in the frontend application.

• “MY Posts” page :

  • Should match forums-my-post.html

  • Sorting should be implemented

  • Progressive loading should be implemented

  • Change ‘Forum’ column to ‘Category’ column

• My Watches

  • Should match forums-my-watches.html

  • Sorting, progressive loading should be implemented

  • move “remove selected’ to the top

  • Forums tab should be changed to ‘Categories’

Admin Pages

We will no more have admin pages other than the one provided in forums. The admin and users will use the same pages, the only difference that admin pages in prototype and admin functionality will be available via buttons in the main forums menu and buttons in each message in threads.

 

If you have any doubt about specific admin functionality please post in forums to discuss and don’t make any pre-assumption.

 

Cleanup routes and javascript

 

Cleanup the routes to remove the forums routes that is no more needed, remove javascript and css that is no more needed.

 

The javascript frontend should be REFERENCED from csfv_frontend_module/public/forums.js file

  

Technology Overview

• Node.js

• Express.js

• mongo

• ajax

• html

• javascript

• css

• jade

Documentation Provided

UI Prototype is provided in forums. In the zip folder there are two folders, "flowjam" and "verigames". "flowjam" is the UI prototype of minisite3, "verigames" is the prototype of the mainwebsite and it is provided only for reference in case something was missing from "flowjam".

Github Code

• The code is in http://www.github.com/topcoderinc if you don’t have access, please request it in the contest forums.
• The csfv_frontend_module#forums_ux branch https://github.com/topcoderinc/csfv_frontend_module/tree/forums_ux
• the csfv_minisite_frontend_module https://github.com/topcoderinc/csfv_minisite_frontend_module

During approval phase, the winner will have to checkin fixes to forums_ux branch in csfv_minisite_frontend_module module

Submission Deliverables

Below is an overview of the deliverables:

• Patch file of changes.
• Upated readme file
• Deployment document.

Final Submission

For each member, the final submission should be uploaded to the Online Review Tool.