From dd4f25eea802fd88ea641d730432b56f562e0861 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Sun, 15 Dec 2019 21:27:37 +0100 Subject: add channel avatar to watch view --- .../src/app/shared/channel/avatar.component.html | 8 ++++ .../src/app/shared/channel/avatar.component.scss | 32 +++++++++++++ client/src/app/shared/channel/avatar.component.ts | 11 +++++ client/src/app/shared/shared.module.ts | 3 ++ .../videos/+video-watch/video-watch.component.html | 28 ++++++------ .../videos/+video-watch/video-watch.component.scss | 53 ++++++++-------------- 6 files changed, 88 insertions(+), 47 deletions(-) create mode 100644 client/src/app/shared/channel/avatar.component.html create mode 100644 client/src/app/shared/channel/avatar.component.scss create mode 100644 client/src/app/shared/channel/avatar.component.ts (limited to 'client/src/app') diff --git a/client/src/app/shared/channel/avatar.component.html b/client/src/app/shared/channel/avatar.component.html new file mode 100644 index 000000000..362feacd7 --- /dev/null +++ b/client/src/app/shared/channel/avatar.component.html @@ -0,0 +1,8 @@ +
+ + Channel avatar + + + Account avatar + +
diff --git a/client/src/app/shared/channel/avatar.component.scss b/client/src/app/shared/channel/avatar.component.scss new file mode 100644 index 000000000..b778c9eb0 --- /dev/null +++ b/client/src/app/shared/channel/avatar.component.scss @@ -0,0 +1,32 @@ +@import '_mixins'; + +.wrapper { + width: 35px; + height: 35px; + min-width: 35px; + min-height: 35px; + position: relative; + margin-right: 5px; + + a { + @include disable-outline; + } + + a img { + height: 100%; + object-fit: cover; + position: absolute; + top:50%; + left:50%; + border-radius: 50%; + transform: translate(-50%,-50%) + } + + a:nth-of-type(2) img { + height: 60%; + width: 60%; + border: 2px solid var(--mainBackgroundColor); + transform: translateX(15%); + position: relative; + } +} diff --git a/client/src/app/shared/channel/avatar.component.ts b/client/src/app/shared/channel/avatar.component.ts new file mode 100644 index 000000000..2201c04ca --- /dev/null +++ b/client/src/app/shared/channel/avatar.component.ts @@ -0,0 +1,11 @@ +import { Component, Input } from '@angular/core' +import { VideoDetails } from '../video/video-details.model' + +@Component({ + selector: 'avatar-channel', + templateUrl: './avatar.component.html', + styleUrls: [ './avatar.component.scss' ] +}) +export class AvatarComponent { + @Input() video: VideoDetails +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index 29ddf7b81..a32520820 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -66,6 +66,7 @@ import { OverviewService } from '@app/shared/overview' import { UserBanModalComponent } from '@app/shared/moderation' import { UserModerationDropdownComponent } from '@app/shared/moderation/user-moderation-dropdown.component' import { BlocklistService } from '@app/shared/blocklist' +import { AvatarComponent } from '@app/shared/channel/avatar.component' import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.component' import { UserHistoryService } from '@app/shared/users/user-history.service' import { UserNotificationService } from '@app/shared/users/user-notification.service' @@ -158,6 +159,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop TimestampInputComponent, InputReadonlyCopyComponent, + AvatarComponent, SubscribeButtonComponent, RemoteSubscribeComponent, InstanceFeaturesTableComponent, @@ -228,6 +230,7 @@ import { InputReadonlyCopyComponent } from '@app/shared/forms/input-readonly-cop PeertubeCheckboxComponent, TimestampInputComponent, + AvatarComponent, SubscribeButtonComponent, RemoteSubscribeComponent, InstanceFeaturesTableComponent, 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 c4a293d0c..9e653ea78 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.html +++ b/client/src/app/videos/+video-watch/video-watch.component.html @@ -136,26 +136,26 @@ -
- - Video channel avatar - {{ video.channel.displayName }} - + - -
-
+
@@ -170,7 +170,7 @@
-
+
Privacy {{ video.privacy.label }} 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 314f9849d..15335b0b3 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.scss +++ b/client/src/app/videos/+video-watch/video-watch.component.scss @@ -3,8 +3,8 @@ @import '_bootstrap-variables'; @import '_miniature'; -$other-videos-width: 260px; $player-factor: 1.7; // 16/9 +$video-info-margin-left: 44px; @function getPlayerHeight($width){ @return calc(#{$width} / #{$player-factor}) @@ -180,40 +180,24 @@ $player-factor: 1.7; // 16/9 } } - my-subscribe-button { - margin-left: 5px; - } - } + .video-info-channel-left { + flex-grow: 1; - .video-info-by { - - a { - @include disable-default-a-behaviour; - - display: inline; - align-items: center; - font-size: 13px; - color: var(--mainForegroundColor); - - span:hover { - opacity: 0.8; - } + .video-info-channel-left-links { + display: flex; + flex-direction: column; + position: relative; + line-height: 1.3; - span { - margin-left: 2px; - } - - img { - @include avatar(18px); - - margin: -2px 5px 0 0; + a:nth-of-type(2) { + font-weight: 500; + font-size: 90%; + } } } - my-help { - position: relative; - top: 1px; - margin-left: 2px; + my-subscribe-button { + margin-left: 5px; } } @@ -330,6 +314,7 @@ $player-factor: 1.7; // 16/9 .video-info-description { margin: 20px 0; + margin-left: $video-info-margin-left; font-size: 15px; .video-info-description-html { @@ -357,6 +342,10 @@ $player-factor: 1.7; // 16/9 } } + .video-attributes { + margin-left: $video-info-margin-left; + } + .video-attributes .video-attribute { font-size: 13px; display: block; @@ -391,11 +380,9 @@ $player-factor: 1.7; // 16/9 ::ng-deep .other-videos { padding-left: 15px; - flex-basis: $other-videos-width; - min-width: $other-videos-width; .title-page { - margin-top: 0 !important; + margin: 0 !important; } .video-miniature { -- cgit v1.2.3