From cf78883c70dca99fc519374d55620d9403d482be Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 11 Jun 2020 14:33:33 +0200 Subject: [PATCH] Limit thumbnail sizes --- .../account-video-channels.component.scss | 2 +- client/src/app/search/search.component.html | 2 +- client/src/app/search/search.component.ts | 13 +- client/src/app/shared/misc/screen.service.ts | 10 +- .../app/shared/video/abstract-video-list.html | 16 ++- .../app/shared/video/abstract-video-list.scss | 23 +--- .../app/shared/video/abstract-video-list.ts | 7 +- .../video/video-miniature.component.html | 22 ++-- .../video/video-miniature.component.scss | 14 +- .../shared/video/video-miniature.component.ts | 8 ++ .../video-list/video-overview.component.html | 24 ++-- .../video-list/video-overview.component.scss | 7 +- .../sass/include/_bootstrap-variables.scss | 2 +- client/src/sass/include/_miniature.scss | 123 +++++++++--------- client/src/sass/include/_variables.scss | 1 - 15 files changed, 151 insertions(+), 123 deletions(-) diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss index 042290809..4957e91d7 100644 --- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss +++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.scss @@ -3,7 +3,7 @@ @import '_miniature'; .margin-content { - @include adapt-margin-content-width; + @include fluid-videos-miniature-layout; } .section { diff --git a/client/src/app/search/search.component.html b/client/src/app/search/search.component.html index d723606db..6acdedf92 100644 --- a/client/src/app/search/search.component.html +++ b/client/src/app/search/search.component.html @@ -54,7 +54,7 @@
diff --git a/client/src/app/search/search.component.ts b/client/src/app/search/search.component.ts index 7ab0ed9d6..0439fdf51 100644 --- a/client/src/app/search/search.component.ts +++ b/client/src/app/search/search.component.ts @@ -8,11 +8,11 @@ import { SearchService } from '@app/search/search.service' import { immutableAssign } from '@app/shared/misc/utils' import { ComponentPagination } from '@app/shared/rest/component-pagination.model' import { VideoChannel } from '@app/shared/video-channel/video-channel.model' +import { MiniatureDisplayOptions } from '@app/shared/video/video-miniature.component' import { Video } from '@app/shared/video/video.model' import { MetaService } from '@ngx-meta/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { ServerConfig } from '@shared/models' -import { UserService } from '@app/shared' import { SearchTargetType } from '@shared/models/search/search-target-query.model' @Component({ @@ -32,6 +32,17 @@ export class SearchComponent implements OnInit, OnDestroy { isSearchFilterCollapsed = true currentSearch: string + videoDisplayOptions: MiniatureDisplayOptions = { + date: true, + views: true, + by: true, + avatar: false, + privacyLabel: false, + privacyText: false, + state: false, + blacklistInfo: false + } + errorMessage: string serverConfig: ServerConfig diff --git a/client/src/app/shared/misc/screen.service.ts b/client/src/app/shared/misc/screen.service.ts index fa9c71e5b..a69fad31d 100644 --- a/client/src/app/shared/misc/screen.service.ts +++ b/client/src/app/shared/misc/screen.service.ts @@ -36,11 +36,11 @@ export class ScreenService { let numberOfVideos = 1 - if (screenWidth > 1850) numberOfVideos = 6 - else if (screenWidth > 1600) numberOfVideos = 5 - else if (screenWidth > 1370) numberOfVideos = 4 - else if (screenWidth > 1100) numberOfVideos = 3 - else if (screenWidth > 850) numberOfVideos = 2 + if (screenWidth > 1850) numberOfVideos = 7 + else if (screenWidth > 1600) numberOfVideos = 6 + else if (screenWidth > 1370) numberOfVideos = 5 + else if (screenWidth > 1100) numberOfVideos = 4 + else if (screenWidth > 850) numberOfVideos = 3 return numberOfVideos } diff --git a/client/src/app/shared/video/abstract-video-list.html b/client/src/app/shared/video/abstract-video-list.html index 8ce3b25b0..9e551c1c8 100644 --- a/client/src/app/shared/video/abstract-video-list.html +++ b/client/src/app/shared/video/abstract-video-list.html @@ -35,13 +35,15 @@ {{ getCurrentGroupedDateLabel(video) }} - - +
+ + +
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss index 982204e21..7f23098aa 100644 --- a/client/src/app/shared/video/abstract-video-list.scss +++ b/client/src/app/shared/video/abstract-video-list.scss @@ -3,24 +3,6 @@ @import '_mixins'; @import '_miniature'; -.videos { - $column-width: #{$video-thumbnail-width - 25px}; - - display: grid; - column-gap: calc(10px + .2%); - grid-template-columns: repeat( - auto-fill, - minmax( - var(--miniature-min-width, #{$column-width}), - 1fr - ) - ); - - @media screen and (min-width: #{breakpoint(fhd)}) { - --miniature-min-width: #{$column-width + 100px}; - } -} - .videos-header { display: flex; justify-content: space-between; @@ -74,8 +56,8 @@ } } -:host-context(.main-col:not(.expanded)) .margin-content { - @include adapt-margin-content-width($fluid: true); +.margin-content { + @include fluid-videos-miniature-layout; } @media screen and (max-width: $mobile-view) { @@ -83,6 +65,7 @@ flex-direction: column; align-items: center; height: auto; + margin-bottom: 10px; .title-page { margin-bottom: 10px; diff --git a/client/src/app/shared/video/abstract-video-list.ts b/client/src/app/shared/video/abstract-video-list.ts index 69d5c0010..76aa683fc 100644 --- a/client/src/app/shared/video/abstract-video-list.ts +++ b/client/src/app/shared/video/abstract-video-list.ts @@ -56,7 +56,7 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor date: true, views: true, by: true, - avatar: true, + avatar: false, privacyLabel: true, privacyText: false, state: false, @@ -139,6 +139,11 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy, DisableFor if (this.hasDoneFirstQuery) this.reloadVideos() } ) + + // Display avatar in mobile view + if (this.screenService.isInMobileView()) { + this.displayOptions.avatar = true + } } ngOnDestroy () { diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html index 575505f63..d37ab478d 100644 --- a/client/src/app/shared/video/video-miniature.component.html +++ b/client/src/app/shared/video/video-miniature.component.html @@ -9,32 +9,34 @@
- {{ video.name }} -
- +
+ Avatar +
+ {{ video.name }} + - + • {video.views, plural, =1 {1 view} other {{{ video.views | myNumberFormatter }} views}} - + {{ video.byVideoChannel }} - +
{{ video.privacy.label }} - diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index 1e5580b9a..4e7c9fb57 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -19,16 +19,22 @@ $more-margin-right: 15px; .video-miniature-information { width: $video-miniature-width - $more-button-width - $more-margin-right; line-height: normal; - font-size: 13px; + + .avatar { + margin: 10px 10px 0 0; + + img { + @include avatar(40px); + } + } .video-miniature-name { @include miniature-name; - font-size: 110%; } .video-miniature-created-at-views { display: block; - font-size: 95%; + font-size: 13px; } .video-miniature-account, @@ -37,7 +43,7 @@ $more-margin-right: 15px; @include ellipsis; display: block; - font-size: 95%; + font-size: 13px; color: pvar(--greyForegroundColor); &:hover { diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts index f0b0992e2..ccf90af54 100644 --- a/client/src/app/shared/video/video-miniature.component.ts +++ b/client/src/app/shared/video/video-miniature.component.ts @@ -178,6 +178,14 @@ export class VideoMiniatureComponent implements OnInit { return '' } + getAvatarUrl () { + if (this.ownerDisplayTypeChosen === 'account') { + return this.video.accountAvatarUrl + } + + return this.video.videoChannelAvatarUrl + } + loadActions () { if (this.displayVideoActions) this.showActions = true diff --git a/client/src/app/videos/video-list/video-overview.component.html b/client/src/app/videos/video-list/video-overview.component.html index 72e101558..999628de4 100644 --- a/client/src/app/videos/video-list/video-overview.component.html +++ b/client/src/app/videos/video-list/video-overview.component.html @@ -7,25 +7,29 @@ > -
+
{{ object.category.label }}
- - +
+ + +
-
+
#{{ object.tag }}
- - +
+ + +
-
+
Avatar @@ -34,8 +38,10 @@
- - +
+ + +
diff --git a/client/src/app/videos/video-list/video-overview.component.scss b/client/src/app/videos/video-list/video-overview.component.scss index ade6f53b7..c1d10188a 100644 --- a/client/src/app/videos/video-list/video-overview.component.scss +++ b/client/src/app/videos/video-list/video-overview.component.scss @@ -2,8 +2,13 @@ @import '_mixins'; @import '_miniature'; +.section-title { + // make the element span a full grid row within .videos grid + grid-column: 1 / -1; +} + .margin-content { - @include adapt-margin-content-width; + @include fluid-videos-miniature-layout; } .section { diff --git a/client/src/sass/include/_bootstrap-variables.scss b/client/src/sass/include/_bootstrap-variables.scss index 09c58a697..41a1448c4 100644 --- a/client/src/sass/include/_bootstrap-variables.scss +++ b/client/src/sass/include/_bootstrap-variables.scss @@ -18,7 +18,7 @@ $grid-breakpoints: ( xxl: 1600px, // SCREEN GROUP - fhd: 1920px, + fhd: 1800px, qhd: 2560px, uhd: 3840px ); diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index d89d6f9ff..d79086723 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -108,38 +108,6 @@ $play-overlay-width: 18px; color: #fff; } -@mixin video-miniature-small-screen { - text-align: center; - - ::ng-deep .video-miniature { - padding-right: 0; - height: auto; - width: 100%; - margin-bottom: 20px; - - .video-miniature-information { - width: 100% !important; - text-align: left; - - span { - width: 100%; - } - } - - .video-thumbnail { - margin-bottom: 10px; - width: 100%; - height: calc(100% / #{$video-thumbnail-ratio}); - border-radius: 0; - - img { - width: 100%; - height: 100%; - } - } - } -} - @mixin miniature-rows { &:first-child { padding-top: 30px; @@ -149,10 +117,6 @@ $play-overlay-width: 18px; } } - my-video-miniature { - text-align: left; - } - .section-title { font-size: 24px; font-weight: $font-semibold; @@ -213,44 +177,81 @@ $play-overlay-width: 18px; max-height: initial; overflow: initial; - @include video-miniature-small-screen; - .section-title { font-size: 17px; + margin-left: 10px; } } } -@mixin adapt-margin-content-width($fluid: false) { - @if $fluid { - margin-left: 3vw !important; - margin-right: 3vw !important; - } @else { - width: $video-miniature-width * 6; - margin: auto !important; +@mixin fluid-videos-miniature-layout { + margin-left: 3vw !important; + margin-right: 3vw !important; - @media screen and (max-width: 1800px) { - width: $video-miniature-width * 5; + @media screen and (max-width: $mobile-view) { + width: auto; + margin: 0 !important; + + .videos { + text-align: center; + + ::ng-deep .video-miniature { + padding-right: 0; + height: auto; + width: 100%; + margin-bottom: 25px; + + .video-miniature-information { + width: 100% !important; + text-align: left; + + span { + width: 100%; + } + } + + .video-thumbnail { + border-radius: 0; + } + } } + } - @media screen and (max-width: 1800px - $video-miniature-width) { - width: $video-miniature-width * 4; - } + @media screen and (min-width: #{breakpoint(fhd)}) { + margin-left: 6vw !important; + margin-right: 6vw !important; + } - @media screen and (max-width: 1800px - (2* $video-miniature-width)) { - width: $video-miniature-width * 3; - } + @media screen and (min-width: $mobile-view) { - @media screen and (max-width: 1800px - (3* $video-miniature-width)) { - width: $video-miniature-width * 2; - } + .videos { + --miniature-min-width: #{$video-thumbnail-width - 15px}; + --miniature-max-width: #{$video-thumbnail-width}; - @media screen and (max-width: $mobile-view) { - width: auto; - margin: 0 !important; + display: grid; + column-gap: 5px; + grid-template-columns: repeat( + auto-fill, + minmax( + var(--miniature-min-width), + 1fr + ) + ); - .videos { - @include video-miniature-small-screen; + @media screen and (min-width: #{breakpoint(fhd)}) { + column-gap: 1%; + --miniature-min-width: #{$video-thumbnail-width}; + } + + .video-wrapper { + margin: 0 auto; + width: 100%; + + my-video-miniature { + display: block; + min-width: var(--miniature-min-width); + max-width: var(--miniature-max-width); + } } } } diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 14f1ae76c..56b1ff884 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -59,7 +59,6 @@ $video-miniature-width: 238px; $video-miniature-margin-bottom: 30px; $video-thumbnail-height: 122px; $video-thumbnail-width: 223px; -$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height; $theater-bottom-space: 115px;