diff options
5 files changed, 29 insertions, 4 deletions
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html index e9c8179b7..cb23bb522 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.html +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.html | |||
@@ -5,7 +5,7 @@ | |||
5 | <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true"> | 5 | <div class="channels" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true"> |
6 | <div class="section channel" *ngFor="let videoChannel of videoChannels"> | 6 | <div class="section channel" *ngFor="let videoChannel of videoChannels"> |
7 | <div class="section-title"> | 7 | <div class="section-title"> |
8 | <a [routerLink]="[ '/video-channels', videoChannel.nameWithHost ]" i18n-title title="See this video channel"> | 8 | <a [routerLink]="getVideoChannelLink(videoChannel)" i18n-title title="See this video channel"> |
9 | <img [src]="videoChannel.avatarUrl" alt="Avatar" /> | 9 | <img [src]="videoChannel.avatarUrl" alt="Avatar" /> |
10 | 10 | ||
11 | <div>{{ videoChannel.displayName }}</div> | 11 | <div>{{ videoChannel.displayName }}</div> |
@@ -20,6 +20,10 @@ | |||
20 | 20 | ||
21 | <my-video-miniature *ngFor="let video of getVideosOf(videoChannel)" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> | 21 | <my-video-miniature *ngFor="let video of getVideosOf(videoChannel)" [video]="video" [user]="user" [displayVideoActions]="false"></my-video-miniature> |
22 | </div> | 22 | </div> |
23 | |||
24 | <a class="show-more" i18n [routerLink]="getVideoChannelLink(videoChannel)"> | ||
25 | Show this channel | ||
26 | </a> | ||
23 | </div> | 27 | </div> |
24 | </div> | 28 | </div> |
25 | </div> | 29 | </div> |
diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts index 4d07d653f..7144f4b5f 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts | |||
@@ -89,4 +89,8 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy { | |||
89 | 89 | ||
90 | this.loadMoreChannels() | 90 | this.loadMoreChannels() |
91 | } | 91 | } |
92 | |||
93 | getVideoChannelLink (videoChannel: VideoChannel) { | ||
94 | return [ '/video-channels', videoChannel.nameWithHost ] | ||
95 | } | ||
92 | } | 96 | } |
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index dac178bde..3658ee3c0 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss | |||
@@ -9,7 +9,7 @@ $more-margin-right: 10px; | |||
9 | width: $video-miniature-width; | 9 | width: $video-miniature-width; |
10 | display: inline-flex; | 10 | display: inline-flex; |
11 | flex-direction: column; | 11 | flex-direction: column; |
12 | margin-bottom: 30px; | 12 | margin-bottom: $video-miniature-margin-bottom; |
13 | height: 195px; | 13 | height: 195px; |
14 | vertical-align: top; | 14 | vertical-align: top; |
15 | 15 | ||
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 26c327956..e4ed88d31 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss | |||
@@ -142,10 +142,13 @@ $play-overlay-width: 18px; | |||
142 | @mixin miniature-rows { | 142 | @mixin miniature-rows { |
143 | max-height: 540px; // 2 rows max | 143 | max-height: 540px; // 2 rows max |
144 | overflow: hidden; | 144 | overflow: hidden; |
145 | padding-top: 10px; | ||
146 | 145 | ||
147 | &:first-child { | 146 | &:first-child { |
148 | padding-top: 30px; | 147 | padding-top: 30px; |
148 | |||
149 | .section-title { | ||
150 | border-top: none !important; | ||
151 | } | ||
149 | } | 152 | } |
150 | 153 | ||
151 | my-video-miniature { | 154 | my-video-miniature { |
@@ -155,9 +158,11 @@ $play-overlay-width: 18px; | |||
155 | .section-title { | 158 | .section-title { |
156 | font-size: 24px; | 159 | font-size: 24px; |
157 | font-weight: $font-semibold; | 160 | font-weight: $font-semibold; |
158 | margin-bottom: 30px; | 161 | padding-top: 15px; |
162 | margin-bottom: 15px; | ||
159 | display: flex; | 163 | display: flex; |
160 | justify-content: space-between; | 164 | justify-content: space-between; |
165 | border-top: 1px solid $separator-border-color; | ||
161 | 166 | ||
162 | a { | 167 | a { |
163 | &:hover, &:focus:not(.focus-visible), &:active { | 168 | &:hover, &:focus:not(.focus-visible), &:active { |
@@ -194,6 +199,17 @@ $play-overlay-width: 18px; | |||
194 | } | 199 | } |
195 | } | 200 | } |
196 | 201 | ||
202 | .show-more { | ||
203 | position: relative; | ||
204 | top: -5px; | ||
205 | display: inline-block; | ||
206 | font-size: 16px; | ||
207 | text-transform: uppercase; | ||
208 | color: $grey-foreground-color; | ||
209 | margin-bottom: 10px; | ||
210 | font-weight: $font-semibold; | ||
211 | } | ||
212 | |||
197 | @media screen and (max-width: $mobile-view) { | 213 | @media screen and (max-width: $mobile-view) { |
198 | max-height: initial; | 214 | max-height: initial; |
199 | overflow: initial; | 215 | overflow: initial; |
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index aafeda257..f629dc23e 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss | |||
@@ -47,6 +47,7 @@ $footer-border-color: $header-border-color; | |||
47 | $separator-border-color: rgba(0, 0, 0, 0.10); | 47 | $separator-border-color: rgba(0, 0, 0, 0.10); |
48 | 48 | ||
49 | $video-miniature-width: 238px; | 49 | $video-miniature-width: 238px; |
50 | $video-miniature-margin-bottom: 30px; | ||
50 | $video-thumbnail-height: 122px; | 51 | $video-thumbnail-height: 122px; |
51 | $video-thumbnail-width: 223px; | 52 | $video-thumbnail-width: 223px; |
52 | $video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height; | 53 | $video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height; |