Skip to content

UI

Jump to bottom
SB-GitHub Public edited this page Jan 18, 2018 · 1 revision

Header

  1. Company logo - link to the Home page.
  2. Learn button - link to the Groups page.
  3. Search:
    • @login - for searching users by username;

    • #direction - for searching skills direction;

    • ~subdirection - for searching skills subdirection;

    • $skill - for searching skills.
  4. Notification - latest notifications (mentor approve, new follower, training material update). Show all button - link to the User Notification Page.
  5. Userpic with Navigation tab button:

    • Profile - link to the User Profile page;

    • Status - link to the Status page;

    • Followers - link to the User Followers page;

    • Admin panel - for admin only, link to the Admin Panel Page;
    • Settings - link to the User Profile Settings Page;
    • Log out.

For unregistered users, Header contains only Company logo.

On Admin Panel Page, Header contains Company logo, Notification and Userpic with Navigation tab button.

Footer

  1. Copyrights.
  2. Company contacts.

Home Page

  1. Header.
  2. Welcome phrase with:

    • Log in button - by clicking appears Log in page;
    • Sign up button - by clicking appears Registration form.
  3. Trainee Platform description.
  4. Footer.

Red Notification block is needed when there is some special notifications or errors.

Log In Page

  1. E-mail input field.
  2. Password input field.
  3. Log-in button - link to a Status Page.
  4. Forgot password? button - link to the Forgot password Form.
  5. Sign up button - link to a Registration Form.

Registration Form


Registration contains 2 Steps.
Step 1:

  1. E-mail input field.
  2. Password input field.
  3. OK button - link to a Home Page with Confirmation letter red notification.

Step 2:

  1. Name input field.
  2. Country input field.
  3. City input field.
  4. Phone input field.
  5. OK button - link to the Home Page. On the home page appears red block with a text «Wait for Admin confirmation». After a user clicks this button, Admin receives a notification about the new user, whom he/she needs to Accept.

Forgot password Form

  1. E-mail input field.
  2. Send letter button - link to the Home Page with red notification field "Please check your e-mail box!".

Directions Page

  1. Header.
  2. Back button - link to the Home page.
  3. Directions blocks with Continue button - link to direction’s subdirections page.
  4. Footer.

Subdirections Page

  1. Header.
  2. Back button - link to the Directions Page.
  3. Subdirection list - on clicking appears subdirection's skills blocks.
  4. Filter by field - user can filter skills by level, oldest and newest added skills.
  5. Skills blocks - contains skill logo, Follow/Unfollow button, View graph button - Skill Graph appears in the pop-up window.
  6. Footer.

Skills Page

  1. Header.
  2. Go Back button - link to the Subdirections Page.
  3. Material level name (e.g. introduction).
  4. Training materials blocks which include a name and a brief description of the material (texts, tests).
  5. Footer.

Material Page

  1. Header.
  2. Go Back button - link to the Skills Page.
  3. Skill name with Follow/Unfollow button.
  4. Material's content.
  5. Footer.

User Profile Page

  1. Header.
  2. Userpic with user sequences sunburst diagram.
  3. Follow button - appears only on other users pages.
  4. Edit Profile button - appear only for Admin or profile owner.
  5. User's bio field.
  6. Navigation tab with a number of records:
    • Home - shows latest user's activity.
    • Followers - contains a list of user's followers with Follow/Unfollow button.
    • Following - contains a list of user's following users with Follow/Unfollow button.
    • Notifications - contains all user's notifications start from latest ones. Show more button - show more notifications.
  7. Footer.

Profile Settings Page

  1. Header.
  2. Picture profile block:
    • Imagebox - profile photo;
    • Upload new photo button - button opens dialog window to choose a file from a computer.
  3. Settings block:
    • Input Name field;
    • Input E-mail field;
    • Input Country field;
    • Input Region field;
    • Input Bio field;
    • Input GitHub link field;
    • Input LinkedIn link field.
    • Save button.
  4. Change password block:
    • Input Old password field;
    • Input New password field;
    • Input Confirm new password field;
    • Update password button.
  5. Delete account block:
    • Delete button - opens dialog window with confirmation.
  6. Footer.

Status Page

  1. Header.
  2. Direction name.
  3. Skills progress block:
    • Skill name;
    • Round diagram with percent of learned material;
    • Materials buttons - links to the skill's Material Page. If a user has already learned a material - button is green, if not - button is red.
  4. Footer.

Admin Panel Page

  1. Header.
  2. Navigation bar:

    • Extractor - by clicking appears Extractor Settings Page;
    • Skills - by clicking appears Skills Editing Page;
    • Materials - by clicking appears Materials Editing Page;
    • Users - by clicking appears Users Editing Page.
  3. Footer.

Extractor Settings Page

  1. Crawlers block:
    • Run button with search word field - to run the corresponding Crawler.
    • Crawlers info table - id, search word, creation data, status, Run/Stop button, View Graph button - by clicking crawler’s graph appears.
  2. Stop words block:
    • Confirm button (by clicking this button sends a request to stop_words document to add new words) with the stop words input field (admin writes stop word separating them with commas).
    • Stop words list with delete button
 on every word functional element.

Skills Editing Page:


  1. Navigation tab:
    • Search field - to search direction or sub-direction.
    • Ungroup skill button - to show all skills, which comes from a Crawler.
    • Group list - on clicking appears groups' subgroups list;
    • Add group button.
  2. Skills block:
    • Search skills field;
    • Select items checkbox;
    • New/all buttons - to show only new skills (which aren't in any group yet) or to show all skills that Crawler collect.
    • Skills list;
    • Move button. 


Materials Editing Page:

  1. Skill choose button - on clicking appears dialog window with skill list and search field;
  2. Skill name;
  3. Material block:
    • Material name;
    • Edit button - by clicking appears editor where Admin can edit skill's name and description.
    • Delete button.
  4. Add button - by clicking appears editor where Admin can add skill's name and description.

Users Editing Page:

  1. Users blocks - userpic, username, email, confirm/delete button.
    When Admin clicks Confirm button user receives an e-mail, in which said that Admin confirmed him/her.

Clone this wiki locally