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 19a4b3c9c..96780e938 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 @@ -39,6 +39,7 @@
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 8f1e9deb5..7e88802f3 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 fluid-videos-miniature-margins; + @include grid-videos-miniature-margins; } .channel { @@ -93,6 +93,8 @@ my-subscribe-button { my-video-miniature { margin-right: 15px; + min-width: $video-thumbnail-medium-width; + max-width: $video-thumbnail-medium-width; } .no-results { @@ -105,7 +107,7 @@ my-subscribe-button { position: absolute; right: 0; background: linear-gradient(90deg, transparent 0, pvar(--channelBackgroundColor) 45px); - padding: ($video-thumbnail-height / 2 - 10px) 15px 0 60px; + padding: ($video-thumbnail-medium-height / 2 - 10px) 15px 0 60px; z-index: z(miniature) + 1; a { diff --git a/client/src/app/+accounts/accounts.component.scss b/client/src/app/+accounts/accounts.component.scss index d7213df1d..a836e84ce 100644 --- a/client/src/app/+accounts/accounts.component.scss +++ b/client/src/app/+accounts/accounts.component.scss @@ -15,7 +15,7 @@ } .links { - @include fluid-videos-miniature-margins; + @include grid-videos-miniature-margins; display: flex; justify-content: space-between; @@ -44,7 +44,7 @@ my-user-moderation-dropdown, } .account-info { - @include fluid-videos-miniature-margins(false, 15px); + @include grid-videos-miniature-margins(false, 15px); display: grid; grid-template-columns: 1fr min-content; diff --git a/client/src/app/+my-library/my-history/my-history.component.html b/client/src/app/+my-library/my-history/my-history.component.html index c180161e7..9dec64645 100644 --- a/client/src/app/+my-library/my-history/my-history.component.html +++ b/client/src/app/+my-library/my-history/my-history.component.html @@ -4,7 +4,7 @@
-
+
-
+
diff --git a/client/src/app/+my-library/my-history/my-history.component.scss b/client/src/app/+my-library/my-history/my-history.component.scss index 928a8a3da..af4a34b4b 100644 --- a/client/src/app/+my-library/my-history/my-history.component.scss +++ b/client/src/app/+my-library/my-history/my-history.component.scss @@ -11,16 +11,24 @@ .top-buttons { margin-bottom: 30px; - display: flex; + display: grid; + grid-template-columns: 250px 1fr auto auto; align-items: center; - flex-wrap: wrap; - #history-search { - @include peertube-input-text(250px); + .search-wrapper { + grid-column: 1; + + input { + @include peertube-input-text(250px); + } } .history-switch { + grid-column: 3; + display: flex; + margin-left: auto; + margin-right: 15px; label { margin: 0 0 0 5px; @@ -31,6 +39,8 @@ } .delete-history { + grid-column: 4; + @include peertube-button; @include grey-button; @include button-with-icon; @@ -40,26 +50,27 @@ } .video { - @include row-blocks; - - .my-video-miniature { - flex-grow: 1; - } + @include row-blocks($column-responsive: false); } -@media screen and (max-width: $mobile-view) { +@media screen and (max-width: $small-view) { .top-buttons { - .history-switch label, .delete-history { - @include ellipsis; - } + grid-template-columns: auto 1fr auto; + row-gap: 20px; - .history-switch label { - width: 60%; + .history-switch { + grid-row: 1; + grid-column: 1; + margin: 0; } .delete-history { - margin-left: auto; - max-width: 32%; + grid-row: 1; + grid-column: 3; + } + + .search-wrapper { + grid-column: 1 / 4; } } } diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html index 510b400c0..ff448ad87 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.html @@ -6,7 +6,7 @@ -
+
diff --git a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss index 9fc8be86c..3c1a4d2ad 100644 --- a/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss +++ b/client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss @@ -13,36 +13,36 @@ input[type=text] { margin-right: 10px; } +} - .video-channel-info { - flex-grow: 1; +.video-channel-info { + flex-grow: 1; - a.video-channel-names { - @include disable-default-a-behaviour; + a.video-channel-names { + @include disable-default-a-behaviour; - width: fit-content; - display: flex; - align-items: baseline; - color: pvar(--mainForegroundColor); + width: fit-content; + display: flex; + align-items: baseline; + color: pvar(--mainForegroundColor); - .video-channel-display-name { - font-weight: $font-semibold; - font-size: 18px; - } + .video-channel-display-name { + font-weight: $font-semibold; + font-size: 18px; + } - .video-channel-name { - font-size: 14px; - color: $grey-actor-name; - margin-left: 5px; - } + .video-channel-name { + font-size: 14px; + color: $grey-actor-name; + margin-left: 5px; } } +} - .actor-owner { - @include actor-owner; +.actor-owner { + @include actor-owner; - margin-top: 0; - } + margin-top: 0; } .video-subscriptions-header { @@ -50,32 +50,22 @@ input[type=text] { } @media screen and (max-width: $small-view) { - .video-channel { - .video-channel-info { - padding-bottom: 10px; - text-align: center; + .video-subscriptions-header input[type=text] { + width: 100% !important; + } - .video-channel-names { - flex-direction: column; - align-items: center !important; - margin: auto; - } - } + .video-channel-info { + padding-bottom: 10px; + text-align: center; - img { - margin-right: 0; + .video-channel-names { + flex-direction: column; + align-items: center !important; + margin: auto; } } -} -@media screen and (max-width: $mobile-view) { - .video-subscriptions-header { - flex-direction: column; - - input[type=text] { - width: 100% !important; - } + img { + margin-right: 0; } } - - diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html index a97b2b4fb..e7e3c17b3 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.html @@ -1,6 +1,6 @@ -
+
-
+
-
+
No videos in this playlist.
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss index 87a836a46..0c68dedf6 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss @@ -2,17 +2,21 @@ @import '_mixins'; @import '_miniature'; +.root { + display: grid; + grid-template-columns: auto 1fr; +} + .playlist-info { + grid-column: 1; background-color: pvar(--submenuBackgroundColor); margin-left: calc(#{pvar(--horizontalMarginContent)} * -1); margin-top: -$sub-menu-margin-bottom; - padding: 10px; + padding: 15px; display: flex; flex-direction: column; - justify-content: flex-start; - align-items: center; /* fix ellipsis dots background color */ ::ng-deep .miniature-name::after { @@ -59,15 +63,35 @@ transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); } -@media screen and (max-width: $small-view) { +.playlist-elements { + grid-column: 2; +} + +my-video-playlist-miniature { + width: $video-thumbnail-width; +} + +@include on-small-main-col { + my-video-playlist-miniature { + width: $video-thumbnail-medium-width; + } +} + +@include on-mobile-main-col { + .root { + display: block; + } + .playlist-info { - width: 100vw; + width: calc(100% + (2 * var(--horizontalMarginContent))); padding-top: 20px; margin-bottom: 10px; } - .playlist-elements { - padding: 0 !important; + my-video-playlist-miniature, + .playlist-buttons { + margin-left: auto; + margin-right: auto; } ::ng-deep my-video-playlist-element-miniature { diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html index afcf6a084..b88ea3db7 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.html @@ -1,8 +1,6 @@

- - - My playlists {{ pagination.totalItems }} - + + My playlists {{ pagination.totalItems }}

@@ -21,10 +19,10 @@
-
- -
+
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss index 2b7c88246..94187efd4 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss @@ -1,6 +1,10 @@ @import '_variables'; @import '_mixins'; +h1 { + display: flex; +} + .create-button { @include create-button; } @@ -9,64 +13,45 @@ input[type=text] { @include peertube-input-text(300px); } -::ng-deep .action-button { - &.action-button-delete { - margin-right: 10px; - } +.video-playlist { + @include row-blocks($column-responsive: false); } -.video-playlist { - @include row-blocks; - - .miniature-wrapper { - flex-grow: 1; - - ::ng-deep .miniature { - display: flex; - - .miniature-info { - margin-left: 10px; - width: auto; - } - } - } - - .video-playlist-buttons { - min-width: 190px; - height: max-content; - } +.video-playlist-buttons { + display: flex; + margin-left: 10px; + align-self: flex-end; } .video-playlists-header { margin-bottom: 30px; } -@media screen and (max-width: $small-view) { +my-video-playlist-miniature { + display: block; + flex-grow: 1; +} + +my-delete-button { + margin-right: 10px; +} + +@include on-small-main-col { .video-playlists-header { text-align: center; } .video-playlist { - - .video-playlist-buttons { - margin-top: 10px; - } + flex-wrap: wrap; } - my-video-playlist-miniature ::ng-deep .miniature { - flex-direction: column; - - .miniature-info { - margin-left: 0 !important; - } - - .miniature-name { - max-width: $video-thumbnail-width; - } + .video-playlist-buttons { + margin-top: 10px; + margin-left: auto; } } -@media screen and (max-width: $mobile-view) { +@include on-mobile-main-col { .video-playlists-header { flex-direction: column; @@ -75,4 +60,8 @@ input[type=text] { margin-bottom: 12px; } } + + .action-button { + margin-left: 0; + } } diff --git a/client/src/app/+my-library/my-videos/my-videos.component.scss b/client/src/app/+my-library/my-videos/my-videos.component.scss index 57473896b..a03baa056 100644 --- a/client/src/app/+my-library/my-videos/my-videos.component.scss +++ b/client/src/app/+my-library/my-videos/my-videos.component.scss @@ -32,36 +32,9 @@ h1 { } } -::ng-deep { - .video { - flex-wrap: wrap; - } - - .action-button span { - white-space: nowrap; - } - - .video-miniature { - &.display-as-row { - // width: min-content !important; - width: 100% !important; - - .video-bottom .video-miniature-information { - width: max-content !important; - min-width: unset !important; - } - } - - .video-bottom { - max-width: 350px; - } - } -} - .action-button { display: flex; - margin-left: 55px; - margin-top: 10px; + margin-left: 10px; align-self: flex-end; } @@ -69,7 +42,7 @@ my-edit-button { margin-right: 10px; } -@media screen and (max-width: $small-view) { +@include on-small-main-col { h1 { flex-direction: column; @@ -80,39 +53,12 @@ my-edit-button { } .action-button { - flex-direction: column; - align-self: center; - align-items: center; - margin-left: 0px; - } - - my-edit-button { - margin: 15px 0 5px 0; - width: 100%; - text-align: center; - - ::ng-deep { - .action-button { - /* same width than a.video-thumbnail */ - width: $video-thumbnail-width; - } - } - } - - ::ng-deep { - .video-miniature { - align-items: center; - - .video-bottom, - .video-bottom .video-miniature-information { - /* same width than a.video-thumbnail */ - max-width: $video-thumbnail-width !important; - } - } + margin-top: 10px; + margin-left: auto; } } -@media screen and (max-width: $mobile-view) { +@include on-mobile-main-col { .videos-header { flex-direction: column; @@ -120,4 +66,8 @@ my-edit-button { width: 100% !important; } } + + .action-button { + margin-left: 0; + } } diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html index 594935afd..b69d1682a 100644 --- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html +++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.html @@ -1,13 +1,13 @@
-
+
Created {pagination.totalItems, plural, =1 {1 playlist} other {{{ pagination.totalItems }} playlists}}
This channel does not have playlists.
-
-
- +
+
+
diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss index cb2931858..3dd35ef3f 100644 --- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss +++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss @@ -1,14 +1,33 @@ -.title-page { - margin-top: 0; -} +@import '_variables'; +@import '_mixins'; +@import '_miniature'; -.video-playlist { +.playlists { display: flex; flex-wrap: wrap; justify-content: center; - .playlist-miniature-container { + .playlist-wrapper { margin-right: 15px; margin-bottom: 30px; } } + +.margin-content { + @include grid-videos-miniature-layout; +} + +@media screen and (max-width: $mobile-view) { + .title-page { + display: block; + text-align: center; + } + + .playlists { + text-align: left !important; + justify-content: left !important; + + margin-left: pvar(--horizontalMarginContent) !important; + margin-right: var(--horizontalMarginContent) !important; + } +} diff --git a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts index 8b507c626..14465bb8d 100644 --- a/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts +++ b/client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.ts @@ -1,6 +1,6 @@ import { Subject, Subscription } from 'rxjs' import { Component, OnDestroy, OnInit } from '@angular/core' -import { ComponentPagination, hasMoreItems } from '@app/core' +import { ComponentPagination, hasMoreItems, ScreenService } from '@app/core' import { VideoChannel, VideoChannelService } from '@app/shared/shared-main' import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist' @@ -25,7 +25,8 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy { constructor ( private videoPlaylistService: VideoPlaylistService, - private videoChannelService: VideoChannelService + private videoChannelService: VideoChannelService, + private screenService: ScreenService ) {} ngOnInit () { @@ -48,6 +49,10 @@ export class VideoChannelPlaylistsComponent implements OnInit, OnDestroy { this.loadVideoPlaylists() } + displayAsRow () { + return this.screenService.isInMobileView() + } + private loadVideoPlaylists () { this.videoPlaylistService.listChannelPlaylists(this.videoChannel, this.pagination) .subscribe(res => { diff --git a/client/src/app/+video-channels/video-channels.component.scss b/client/src/app/+video-channels/video-channels.component.scss index 3b27f3aa1..ce33e7be6 100644 --- a/client/src/app/+video-channels/video-channels.component.scss +++ b/client/src/app/+video-channels/video-channels.component.scss @@ -16,11 +16,11 @@ } .links { - @include fluid-videos-miniature-margins; + @include grid-videos-miniature-margins; } .channel-info { - @include fluid-videos-miniature-margins(false, 15px); + @include grid-videos-miniature-margins(false, 15px); display: grid; grid-template-columns: 1fr auto; diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html index 3c7c679b8..e0e9f92e7 100644 --- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html +++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.html @@ -1,4 +1,4 @@ -
+

@@ -14,7 +14,7 @@ diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss index b278c9654..c9fae6f27 100644 --- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss +++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss @@ -1,3 +1,6 @@ +@import '_variables'; +@import '_mixins'; + .title-page-container { display: flex; justify-content: space-between; @@ -11,6 +14,10 @@ } } +.title-page { + margin-top: 0; +} + .title-page-autoplay { display: flex; width: max-content; @@ -29,3 +36,29 @@ hr { margin-top: 0; } + +my-video-miniature { + display: block; +} + +.other-videos:not(.display-as-row) my-video-miniature { + min-width: $video-thumbnail-medium-width; + max-width: $video-thumbnail-medium-width; +} + +.display-as-row { + my-video-miniature { + margin-bottom: 20px; + } + + hr { + display: none; + } + + @media screen and (max-width: $mobile-view) { + my-video-miniature { + margin-bottom: 10px; + } + } +} + diff --git a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts index a1c8e0661..89b9c01b6 100644 --- a/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts +++ b/client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.ts @@ -16,6 +16,8 @@ import { RecommendedVideosStore } from './recommended-videos.store' export class RecommendedVideosComponent implements OnInit, OnChanges { @Input() inputRecommendation: RecommendationInfo @Input() playlist: VideoPlaylist + @Input() displayAsRow: boolean + @Output() gotRecommendations = new EventEmitter() autoPlayNextVideo: boolean 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 07f7ab7e3..5d417609a 100644 --- a/client/src/app/+videos/+video-watch/video-watch.component.html +++ b/client/src/app/+videos/+video-watch/video-watch.component.html @@ -289,6 +289,7 @@

- +
@@ -25,7 +25,7 @@
- +
@@ -40,7 +40,7 @@
- +
diff --git a/client/src/app/+videos/video-list/overview/video-overview.component.scss b/client/src/app/+videos/video-list/overview/video-overview.component.scss index c1d10188a..ec73c628c 100644 --- a/client/src/app/+videos/video-list/overview/video-overview.component.scss +++ b/client/src/app/+videos/video-list/overview/video-overview.component.scss @@ -8,9 +8,84 @@ } .margin-content { - @include fluid-videos-miniature-layout; + @include grid-videos-miniature-layout; } .section { - @include miniature-rows; + &:first-child { + padding-top: 30px; + + .section-title { + border-top: none !important; + } + } + + .section-title { + font-size: 24px; + font-weight: $font-semibold; + padding-top: 15px; + margin-bottom: 15px; + display: flex; + justify-content: space-between; + + &:not(h2) { + border-top: 1px solid $separator-border-color; + } + + a { + &:hover, &:focus:not(.focus-visible), &:active { + text-decoration: none; + outline: none; + } + + color: pvar(--mainForegroundColor); + } + } + + &.channel { + .section-title { + a { + display: flex; + width: fit-content; + align-items: center; + + img { + @include channel-avatar(28px); + + margin-right: 8px; + } + } + + .followers { + color: pvar(--greyForegroundColor); + font-weight: normal; + font-size: 14px; + margin-left: 10px; + position: relative; + top: 2px; + } + } + } + + .show-more { + position: relative; + top: -5px; + display: inline-block; + font-size: 16px; + text-transform: uppercase; + color: pvar(--greyForegroundColor); + margin-bottom: 10px; + font-weight: $font-semibold; + text-decoration: none; + } + + @media screen and (max-width: $mobile-view) { + max-height: initial; + overflow: initial; + + .section-title { + font-size: 17px; + margin-left: 10px; + } + } } diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts index a085e5bdc..c133b5fe9 100644 --- a/client/src/app/core/wrappers/screen.service.ts +++ b/client/src/app/core/wrappers/screen.service.ts @@ -38,11 +38,10 @@ export class ScreenService { let numberOfVideos = 1 - 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 + if (screenWidth > 1850) numberOfVideos = 5 + else if (screenWidth > 1600) numberOfVideos = 4 + else if (screenWidth > 1370) numberOfVideos = 3 + else if (screenWidth > 1100) numberOfVideos = 2 return numberOfVideos } diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.html b/client/src/app/shared/shared-video-miniature/abstract-video-list.html index 41d5906cf..81c773b5a 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.html +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.html @@ -52,7 +52,7 @@
diff --git a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss index 0a8aa8fa4..26c412402 100644 --- a/client/src/app/shared/shared-video-miniature/abstract-video-list.scss +++ b/client/src/app/shared/shared-video-miniature/abstract-video-list.scss @@ -69,7 +69,7 @@ $iconSize: 16px; } .margin-content { - @include fluid-videos-miniature-layout; + @include grid-videos-miniature-layout; } @media screen and (max-width: $mobile-view) { diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html index a07930321..efa443b45 100644 --- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html +++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html @@ -1,4 +1,4 @@ -
+
+