diff options
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.html | 20 | ||||
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.scss | 10 |
2 files changed, 23 insertions, 7 deletions
diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html index 9e653ea78..b3def01fa 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html | |||
@@ -114,13 +114,19 @@ | |||
114 | ></my-video-actions-dropdown> | 114 | ></my-video-actions-dropdown> |
115 | </div> | 115 | </div> |
116 | 116 | ||
117 | <div | 117 | <div class="video-info-likes-dislikes-bar-outerContainer"> |
118 | class="video-info-likes-dislikes-bar" | 118 | <div |
119 | *ngIf="video.likes !== 0 || video.dislikes !== 0" | 119 | class="video-info-likes-dislikes-bar-innerContainer" |
120 | [ngbTooltip]="likesBarTooltipText" | 120 | *ngIf="video.likes !== 0 || video.dislikes !== 0" |
121 | placement="bottom" | 121 | [ngbTooltip]="likesBarTooltipText" |
122 | > | 122 | placement="bottom" |
123 | <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> | 123 | > |
124 | <div | ||
125 | class="video-info-likes-dislikes-bar" | ||
126 | > | ||
127 | <div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> | ||
128 | </div> | ||
129 | </div> | ||
124 | </div> | 130 | </div> |
125 | </div> | 131 | </div> |
126 | 132 | ||
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss index 15335b0b3..a8400c196 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss | |||
@@ -209,6 +209,7 @@ $video-info-margin-left: 44px; | |||
209 | .video-actions-rates { | 209 | .video-actions-rates { |
210 | margin: 0 0 10px 0; | 210 | margin: 0 0 10px 0; |
211 | align-items: start; | 211 | align-items: start; |
212 | align-self: end; | ||
212 | width: max-content; | 213 | width: max-content; |
213 | 214 | ||
214 | .video-actions { | 215 | .video-actions { |
@@ -295,6 +296,15 @@ $video-info-margin-left: 44px; | |||
295 | } | 296 | } |
296 | } | 297 | } |
297 | 298 | ||
299 | .video-info-likes-dislikes-bar-outerContainer { | ||
300 | position: relative; | ||
301 | } | ||
302 | |||
303 | .video-info-likes-dislikes-bar-innerContainer { | ||
304 | position: absolute; | ||
305 | height: 30px; | ||
306 | } | ||
307 | |||
298 | .video-info-likes-dislikes-bar { | 308 | .video-info-likes-dislikes-bar { |
299 | $likes-bar-height: 2px; | 309 | $likes-bar-height: 2px; |
300 | height: $likes-bar-height; | 310 | height: $likes-bar-height; |