OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

improve likes-dislikes bar usability

pull/2157/head
Rigel Kent 2019-12-16 00:13:31 +01:00
parent 88adad2d0f
commit 2de7f588eb
No known key found for this signature in database
GPG Key ID: 5E53E96A494E452F
2 changed files with 23 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/src/app/videos/+video-watch/video-watch.component.html
View File

@ -114,13 +114,19 @@
></my-video-actions-dropdown> ></my-video-actions-dropdown>
</div> </div>
<div <div class="video-info-likes-dislikes-bar-outerContainer">
class="video-info-likes-dislikes-bar" <div
*ngIf="video.likes !== 0 || video.dislikes !== 0" class="video-info-likes-dislikes-bar-innerContainer"
[ngbTooltip]="likesBarTooltipText" *ngIf="video.likes !== 0 || video.dislikes !== 0"
placement="bottom" [ngbTooltip]="likesBarTooltipText"
> placement="bottom"
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div> >
<div
class="video-info-likes-dislikes-bar"
>
<div class="likes-bar" [ngStyle]="{ 'width.%': video.likesPercent }"></div>
</div>
</div>
</div> </div>
</div> </div>

10
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -209,6 +209,7 @@ $video-info-margin-left: 44px;
.video-actions-rates { .video-actions-rates {
margin: 0 0 10px 0; margin: 0 0 10px 0;
align-items: start; align-items: start;
align-self: end;
width: max-content; width: max-content;
.video-actions { .video-actions {
@ -295,6 +296,15 @@ $video-info-margin-left: 44px;
} }
} }
.video-info-likes-dislikes-bar-outerContainer {
position: relative;
}
.video-info-likes-dislikes-bar-innerContainer {
position: absolute;
height: 30px;
}
.video-info-likes-dislikes-bar { .video-info-likes-dislikes-bar {
$likes-bar-height: 2px; $likes-bar-height: 2px;
height: $likes-bar-height; height: $likes-bar-height;