Skip to content

Commit fe426f7

Browse files
author
Ian Redpath
committed
ratings styling
1 parent 5eb4c71 commit fe426f7

File tree

3 files changed

+73
-41
lines changed

3 files changed

+73
-41
lines changed

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,30 +13,31 @@ <h1 *ngIf="!hasEditRights()">{{library.name}}</h1>
1313
</div>
1414

1515
<div class="ratings-container">
16-
<label *ngIf="userService.getActiveUser()" for="my-rating">My Rating:</label>
17-
<div *ngIf="userService.getActiveUser()" class="my-rating" (mouseleave)="clearPreview()" (mouseenter)="storeRating()">
18-
<span class="glyphicon clickable {{ myRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
19-
(mouseenter)="ratePreview(1)" (click)="rate(1)"></span>
20-
<span class="glyphicon clickable {{ myRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
21-
(mouseenter)="ratePreview(2)" (click)="rate(2)"></span>
22-
<span class="glyphicon clickable {{ myRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
23-
(mouseenter)="ratePreview(3)" (click)="rate(3)"></span>
24-
<span class="glyphicon clickable {{ myRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
25-
(mouseenter)="ratePreview(4)" (click)="rate(4)"></span>
26-
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
27-
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
28-
<button *ngIf="userService.getActiveUser()" class="btn btn-default btn-sm clear-rating" (click)="unrate()">
29-
Clear
30-
</button>
16+
<div class="my-rating-wrapper" *ngIf="userService.getActiveUser()">
17+
<label for="my-rating">My Rating:</label>
18+
<div class="my-rating ratings-inline" (mouseleave)="clearPreview()" (mouseenter)="storeRating()">
19+
<span class="glyphicon clickable {{ myRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
20+
(mouseenter)="ratePreview(1)" (click)="rate(1)"></span>
21+
<span class="glyphicon clickable {{ myRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
22+
(mouseenter)="ratePreview(2)" (click)="rate(2)"></span>
23+
<span class="glyphicon clickable {{ myRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
24+
(mouseenter)="ratePreview(3)" (click)="rate(3)"></span>
25+
<span class="glyphicon clickable {{ myRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
26+
(mouseenter)="ratePreview(4)" (click)="rate(4)"></span>
27+
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
28+
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
29+
<span *ngIf="myRating !== 0 && myRatingBackup !== 0" class="clear-rating clickable glyphicon glyphicon-remove" (click)="unrate()"></span>
30+
</div>
3131
</div>
32-
32+
<div class="ratings-avg">
3333
<label for="ratings-inline">Average Rating:</label>
3434
<div class="ratings-inline">
3535
<span class="glyphicon {{ avgRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
3636
<span class="glyphicon {{ avgRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
3737
<span class="glyphicon {{ avgRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
3838
<span class="glyphicon {{ avgRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
3939
<span class="glyphicon {{ avgRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"></span>
40+
</div>
4041
</div>
4142
</div>
4243
<div class="library-contents row results-row">

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

Lines changed: 42 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,24 @@ <h1 class="movie-title">{{omdbMovie.title}}</h1>
1010
</select>
1111
<button class="btn btn-small" (click)="addMovie()">+</button>
1212
</div>
13+
14+
<div class="my-rating-wrapper">
15+
<label for="my-rating">My Rating:</label>
16+
<div class="my-rating ratings-inline" (mouseleave)="clearPreview()" (mouseenter)="storeRating()">
17+
<span class="glyphicon clickable {{ myRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
18+
(mouseenter)="ratePreview(1)" (click)="rate(1)"></span>
19+
<span class="glyphicon clickable {{ myRating < 2 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
20+
(mouseenter)="ratePreview(2)" (click)="rate(2)"></span>
21+
<span class="glyphicon clickable {{ myRating < 3 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
22+
(mouseenter)="ratePreview(3)" (click)="rate(3)"></span>
23+
<span class="glyphicon clickable {{ myRating < 4 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
24+
(mouseenter)="ratePreview(4)" (click)="rate(4)"></span>
25+
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
26+
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
27+
<span *ngIf="myRating !== 0 && myRatingBackup !== 0" class="clear-rating clickable glyphicon glyphicon-remove" (click)="unrate()"></span>
28+
</div>
29+
</div>
30+
<!--
1331
<label for="my-rating">My Rating:</label>
1432
<div class="my-rating" (mouseleave)="clearPreview()" (mouseenter)="storeRating()">
1533
<span class="glyphicon clickable {{ myRating < 1 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
@@ -23,7 +41,7 @@ <h1 class="movie-title">{{omdbMovie.title}}</h1>
2341
<span class="glyphicon clickable {{ myRating < 5 ? 'glyphicon-star-empty': 'glyphicon-star' }}"
2442
(mouseenter)="ratePreview(5)" (click)="rate(5)"></span>
2543
<button class="btn btn-default" (click)="unrate()">Clear</button>
26-
</div>
44+
</div>-->
2745
</div>
2846
</div>
2947
<div class="col-xs-6 col-sm-6 col-md-8 col-lg-8 xxs">
@@ -65,29 +83,29 @@ <h1 class="movie-title">{{omdbMovie.title}}</h1>
6583
</div>
6684
</div>
6785
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 comments">
68-
<h3 class="h4-margins">Comments</h3>
69-
<div class="results-row">
70-
<span class="no-results" *ngIf="movie.comments.length ===0">No comments</span>
71-
<table>
72-
<tr *ngFor="#comment of movie.comments">
73-
<td><a [routerLink]='["/User", { user: comment.userId }]'>{{comment.username}}</a></td>
74-
<td>
75-
<div *ngIf="isEditingComment(comment._id)">
76-
<input type="text" [(ngModel)]="editCommentText">
77-
<span class="glyphicon glyphicon-check" (click)="saveEditComment()"></span>
78-
<button class="btn btn-default" (click)="cancelEditComment()">Cancel</button>
79-
</div>
80-
<div *ngIf="!isEditingComment(comment._id)" (click)="editComment(comment)">
81-
{{comment.comment}}
82-
</div>
83-
</td>
84-
</tr>
85-
</table>
86-
<div *ngIf="userService.getActiveUser()">
87-
<input type="text" class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()">
88-
<button class="btn" (click)="addComment()">Comment!</button>
89-
</div>
90-
</div>
86+
<h3 class="h4-margins">Comments</h3>
87+
<div class="results-row">
88+
<span class="no-results" *ngIf="movie.comments.length ===0">No comments</span>
89+
<table>
90+
<tr *ngFor="#comment of movie.comments">
91+
<td><a [routerLink]='["/User", { user: comment.userId }]'>{{comment.username}}</a></td>
92+
<td>
93+
<div *ngIf="isEditingComment(comment._id)">
94+
<input type="text" [(ngModel)]="editCommentText">
95+
<span class="glyphicon glyphicon-check" (click)="saveEditComment()"></span>
96+
<button class="btn btn-default" (click)="cancelEditComment()">Cancel</button>
97+
</div>
98+
<div *ngIf="!isEditingComment(comment._id)" (click)="editComment(comment)">
99+
{{comment.comment}}
100+
</div>
101+
</td>
102+
</tr>
103+
</table>
104+
<div *ngIf="userService.getActiveUser()">
105+
<input type="text" class="comment-input" [(ngModel)]="newComment" (keyup.enter)="addComment()">
106+
<button class="btn" (click)="addComment()">Comment!</button>
107+
</div>
108+
</div>
91109
</div>
92110
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" *ngIf="!fetchingLibraries">
93111
<h3 class="h4-margins">Libraries With This Title</h3>

‎public/project/css/style.css‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,11 @@
114114
}
115115

116116
.clear-rating {
117-
display: inline-block;
117+
padding-left: 6px;
118+
}
119+
120+
.clear-rating:hover {
121+
color:blue;
118122
}
119123

120124
.user-img {
@@ -160,4 +164,13 @@
160164
.comments {
161165
margin-bottom: 20px;
162166
margin-top: 20px;
167+
}
168+
169+
.ratings-container {
170+
margin: 10px;
171+
}
172+
173+
.my-rating-wrapper {
174+
margin-bottom: 10px;
175+
margin-top: 10px;
163176
}

0 commit comments

Comments
 (0)