From 6a9e1d42f878c55ac5e2af8a1c98e6fe28a04f36 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 6 Dec 2017 18:04:40 +0100 Subject: Add likes/dislikes bar --- client/src/app/shared/video/video-details.model.ts | 5 +++++ .../videos/+video-watch/video-watch.component.html | 10 ++++++++-- .../videos/+video-watch/video-watch.component.scss | 23 +++++++++++++++++++--- 3 files changed, 33 insertions(+), 5 deletions(-) (limited to 'client') diff --git a/client/src/app/shared/video/video-details.model.ts b/client/src/app/shared/video/video-details.model.ts index 1a956da7c..b96f8f6c8 100644 --- a/client/src/app/shared/video/video-details.model.ts +++ b/client/src/app/shared/video/video-details.model.ts @@ -46,6 +46,8 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { privacy: VideoPrivacy privacyLabel: string account: Account + likesPercent: number + dislikesPercent: number constructor (hash: VideoDetailsServerModel) { super(hash) @@ -56,6 +58,9 @@ export class VideoDetails extends Video implements VideoDetailsServerModel { this.files = hash.files this.channel = hash.channel this.account = hash.account + + this.likesPercent = (this.likes / (this.likes + this.dislikes)) * 100 + this.dislikesPercent = (this.dislikes / (this.likes + this.dislikes)) * 100 } getAppropriateMagnetUri (actualDownloadSpeed = 0) { 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 f31e82bff..b17392ff1 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -73,8 +73,14 @@ -
- {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views +
+
+ {{ video.createdAt | myFromNow }} - {{ video.views | myNumberFormatter }} views +
+ +
+ +
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 7bcfeb7c3..5064ceb95 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -84,9 +84,26 @@ } } - .video-info-date-views { - font-size: 16px; - margin-bottom: 10px; + .video-info-date-views-bar { + display: flex; + + .video-info-date-views { + font-size: 16px; + margin-bottom: 10px; + flex-grow: 1; + } + + .video-info-likes-dislikes-bar { + height: 5px; + width: 186px; + background-color: #E5E5E5; + margin-top: 25px; + + .likes-bar { + height: 100%; + background-color: #39CC0B; + } + } } .video-info-channel { -- cgit v1.2.3