Skip to content

Commit e3dc7fb

Browse files
author
Ian Redpath
committed
remove all inline styling, fix library styles on movie page, add 480px breakpt for movie view
1 parent 5c530ba commit e3dc7fb

File tree

7 files changed

+96
-62
lines changed

7 files changed

+96
-62
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ <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="padding:7px">
18-
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
17+
<div class="movie-poster-container">
18+
<img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
1919
</div>
2020
<div class="library-details">
2121
<span>{{library.name}} ({{library.user.username}})</span>
22-
<div class="ratings" style="display:block">
22+
<div class="ratings">
2323
<span class="glyphicon {{ getAvgRating(library.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2424
<span class="glyphicon {{ getAvgRating(library.ratings) < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2525
<span class="glyphicon {{ getAvgRating(library.ratings) < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
@@ -32,33 +32,33 @@ <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="padding:7px">
36-
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
35+
<div class="movie-poster-container">
36+
<img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
3737
</div>
3838
<div class="library-details">
3939
<span>{{library.name}} ({{library.user.username}})</span>
40-
<span style="display:block">{{library.movies.length}} {{library.movies.length === 1 ? 'movie' : 'movies' }}</span>
40+
<span class="more-info">{{library.movies.length}} {{library.movies.length === 1 ? 'movie' : 'movies' }}</span>
4141
</div>
4242
</div>
4343
</div>
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="padding:7px">
48-
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
47+
<div class="movie-poster-container">
48+
<img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
4949
</div>
5050
<div class="library-details">
5151
<span>{{library.name}} ({{library.user.username}})</span>
52-
<span style="display:block">{{library.comments.length}} {{library.comments.length === 1 ? 'comment' : 'comments' }}</span>
52+
<span class="more-info">{{library.comments.length}} {{library.comments.length === 1 ? 'comment' : 'comments' }}</span>
5353
</div>
5454
</div>
5555
</div>
5656
</div>
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="padding:7px">
61-
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
60+
<div class="movie-poster-container">
61+
<img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
6262
</div>
6363
<div class="library-details">
6464
<span>{{library.name}} ({{library.user.username}})</span>

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
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">
1616
<button *ngIf="hasEditRights()" class="btn btn-xs glyphicon glyphicon-remove thumbnail-remove" (click)="removeMovie(movie._id)"></button>
17-
<div class="movie-poster-container" style="margin:12px">
18-
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
17+
<div class="movie-poster-container-library">
18+
<img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
1919
</div>
2020
<div class="movie-title-year">
2121
<span>{{movie.title}} ({{movie.year}})</span>
@@ -36,11 +36,13 @@ <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
3636
(mouseenter)="ratePreview(4)" (click)="rate(4)"></span>
3737
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
3838
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
39+
<button *ngIf="userService.getActiveUser()" class="btn btn-default btn-sm clear-rating" (click)="unrate()">
40+
Clear
41+
</button>
3942
</div>
40-
<button *ngIf="userService.getActiveUser()" class="btn btn-default btn-sm" style="display:inline-block" (click)="unrate()">Clear</button>
4143

42-
<label for="ratings">Average Rating:</label>
43-
<div class="ratings">
44+
<label for="ratings-inline">Average Rating:</label>
45+
<div class="ratings-inline">
4446
<span class="glyphicon {{ avgRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
4547
<span class="glyphicon {{ avgRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
4648
<span class="glyphicon {{ avgRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div *ngIf='!fetchingMovie' class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
22
<h1 class="movie-title">{{omdbMovie.title}}</h1>
3-
<div class="col-sm-4 col-md-5">
3+
<div class="col-xs-6 col-sm-6 col-md-4 col-lg-4 xxs">
44
<img *ngIf="movie.image" class="movie-image" src={{movie.image}}>
55
<div *ngIf="userService.getActiveUser()">
66
<div *ngIf="possibleLibs.length > 0">
@@ -21,12 +21,11 @@ <h1 class="movie-title">{{omdbMovie.title}}</h1>
2121
(mouseenter)="ratePreview(4)" (click)="rate(4)"></span>
2222
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
2323
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
24+
<button class="btn btn-default" (click)="unrate()">Clear</button>
2425
</div>
25-
<button class="btn btn-default" (click)="unrate()">Clear</button>
26-
2726
</div>
2827
</div>
29-
<div class="col-sm-8 col-md-7">
28+
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-8 xxs">
3029
<div class="actors-container">
3130
<label for="actors">Actors:</label>
3231
<ul class="actors">
@@ -63,12 +62,17 @@ <h1 class="movie-title">{{omdbMovie.title}}</h1>
6362
</div>
6463
</div>
6564
</div>
66-
<div class="col-sm-12 col-md-12" *ngIf="!fetchingLibraries">
65+
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" *ngIf="!fetchingLibraries">
6766
<h3>Libraries With This Title</h3>
68-
<div class="movie-in-libraries">
69-
<div *ngFor="#library of movie.libraries" class="movie-in-library">
70-
<a class="thumbnail" [routerLink]="['/Library', { library: library._id }]">{{library.name}}</a>
71-
</div>
67+
<div class="sample-libraries row">
68+
<div *ngFor="#library of movie.libraries" class="library-movie col-xs-6 col-sm-4 col-md-3 col-lg-2">
69+
<div class="movie-poster-container">
70+
<img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
71+
</div>
72+
<div class="library-details">
73+
<span>{{library.name}} ({{library.user.username}})</span>
74+
</div>
75+
</div>
7276
</div>
7377
</div>
7478
</div>

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,51 +16,52 @@ <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="padding:7px">
20-
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
19+
<div class="movie-poster-container">
20+
<img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
2121
</div>
2222
<div class="movie-title-year">
2323
<span>{{movie.title}} ({{movie.year}})</span>
24-
<div class="ratings" style="display:block">
24+
<div class="ratings">
2525
<span class="glyphicon {{ getAvgRating(movie.ratings) < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2626
<span class="glyphicon {{ getAvgRating(movie.ratings) < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2727
<span class="glyphicon {{ getAvgRating(movie.ratings) < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2828
<span class="glyphicon {{ getAvgRating(movie.ratings) < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
2929
<span class="glyphicon {{ getAvgRating(movie.ratings) < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
3030
</div>
31+
<span class="more-info">{{ movie.ratings.length }} {{ movie.ratings.length === 1 ? 'rating' : 'ratings' }}</span>
3132
</div>
3233
</div>
3334
</div>
3435
<h4>Movies with the most libraries</h4>
3536
<div class="sample-movies row">
3637
<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="padding:7px">
38-
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
38+
<div class="movie-poster-container">
39+
<img src={{movie.image}} class="movie-image" [routerLink]="['/Movie', { movie: movie.imdbId }]">
3940
</div>
4041
<div class="movie-title-year">
4142
<span>{{movie.title}} ({{movie.year}})</span>
42-
<span style="display:block">Found in {{ movie.libraries.length }} {{ movie.libraries.length == 1 ? 'library' : 'libraries' }}</span>
43+
<span class="more-info">Found in {{ movie.libraries.length }} {{ movie.libraries.length == 1 ? 'library' : 'libraries' }}</span>
4344
</div>
4445
</div>
4546
</div>
4647
<h4>Movies with the most comments</h4>
4748
<div class="sample-movies row">
4849
<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="padding:7px">
50-
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
50+
<div class="movie-poster-container">
51+
<img src={{movie.image}} class="movie-image" [routerLink]="['/Movie', { movie: movie.imdbId }]">
5152
</div>
5253
<div class="movie-title-year">
5354
<span>{{movie.title}} ({{movie.year}})</span>
54-
<span style="display:block">{{movie.comments.length}} {{ movie.comments.length === 1 ? 'comment' : 'comments' }}</span>
55+
<span class="more-info">{{movie.comments.length}} {{ movie.comments.length === 1 ? 'comment' : 'comments' }}</span>
5556
</div>
5657
</div>
5758
</div>
5859
</div>
5960
<div class="movies-search" *ngIf="showSearchResults">
6061
<div class="movies-search-results row">
6162
<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="padding:7px">
63-
<img src={{movie.image}} class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Movie', { movie: movie.imdbId }]">
63+
<div class="movie-poster-container">
64+
<img src={{movie.image}} class="movie-image"[routerLink]="['/Movie', { movie: movie.imdbId }]">
6465
</div>
6566
<div class="movie-title-year">
6667
<span>{{movie.title}} ({{movie.year}})</span>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div *ngIf='!fetchingUser' class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
22
<div class="profile-header">
33
<div class="col-sm-4 col-md-4">
4-
<img style="width:100%" src="./assets/default_user.png">
4+
<img class="user-img" src="./assets/default_user.png">
55
</div>
66
<div class="col-sm-6 col-md-6">
77
<h1>{{user.username}}</h1>
@@ -18,8 +18,8 @@ <h3>Libraries</h3>
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">
2020
<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">
22-
<img src="./assets/default_library.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/Library', { library: library._id }]">
21+
<div class="movie-poster-container">
22+
<img src="./assets/default_library.png" class="movie-image"[routerLink]="['/Library', { library: library._id }]">
2323
</div>
2424
<span>{{library.name}}</span>
2525
</div>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,24 +14,24 @@ <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="padding:7px">
18-
<img src="./assets/default_user.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/User', { user: user._id }]">
17+
<div class="movie-poster-container">
18+
<img src="./assets/default_user.png" class="movie-image"[routerLink]="['/User', { user: user._id }]">
1919
</div>
2020
<div class="user-details">
2121
<span>{{user.username}} ({{user.firstname}} {{user.lastname}})</span>
22-
<span style="display:block">{{user.libraries.length}} {{user.libraries.length === 1 ? 'library' : 'libraries'}}</span>
22+
<span class="more-info">{{user.libraries.length}} {{user.libraries.length === 1 ? 'library' : 'libraries'}}</span>
2323
</div>
2424
</div>
2525
</div>
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="padding:7px">
30-
<img src="./assets/default_user.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/User', { user: user._id }]">
29+
<div class="movie-poster-container">
30+
<img src="./assets/default_user.png" class="movie-image"[routerLink]="['/User', { user: user._id }]">
3131
</div>
3232
<div class="user-details">
3333
<span>{{user.username}} ({{user.firstname}} {{user.lastname}})</span>
34-
<span style="display:block">Has rated {{user.ratings.length}} {{user.ratings.length === 1 ? 'thing' : 'things' }}</span>
34+
<span class="more-info">Has rated {{user.ratings.length}} {{user.ratings.length === 1 ? 'thing' : 'things' }}</span>
3535
</div>
3636
</div>
3737
</div>
@@ -40,8 +40,8 @@ <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="padding:7px">
44-
<img src="./assets/default_user.png" class="" style="margin-bottom:2px; height:auto; width:100%; padding:4px"[routerLink]="['/User', { user: user._id }]">
43+
<div class="movie-poster-container">
44+
<img src="./assets/default_user.png" class="movie-image"[routerLink]="['/User', { user: user._id }]">
4545
</div>
4646
<div class="user-details">
4747
<span>{{user.username}} ({{user.firstname}} {{user.lastname}})</span>

‎public/project/css/style.css‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@
1515
.actors-container > label {
1616
vertical-align: top;
1717
}
18-
.actors {
19-
display:inline-block;
20-
}
2118
.ratings-container > label {
2219
vertical-align: top;
2320
}
2421
.ratings {
22+
display: block;
23+
}
24+
.ratings-inline {
2525
display: inline-block;
2626
}
2727
.rating-rt {
@@ -44,14 +44,6 @@
4444
text-align: center;
4545
height: 100%;
4646
}
47-
.movie-in-library {
48-
width: 120px;
49-
display: inline-block;
50-
}
51-
.user-library {
52-
width: 120px;
53-
display: inline-block;
54-
}
5547
.thumbnail-remove {
5648
display:none;
5749
position: absolute;
@@ -64,9 +56,6 @@
6456
.profile-header {
6557
display: inline-block;
6658
}
67-
.library {
68-
width:150px;
69-
}
7059

7160
.library-movie:hover {
7261
border: 1px solid black;
@@ -110,4 +99,42 @@
11099
.mobile-header {
111100
display: none !important;
112101
}
113-
}
102+
}
103+
104+
.movie-poster-container {
105+
padding: 7px;
106+
}
107+
108+
.movie-image {
109+
margin-bottom: 2px;
110+
height: auto;
111+
width: 100%;
112+
padding: 4px;
113+
}
114+
115+
.more-info {
116+
display:block;
117+
}
118+
119+
.clear-rating {
120+
display: inline-block;
121+
}
122+
123+
.user-img {
124+
width: 100%;
125+
}
126+
127+
.movie-poster-container-library {
128+
margin:12px;
129+
}
130+
131+
@media (max-width: 480px) {
132+
.xxs {
133+
width: 100%;
134+
float: left;
135+
position: relative;
136+
min-height: 1px;
137+
padding-right: 15px;
138+
padding-left: 15px;
139+
}
140+
}

0 commit comments

Comments
 (0)