search-page.component.css

.wrapper {
    display: flex;
    justify-content: space-between;
}

angular-cli.json

"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.min.css",

challange 2

event.clientX

const rotY = (posX / document.documentElement.clientWidth * 300) - 150;
this.element.style = `transform: rotateY(${rotY}deg);`;

dragable.directive.ts

import { Directive, ElementRef, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Directive({selector: '[appDragable]'})
export class DragableDirective implements OnInit {
    private element = this.el.nativeElement;
    private deviations = 30;
    private mouseDown$ = Observable.fromEvent<MouseEvent>(this.element, 'mousedown');
    private mouseMove$ = Observable.fromEvent<MouseEvent>(document, 'mousemove');
    private mouseUp$ = Observable.fromEvent<MouseEvent>(document, 'mouseup')
        .map((e) => {
            if (this.element.offsetLeft > this.element.parentElement.offsetLeft - this.deviations &&
                (this.element.offsetLeft + this.element.offsetWidth) <
                (this.element.parentElement.offsetLeft + this.element.parentElement.offsetWidth + this.deviations)) {
                 this.resetElementPosition();
            } else if (!this.element.classList.contains('showContent')) {
                this.element.className += ' showContent';
            }
        });
    

    constructor(private el: ElementRef) {}

    ngOnInit() {
        let offsetY: number;
        let offsetX: number;

        this.mouseDown$
            .flatMap((mouse) => {
                // get mouse position relative to element
                offsetX = mouse.offsetX;
                offsetY = mouse.offsetY;
                return this.mouseMove$.takeUntil(this.mouseUp$);
            })
            .map(mouse => {
                this.setElementPosition(mouse, offsetY, offsetX);
            })
            .subscribe(m => console.log('mousemove'));
    }

    // Update element position relative to current position of mouse
    setElementPosition(mouse, offsetY, offsetX) {
        this.element.style.position = 'absolute';
        this.element.style.top = mouse.pageY - offsetY + 'px';
        this.element.style.left = mouse.pageX - offsetX + 'px';
        this.element.style.zIndex = '10';
    }

    // Reset element position to return it to list
    resetElementPosition() {
        this.element.style.position = 'relative';
        this.element.style.top = 'inherit';
        this.element.style.left = 'inherit';
        this.element.classList.remove('showContent');
    }
}

rotate.directive.ts

import { Directive, ElementRef, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

@Directive({selector: '[appMouseTransform]'})
export class AppMouseTransformDirective implements OnInit {
    private element = this.el.nativeElement;
    private mouseDown$ = Observable.fromEvent<MouseEvent>(this.element, 'mousedown');
    private mouseUp$ = Observable.fromEvent<MouseEvent>(document, 'mouseup');
    
    private mouseMove$ = Observable.fromEvent<MouseEvent>(document, 'mousemove')
        .map(event => {
            return {x: event.clientX, y: event.clientY };
        })
        .takeUntil(this.mouseUp$);
    constructor(private el: ElementRef) {}

    ngOnInit() {
        this.mouseDown$.switchMap((mouseEvent) => this.mouseMove$)

        .subscribe(
            (pos) => {
                const rotY = (pos.x / document.documentElement.clientWidth * 300) - 150;
                this.element.style = `transform: rotateY(${rotY}deg);`;
            }
        )
    }
}

style.css

body {
    position: relative;
    padding: 20px;
    background: url('http://www.indexoutofbounds.net/content/images/2015/10/BS_Background-AngularJS.png');
}

.login-wrapper {
    margin: 0 auto;    
}

user-profile.component.html

<div class="col-md-6 col-md-offset-3">
  <div class="panel panel-info" *ngIf="user" appMouseTransform>
    <div class="panel-heading">
      <span class="avatar-wrapper">
          <img [src]="user.avatar_url" class="img-responsive img-rounded" width="35" height="35" alt="avatar">
      </span>
      <span class="login-wrapper">{{ user.login }}</span>
    </div>
    <div class="panel-body">
      <table class="table table-hover">
        <tbody>
           <tr *ngIf="user.name">
            <td>Name</td>
            <td>{{user.name}}</td>
          </tr>
          <tr *ngIf="user.email">
            <td>Email</td>
            <td>{{user.email}}</td>
          </tr>
          <tr *ngIf="user.bio">
            <td>Bio</td>
            <td>{{user.bio}}</td>
          </tr>
          <tr *ngIf="user.company">
            <td>Company</td>
            <td>{{user.company}}</td>
          </tr>
          <tr *ngIf="user.location">
            <td>Location</td>
            <td>{{user.location}}</td>
          </tr>  
          <tr *ngIf="user.created_at">
            <td>Created</td>
            <td>{{user.created_at}}</td>
          </tr>       
          <tr>
            <td>Github page</td>
            <td>
              <a [href]="user.html_url" target="_blank">
                Link               
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

users-list.component.css

.list-wrapper {       
    min-width: 200px;
    font-size: 14px;
}

ul {
    list-style: none;
}

.list-group-item {
    max-height: 55px;
    cursor: move;
    overflow: hidden;
    -webkit-transition: max-height 0.8s, border-radius 0.8s;
    transition: max-height 0.8s, border-radius 0.8s;
    -webkit-user-select: none;
    user-select: none;    
    border-radius: 0;
}

.list-group-item p:first-child {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.list-group-item.showContent {
   border-radius: 10px;
   max-height: 170px;
   -webkit-transition: max-height 0.8s, border-radius 0.8s;
   transition: max-height 0.8s, border-radius 0.8s;
}

users-list.component.html

<div class="list-wrapper panel" [ngClass]="{'panel-success': count, 'panel-warning': !count}">
  <div class="panel-heading">Search results({{count || 0}})</div>
  <div class="panel-body">
    <div class="list-group">
      
      <a appDragAndDrop class="list-group-item" *ngFor="let user of users">
        <p>
          <span class="avatar-wrapper">
            <img draggable="false" [src]="user.avatar_url" class="img-responsive img-rounded" width="35" height="35" alt="avatar">
          </span>
          <span class="login-wrapper">
            <span>{{ user.login }}</span>
          </span>
           <a [routerLink]="['user', user.id]">
              <i class="fa fa-link" aria-hidden="true"></i>
            </a>
        </p>
        <a [href]="user.html_url" target="_blanc">Github page</a>
      </a>

    </div>
    <div *ngIf="!count">No results found</div>
  </div>
</div>

users-profile.component.css

.panel-info {
    box-shadow: 3px 3px 5px lightblue;
    font-size: 14px;
    -webkit-user-select: none;    
    user-select: none;
}

.panel-heading  {
    display: flex;
    align-items: center;
}

users.service.ts Github API

  const API_URL = 'https://api.github.com';
  
  let q = 'q=';
  if (searchObj.username) {
    q += `${searchObj.username}+in%3Alogin`;
  }
  if (searchObj.language) {
    q += `+language%3A${searchObj.language}`;
  }
  if (!searchObj.username && !searchObj.language) {
    q += '*===empty===*';
  }