mirror of https://github.com/Chocobozzz/PeerTube
improve likes-dislikes bar usability
parent
88adad2d0f
commit
2de7f588eb
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue