user page styling

Author: Ian Redpath

public/project/components/users/user.ts

@@ -19,9 +19,9 @@ export class User {
 	newLibraryName: string
 	fetchingUser: boolean
 
-	constructor(public params: RouteParams, public router: Router, 
+	constructor(public params: RouteParams, public router: Router,
 		public userService: UserService, public libraryService: LibraryService) {
-		
+
 		this.fetchingUser = true
 		this.userService.loggedIn()
 			.subscribe(data => {
@@ -82,4 +82,9 @@ export class User {
 			}, error => { alert(error.message) })
 
 	}
+
+	getWhoseLibraries() {
+		return this.userService.isActiveUser() && this.userService.getActiveUser()._id === this.user._id ?
+			'My' : `${this.user.username}'s`
+	}
 }

public/project/components/users/user.view.html

@@ -9,12 +9,14 @@ <h1>{{user.username}}</h1>
     <div class="col-sm-2 col-md-2"></div>
   </div>
   <div>
-    <h3>Libraries</h3>
+    
     <div class="new-library" *ngIf='hasEditRights()'>
+      <h4 class="no-bot-margin">Create a new library!</h4>
       <input type="text" [(ngModel)]="newLibraryName" placeholder="Library name">
       <button class="btn btn-default" (click)='newLibrary()'>+</button>
     </div>
 
+    <h3 class="no-bot-margin">{{ getWhoseLibraries() }} libraries</h3>
     <div class="user-libraries row">
         <div *ngFor="#library of user.libraries" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
           <button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeLibrary(library._id)"></button>

public/project/css/style.css

@@ -137,4 +137,8 @@
  		padding-right: 15px;
  		padding-left: 15px;
  	}
+ }
+
+ .no-bot-margin {
+ 	margin-bottom: 4px;
  }