Skip to content

Commit 5c530ba

Browse files
author
Ian Redpath
committed
more styling stuff, fix mobile nav
1 parent a972709 commit 5c530ba

File tree

10 files changed

+82
-34
lines changed

10 files changed

+82
-34
lines changed

‎public/project/components/header/header.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,24 @@ export class Header {
3232

3333
isProfileRouteActive() {
3434
return this.isActiveUser()
35-
&& this.location.path().indexOf('user') > -1
35+
&& this.location.path().indexOf('users') > -1
3636
&& this.location.path().indexOf(this.userService.getActiveUser()._id) > -1
3737
&& !this.isDetailsRouteActive()
3838
}
3939

40+
isUsersRouteActive() {
41+
return this.location.path().indexOf('users') > -1
42+
&& !this.isProfileRouteActive()
43+
}
44+
45+
isMoviesRouteActive() {
46+
return this.location.path().indexOf('movies') > -1
47+
}
48+
49+
isLibrariesRouteActive() {
50+
return this.location.path().indexOf('libraries') > -1
51+
}
52+
4053
isActiveUser() {
4154
return !!this.userService.getActiveUser()
4255
}

‎public/project/components/header/header.view.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,16 @@
1717
<li *ngIf="!isActiveUser()" [class.active]="isLoginRouteActive()">
1818
<a [routerLink]='["/Login"]'>Sign In</a>
1919
</li>
20+
<!-- Mobile-specific options -->
21+
<li class="mobile-header" [class.active]="isUsersRouteActive()">
22+
<a [routerLink]='["/Users"]'>Users</a>
23+
</li>
24+
<li class="mobile-header" [class.active]="isLibrariesRouteActive()">
25+
<a [routerLink]='["/Libraries"]'>Libraries</a>
26+
</li>
27+
<li class="mobile-header" [class.active]="isMoviesRouteActive()">
28+
<a [routerLink]='["/Movies"]'>Movies</a>
29+
</li>
2030
<li *ngIf="isActiveUser()" [class.active]="isDetailsRouteActive()">
2131
<a [routerLink]='["/Details", { user: userService.getActiveUser()._id }]'>Edit Info</a>
2232
</li>

‎public/project/components/libraries/libraries.view.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ <h1>Libraries</h1>
1414
<h4>Highest rated libraries</h4>
1515
<div class="sample-libraries row">
1616
<div *ngFor="#library of highestRatedLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
17-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
17+
<div class="movie-poster-container" style="padding:7px">
1818
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
1919
</div>
20-
<div class="library-details" style="height:25%">
20+
<div class="library-details">
2121
<span>{{library.name}} ({{library.user.username}})</span>
2222
<div class="ratings" style="display:block">
2323
<span class="glyphicon {{ getAvgRating(library.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
@@ -32,10 +32,10 @@ <h4>Highest rated libraries</h4>
3232
<h4>Libraries with the most movies</h4>
3333
<div class="sample-libraries row">
3434
<div *ngFor="#library of mostMoviesLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
35-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
35+
<div class="movie-poster-container" style="padding:7px">
3636
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
3737
</div>
38-
<div class="library-details" style="height:25%">
38+
<div class="library-details">
3939
<span>{{library.name}} ({{library.user.username}})</span>
4040
<span style="display:block">{{library.movies.length}} {{library.movies.length === 1 ? 'movie' : 'movies' }}</span>
4141
</div>
@@ -44,10 +44,10 @@ <h4>Libraries with the most movies</h4>
4444
<h4>Libraries with the most comments</h4>
4545
<div class="sample-libraries row">
4646
<div *ngFor="#library of mostCommentsLibs.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
47-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
47+
<div class="movie-poster-container" style="padding:7px">
4848
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
4949
</div>
50-
<div class="library-details" style="height:25%">
50+
<div class="library-details">
5151
<span>{{library.name}} ({{library.user.username}})</span>
5252
<span style="display:block">{{library.comments.length}} {{library.comments.length === 1 ? 'comment' : 'comments' }}</span>
5353
</div>
@@ -57,10 +57,10 @@ <h4>Libraries with the most comments</h4>
5757
<div class="libraries-search" *ngIf="showSearchResults">
5858
<div class="sample-libraries row">
5959
<div *ngFor="#library of getShownResults()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
60-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
60+
<div class="movie-poster-container" style="padding:7px">
6161
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
6262
</div>
63-
<div class="library-details" style="height:25%">
63+
<div class="library-details">
6464
<span>{{library.name}} ({{library.user.username}})</span>
6565
</div>
6666
</div>

‎public/project/components/libraries/library.view.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
1313
</div>
1414
<div class="library-contents row">
1515
<div *ngFor="#movie of library.movies" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
16-
<button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeMovie(movie._id)" style="position:absolute; right:0px; top:0px"></button>
16+
<button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeMovie(movie._id)"></button>
1717
<div class="movie-poster-container" style="margin:12px">
1818
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
1919
</div>
20-
<div class="movie-title-year" style="height:25%">
20+
<div class="movie-title-year">
2121
<span>{{movie.title}} ({{movie.year}})</span>
2222
</div>
2323
</div>

‎public/project/components/movies/movies.view.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ <h4>Highest rated movies</h4>
1616

1717
<div class="sample-movies row">
1818
<div *ngFor="#movie of highestRatedMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
19-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
19+
<div class="movie-poster-container" style="padding:7px">
2020
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
2121
</div>
22-
<div class="movie-title-year" style="height:25%">
22+
<div class="movie-title-year">
2323
<span>{{movie.title}} ({{movie.year}})</span>
2424
<div class="ratings" style="display:block">
2525
<span class="glyphicon {{ getAvgRating(movie.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
@@ -34,10 +34,10 @@ <h4>Highest rated movies</h4>
3434
<h4>Movies with the most libraries</h4>
3535
<div class="sample-movies row">
3636
<div *ngFor="#movie of mostLibsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
37-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
37+
<div class="movie-poster-container" style="padding:7px">
3838
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
3939
</div>
40-
<div class="movie-title-year" style="height:25%">
40+
<div class="movie-title-year">
4141
<span>{{movie.title}} ({{movie.year}})</span>
4242
<span style="display:block">Found in {{ movie.libraries.length }} {{ movie.libraries.length == 1 ? 'library' : 'libraries' }}</span>
4343
</div>
@@ -46,10 +46,10 @@ <h4>Movies with the most libraries</h4>
4646
<h4>Movies with the most comments</h4>
4747
<div class="sample-movies row">
4848
<div *ngFor="#movie of mostCommentsMovies.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
49-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
49+
<div class="movie-poster-container" style="padding:7px">
5050
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
5151
</div>
52-
<div class="movie-title-year" style="height:25%">
52+
<div class="movie-title-year">
5353
<span>{{movie.title}} ({{movie.year}})</span>
5454
<span style="display:block">{{movie.comments.length}} {{ movie.comments.length === 1 ? 'comment' : 'comments' }}</span>
5555
</div>
@@ -59,10 +59,10 @@ <h4>Movies with the most comments</h4>
5959
<div class="movies-search" *ngIf="showSearchResults">
6060
<div class="movies-search-results row">
6161
<div *ngFor="#movie of results" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
62-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
62+
<div class="movie-poster-container" style="padding:7px">
6363
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
6464
</div>
65-
<div class="movie-title-year" style="height:25%">
65+
<div class="movie-title-year">
6666
<span>{{movie.title}} ({{movie.year}})</span>
6767
</div>
6868
</div>

‎public/project/components/sidebar/sidebar.ts‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { View, Component } from 'angular2/core'
22
import { RouterLink, Router, Location } from 'angular2/router'
3+
import { UserService } from '../../services/userService'
34

45
@Component({
56
selector: "vml-sidebar"
@@ -9,14 +10,30 @@ import { RouterLink, Router, Location } from 'angular2/router'
910
directives: [RouterLink]
1011
})
1112
export class Sidebar {
12-
location: Location
1313

14-
constructor(public router: Router, location: Location) {
15-
this.location = location
14+
constructor(public router: Router, public location: Location, public userService: UserService) {
1615
}
1716

1817
isRouteActive(route) {
1918
return this.location.path().indexOf(route) > -1
2019
}
2120

21+
isUsersRouteActive() {
22+
return this.location.path().indexOf('users') > -1
23+
&& this.notViewingSelf()
24+
}
25+
26+
notViewingSelf() {
27+
return !this.userService.isActiveUser()
28+
|| this.location.path().indexOf(this.userService.getActiveUser()._id) === -1
29+
}
30+
31+
isMoviesRouteActive() {
32+
return this.location.path().indexOf('movies') > -1
33+
}
34+
35+
isLibrariesRouteActive() {
36+
return this.location.path().indexOf('libraries') > -1
37+
}
38+
2239
}

‎public/project/components/sidebar/sidebar.view.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<div class="row">
33
<div class="col-sm-3 col-md-2 sidebar">
44
<ul class="nav nav-sidebar">
5-
<li [class.active]="isRouteActive('users')">
5+
<li [class.active]="isUsersRouteActive()">
66
<a [routerLink]='["/Users"]'>Users</a>
77
</li>
8-
<li [class.active]="isRouteActive('libraries')">
8+
<li [class.active]="isLibrariesRouteActive()">
99
<a [routerLink]='["/Libraries"]'>Libraries</a>
1010
</li>
11-
<li [class.active]="isRouteActive('movies')">
11+
<li [class.active]="isMoviesRouteActive()">
1212
<a [routerLink]='["/Movies"]'>Movies</a>
1313
</li>
1414
</ul>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ <h3>Libraries</h3>
1717

1818
<div class="user-libraries row">
1919
<div *ngFor="#library of user.libraries" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
20-
<button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeLibrary(library._id)" style="position:absolute; right:0px; top:0px"></button>
21-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
20+
<button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeLibrary(library._id)"></button>
21+
<div class="movie-poster-container" style="padding:7px">
2222
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
2323
</div>
2424
<span>{{library.name}}</span>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ <h1>Users</h1>
1414
<h4>Users with the most libraries</h4>
1515
<div class="sample-users row">
1616
<div *ngFor="#user of mostLibUsers.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
17-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
17+
<div class="movie-poster-container" style="padding:7px">
1818
<img src="./assets/default_user.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/User', { user: user._id }]">
1919
</div>
20-
<div class="user-details" style="height:25%">
20+
<div class="user-details">
2121
<span>{{user.username}} ({{user.firstname}} {{user.lastname}})</span>
2222
<span style="display:block">{{user.libraries.length}} {{user.libraries.length === 1 ? 'library' : 'libraries'}}</span>
2323
</div>
@@ -26,10 +26,10 @@ <h4>Users with the most libraries</h4>
2626
<h4>Users with the most ratings</h4>
2727
<div class="sample-users row">
2828
<div *ngFor="#user of mostRatingsUsers.slice(0, 10)" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
29-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
29+
<div class="movie-poster-container" style="padding:7px">
3030
<img src="./assets/default_user.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/User', { user: user._id }]">
3131
</div>
32-
<div class="user-details" style="height:25%">
32+
<div class="user-details">
3333
<span>{{user.username}} ({{user.firstname}} {{user.lastname}})</span>
3434
<span style="display:block">Has rated {{user.ratings.length}} {{user.ratings.length === 1 ? 'thing' : 'things' }}</span>
3535
</div>
@@ -40,10 +40,10 @@ <h4>Users with the most ratings</h4>
4040

4141
<div class="users-search-results row">
4242
<div *ngFor="#user of getShownResults()" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
43-
<div class="movie-poster-container" style="position:relative; height:75%; padding:7px">
43+
<div class="movie-poster-container" style="padding:7px">
4444
<img src="./assets/default_user.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/User', { user: user._id }]">
4545
</div>
46-
<div class="user-details" style="height:25%">
46+
<div class="user-details">
4747
<span>{{user.username}} ({{user.firstname}} {{user.lastname}})</span>
4848
</div>
4949
</div>

‎public/project/css/style.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,10 @@
5353
display: inline-block;
5454
}
5555
.thumbnail-remove {
56-
float: right;
5756
display:none;
57+
position: absolute;
58+
top:0px;
59+
right:0px;
5860
}
5961
.library-name-container {
6062
display: inline-block;
@@ -102,4 +104,10 @@
102104
}
103105
.thumbnail-remove:hover {
104106
background-color: red;
107+
}
108+
109+
@media (min-width: 768px) {
110+
.mobile-header {
111+
display: none !important;
112+
}
105113
}

0 commit comments

Comments
 (0)