You are updating the provided UI prototype following the provided updated design and the outlined requirements.

Challenge Requirements

You will address the following in this challenge :

Timeline Page

• Screenshots :

  • 8.Timeline-Desktop.png

  • 9.Timeline-Full-View.png

  • 17.Timeline-Tablet.png

  • 25.Timeline-Mobile.png

• Add new page : timeline_loggedin.html

• The page should have the logged in header version.

• The page should have progressive scrolling. You need to simulate items loading by scrolling to bottom of the page.

• (Refer to Highlighting Widgets and View More section)  Add ‘new stories’ button to top of the page when the user is scrolling as in (02.Pins-View-Desktop-scrolled.png). Clicking on the button will scroll to top of the page.

  • You need to add a JS code to trigger adding button after user scrolling to simulate the ‘view stories’ button functionality.

  • The timeline should have highlighted styling as indication of newly added items, same as the (01.Pins-View desktop.png).

• Images in timeline item content area are not background images. They will be set based on the item content.

Search Feature

• Screenshots 

  • 4.Search.png

  • 5.Result.png

  • 13.Search-autosuggest.png

  • 14.Result.png

  • 21.Search-Mobile.png

  • 22.Search-Result.png

• Add search bar at top header in all pages.

• The search bar should be autocomplete.

• The ‘Category-11’ in search bar is a drop down list.

• Tag should work as follow :

  • When user types, an autocomplete list appears.

  • User must select an option from autocomplete.

  • If user clicked tab or insert comma the selected option will be changed to a tag with (x) icon.

  • User can type “:” character after the selected item from autocomplete to provide additional text i.e. “Puzzle : Verigames”, clicking tab or insert comma will convert the input to a tag..

  • Clicking (x) will remove the item.

  • Clicking on the tag will change it back to editable text.

  • We will have spaces in the input text, so in responsive view as we don’t have tabs so you need to provide a solution that allow creating tags with spaces.

• In search result page, the result are widgets similar to pins as in pins_logged.html page.

• The search result page should have progressive loading of results as in other pages that display pins list.

• This should be updated and functional in all UI prototype pages.

• Everything you are updating in the challenge should be responsive.

Activity Listing panel

• Screenshots 

  • 7.Activity-open.png

  • 16.Activity-View-Tablet.png

  • 24.Activity.png

• This div panel should be floating/fixed-position, and content will be pushed to left. While in mobile view it will cover the content.

• By default it is hidden, it can be toggled on/off by clicking on the ‘Electricity’ icon/button at the header.

• The div panel content is scrollable, it also has progressive loading of items, simulate this functionality.

• In mobile view, you need to show the button at the top.

• This feature and electricity button should be visible only in logged in version.

Highlighting Widgets and View More

• Screenshots 

  • 11.Scrolled View Tablet.png

  • 12.Pin-View.png

  • 10.Category-View Tablet.png

  • 7.Activity-open.png

  • 18.Category-Mobile.png

  • 1.Category-View-Desktop.png

  • 19.Scroll-Style-Mobile.png

  • 17.Timeline-Tablet.png

  • 20.Pin-View.png

  • 3.View-Pin.png

  • 2.Srolled-style.png

• We will add widgets to the pages in real time, we want to show user new added widgets, and allow user to be notified about new added items when user is scrolling down in the page.

• For highlighting widgets it will match the screenshots. The highlight should fade away when user click on widget or when user scroll to top of the page. The highlight should fade in 5 seconds.

  • You need to simulate the functionality.

• "New Pins, click to view" button is added to header, this button is used to take user to top of the page when they are scrolling to bottom and there are new pins added to page.

  • Clicking on the button will take scroll the page to top.

• Pages to be affected in the prototype are :

  • user_profile.html/user_profile_logged.html

  • pins.html/pins_logged.html

  • mostrepin_logged.html

  • mostlike_logged.html

  • category_details.html/category_details_logged.html

  • categories.html/categories_logged.html

  • boards.html/boards_logged.html

  • board_details.html/board_details_logged.html

• Everything you are updating in the challenge should be responsive.

Comments icon

• The design has a new icon with counter that represents number of comments in pin widget. Keep other icons as is in the widget. 

• You can use the font comment icon <span class="glyphicons glyphicons-comments"></span>.

• Screenshot : 3.View-Pin.png

• Pages to be updated :

  • user_profile.html/user_profile_logged.html

  • pins.html/pins_logged.html

  • mostrepin_logged.html

  • mostlike_logged.html

  • category_details.html/category_details_logged.html

  • board_details.html/board_details_logged.html

• Everything you are updating in the challenge should be responsive.

Categories Page

• Screenshot : 1.Category-View-Desktop.png

• Update the widgets in the page to match the screenshot.

• page name : categories.html and categories_logged.html

• Everything you are updating in the challenge should be responsive.

Boards Page

• As we did for categories page, update boards page (boards.html and boards_logged.html) to have a widget similar to category but the icons in the widget should be as follow :

  • first icon should be Date icon same as in categories page.

  • 2nd icon should be board numbers as in boards details page (the "yellow icon + '5'" icon)

  • 3rd icon should be number of users as in categories page.

• Everything you are updating in the challenge should be responsive.

Specific HTML/CSS/JavaScript Requirements

HTML/CSS Requirements

• Your HTML code must be valid HTML5 and follow best practices

• 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 layout 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 style-sheet.

• 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 Requirements

• All JavaScript used must not have any copyrights to any third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

• You are allowed to use JQuery and Bootstrap framework for this challenge.

Browsers Requirements

• Latest Chrome, Firefox and Safari Browsers

• IE11

Documents

UI Prototype and updated design files are provided in challenge forums.

 

Final Submission Guidelines

Deliverable

• Updated UI prototype files.

• Text file to reviewers with change log : file names and line numbers.