aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorRigel Kent <sendmemail@rigelk.eu>2019-12-16 00:13:31 +0100
committerRigel Kent <sendmemail@rigelk.eu>2019-12-16 00:13:31 +0100
commit2de7f588eb7185525cc8687872fed443a24fd27b (patch)
tree7cbae75b8cf9083d403d660587cf927953cecc8a /client/src/app
parent88adad2d0f42028a116ccc8173f5a62ad306cc32 (diff)
downloadPeerTube-2de7f588eb7185525cc8687872fed443a24fd27b.tar.gz
PeerTube-2de7f588eb7185525cc8687872fed443a24fd27b.tar.zst
PeerTube-2de7f588eb7185525cc8687872fed443a24fd27b.zip
improve likes-dislikes bar usability
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.html20
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss10
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;