Challenge Overview
NOTE: This is a repost of an earlier challenge that got no submissions. This one has a higher prize and a longer timeline.
Challenge Overview
Topcoder is in the process of rewriting the challenge listings page using React.js. The new version will be an overhaul, with a brand new look, feel, and user experience.
While we've been working on this, we've been trying to match the styling of the pages as close as possible to the design specifications that our design team has been providing. However, there are currently a number of points on which the current listings pages don't match the specs. In this challenge, we want to adjust the styling of these pages to match the spec as close as possible, as well as fixing some general style-related issues.
Most of the code you'll be dealing with directly lives in the react-components repo (in the challenge-listings branch), but on the /listings page on the topcoder site, the components are actually used within the topcoder-app repo. As much as possible, the styles should render correctly in both contexts. Things should look right whether the user looks at the example listings in react-components, or serves up the listings using topcoder-app.
Requirements
The most important thing about your submission should follow the current model of styling for the components. I.e., styling should be on a component level, and should never list more than 3 levels deep.
Detailed requirements:
1) Lots of little things don't match the specs. For example, the fonts for the tooltips don't match the specs (shold be Roboto). See UI Kit 2. There are a bunch of other small details like this. I point out a few more tiny details like this specifically in some of the other points, but generally, we want the styling on the page to match the specs as closely as possible. Right now, they're close, but not quite matching -- we want them to match. This means checking font sizes and weights, as well as things like colors and spacing, and adjusting where necessary.
2) As you shrink the window, there are a number of ugly issues. The sidebar overlaps with the challenge buckets, and at a certain point, all the listings get mysteriously pushed down, generating a bunch of whitespace (actually grey). This push-down shouldn't happen, and the sidebar should never overlap.
3) In general, filters aren't transitioning gracefully to mobile view. If you look at UI Kit 2, filters and the navigation sidebar should both be accessible as pop-ups for users with small screens. When we get to the point of overlapping the listings and the sidebar, we can switch to the "mobile" view.
4) Edit filters is a bit off of spec. See Filters.zip for the live spec to compare.
5) There are some small inconsistencies on the component level. For instance, the TCO tag should have rounded corners. Check Card_Components.zip for a live spec.
6) Styling for the challenge buckets (i.e., the containers for the separate challenge lists that you see when you view all challenges) don't match the specs at all. Check the live spec in Filters.zip, as well as the last card of UI Kit 1.
Final Submission Guidelines
Before the listings components, we hadn't done much development in this repo, so please ignore all the Coffeescript components you see.Your (JS) code (if you write any) should match the Airbnb React Styleguide. Use ES6 syntax and build functional components.
As mentioned above, your SCSS should match the general style already being used. Never nest more than 3 levels deep, use variables wherever possible, and put things that will likely be useful for other components in one of the shared SCSS files.
If you want to pull in outside components or other CSS or JS libraries, GET THEM APPROVED!
Submissions should be a git patch. Make sure the patch has a user email so that we don't have to add it manually. Please provide a short deployment guide, and an accompanying video that shows a) your components in action and b) a brief code walkthrough.