Challenge Overview
The goal of this challenge is to fix a number of mobile related bugs on the refactored version of the Challenge Details page. The page was rewritten in Angular, and a number of minor bugs we want to fix are described below.
Most of the issues below appear when user rotates the device view
Bug #1
Issue ID: refactored-challenge-details-20
Bug Overview: Tool Tip won't close when we click on another location
Steps to reproduce the bug:
- using iPad in landscape mode, open http://www.topcoder.com/challenge-details/30042707/?type=develop
- tap on the icons in "Final Review: Community Review Board" or in "Approval: User Sign-Off"
- tooltip will be shown
- tap on other part of the screen
- observe that the tooltip will not close
Expected Result:
- tooltip must be closed when user taps on other part of the screen
Bug #2
Issue ID: refactored-challenge-details-22
Bug Overview: Slider won't work in Portrait Mode
Steps to reproduce the bug:
- using iPad in portrait mode, open http://www.topcoder.com/challenge-details/30042707/?type=develop
- in the 'Details' tab, check the slider below the 'Challenge Discussion' section
- observe the slider doesn't work properly, it doesn't display any slide content
Expected Result:
- slider must work properly, it should display the slide content of these sections: Downloads, Review Style, Contest Links, and Share
Bug #3
Issue ID: refactored-challenge-details-28
Bug Overview: Results hyperlinks are not working in Portrait Mode
Steps to reproduce the bug:
- using iPad in portrait mode, open http://www.topcoder.com/challenge-details/30042406/?type=design
- once the page is loaded, you should see a normal/correct page
- rotate the device from portrait to landscape, then from landscape to portrait
- in the 'Details' tab, tap on the hyperlinks: 'Details | Registrants | Submissions | Results'
- see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160201/15.PNG
- observe how the links react when user taps on them
Expected Result:
- tabs when tapped should show their corresponding tab content
Bug #4
Issue ID: refactored-challenge-details-29
Bug Overview: 5th Place is not visible in Portrait Mode
Steps to reproduce the bug:
- using iPad in portrait mode, open http://www.topcoder.com/challenge-details/30042406/?type=design
- once the page is loaded, you should see a normal/correct page
- rotate the device from portrait to landscape, then from landscape to portrait
- observe that the 5th Place is not visible, see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160202/16.PNG
Expected Result:
- 5th place should be visibile, check the landscape mode for reference
Bug #5
Issue ID: refactored-challenge-details-32
Bug Overview: Layout Issue in the Cash prize section
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), open http://www.topcoder.com/challenge-details/30042731/?type=develop
- check the Cash prize section, see this screenshot https://apps.topcoder.com/bugs/secure/attachment/160205/20.png for reference
Expected Result:
- display the placement and prizes correctly
- reduce the font size to fit in nicely
Bug #6
Issue ID: refactored-challenge-details-33
Bug Overview: '5 CHECKPOINT AWARDS WORTH $100 EACH' touches the right border
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), open http://www.topcoder.com/challenge-details/30042875/?type=design
- in Landscape mode, check the text : '5 CHECKPOINT AWARDS WORTH $100 EACH', see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160207/21.2.png
- then go to Portrait mode, Check the text : '5 CHECKPOINT AWARDS WORTH $100 EACH', see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160206/21.1.png
Expected Result:
- allow some spacing so that the text will not overlap in the border
- you may reduce some font so we can fit them nicely
Bug #7
Issue ID: refactored-challenge-details-44
Bug Overview: Rating and Reliability table column header are too close to each other
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), open http://www.topcoder.com/challenge-details/30042731/?type=develop
- tap the 'Registrants' tab
- check the table, check how close column header 'Rating' and 'Reliability' to each other
- see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160219/31.png
Expected Result:
- allow some spacing for the column headers
Bug #8
Issue ID: refactored-challenge-details-46
Bug Overview: Menu section displayed on the page even we close the menu
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), open http://www.topcoder.com/challenge-details/30042731/?type=develop
- tap menu to open it
- then tap on the Menu again to close it
- observe how the menu reacts, see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160221/33.png
Expected Result:
- menu should be totally hidden when closing it
Bug #9
Issue ID: refactored-challenge-details-79
Bug Overview: 'Feedback' Slider Text changes to light Gray when expanding, but when collapsing it won't reset
Steps to reproduce the bug:
- on both tablet and mobile phone browsers, open http://www.topcoder.com/challenge-details/30042826/?type=design
- in the 'Checkpoints' tab, scroll down
- tap on a Feedback
- Check the text color - Light gray
- Collapse it - Light gray
- Compare with the desktop web version, see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160244/45.png
Expected Result:
- color should be reset accordingly
Bug #10
Issue ID: refactored-challenge-details-84
Bug Overview: Double Line appears before the 'Result' hyperlink
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), open http://www.topcoder.com/challenge-details/30042826/?type=design
- in the 'Results' tab, scroll down
- check the line before the 'Result' hyperlink
- see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160240/48.png
Expected Result:
- the line/border should be in single form, remove any extra link that makes it appear double
Bug #11
Issue ID: refactored-challenge-details-85
Bug Overview: When we click View the file is downloading
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), use the device native browser and open http://www.topcoder.com/challenge-details/30042826/?type=design
- in the 'Results' tab, scroll down
- tap 'View'
- observe how the functionality reacts, see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160241/49.png
Expected Result:
- file must open in preview and should not download the file
Bug #12
Issue ID: refactored-challenge-details-86
Bug Overview: Submission preview thumbnail must center aligned
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), open http://www.topcoder.com/challenge-details/30042826/?type=design
- in the 'Results' tab, scroll down
- check the Submission preview thumbnail
- see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160242/50.png
Expected Result:
- preview image should be aligned center
Bug #13
Issue ID: refactored-challenge-details-87
Bug Overview: '$' symbol is not BLUE color in Portrait Mode
Steps to reproduce the bug:
- using iPad in portrait mode, open http://www.topcoder.com/challenge-details/30042826/?type=design
- once the page is loaded, you should see a normal/correct page
- rotate the device from portrait to landscape, then from landscape to portrait
- in the Checkpoint Prize section, check the "$50", check the "$" sign
- observe that it is not colored blue, see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160184/51.PNG
Expected Result:
- "$" sign should be color blue, check the landscape mode for reference
Bug #14
Issue ID: refactored-challenge-details-88
Bug Overview: '1st Place' Text must display in two
Steps to reproduce the bug:
- using mobile phone in portrait mode (iPhone or Samsung Galaxy s4/s5), open http://www.topcoder.com/challenge-details/30042731/?type=develop
- in the Prize Section, check the '1st Place Prize'
- see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160183/53.png
Expected Result:
- '1st Place' Text must display in two lines
Bug #15
Issue ID: refactored-challenge-details-89
Bug Overview: empty Slides in the slider
Steps to reproduce the bug:
- using mobile phone (iPhone or Samsung Galaxy s4/s5), open : http://www.topcoder.com/challenge-details/30042826/?type=design
- tap the navigator in the slide
- observe that there are blank slides, see this screenshot for reference - https://apps.topcoder.com/bugs/secure/attachment/160245/53.png
Expected Result:
- remove any blank slides
Bug #16
Issue ID: refactored-challenge-details-101
Bug Overview: Reducing screen issue
Steps to reproduce the bug:
- using iPad in landscape mode, open http://www.topcoder.com/challenge-details/30042788/?type=develop
- once the page is loaded, you should see a normal/correct page
- now try to rotate the view (landscape to portrait mode)
- see these screenshots for reference: https://apps.topcoder.com/bugs/secure/attachment/160276/resize.png and https://apps.topcoder.com/bugs/secure/attachment/160277/resize2.png
- making narrow browser window or changing device orientation makes challenge buttons misplaced (see screenshots, note that the logo issue in the screenshot was already fixed)
Expected Result:
- changing of browser orientation should not make buttons misplaced
Browser Requirements
- Mobile browsers
- Tablet browsers
Resources and Guidelines:
- Latest theme and plugin available on github https://github.com/topcoderinc/tc-site/
- Data is avaiable on https://github.com/topcoderinc/tc-site-data
- Please follow the guidelines in our Github repo at https://github.com/topcoderinc/tc-site/#readme, specially in creating branches for each issue.
Quick Installation guide :
1. Activate theme and plugin
2. Import provided XML file
3. Set home as front page
4. Set permalink to %post_name%
5. Please install site on local.topcoder.com (add to hosts file), so your local site can read tcsso and tcjwt cookies
Final Submission Guidelines
- Please submit updated files and individual Patch files for each issue
- Deployment documentation
- Any new js or css file must be included in the registry. Learn about this on script and style registry section
- Once the winner is declared, create a branch for each issue with their issue ID as branch name and submit pull request