From 0f4905e120e66c5227ca3c57074e3e8554424621 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 5 Apr 2019 17:00:09 +0200 Subject: 2 rows per overview section --- .../shared/video/video-miniature.component.scss | 155 +++++++++++---------- .../video-list/video-overview.component.scss | 9 ++ 2 files changed, 90 insertions(+), 74 deletions(-) (limited to 'client/src/app') diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss index fa2739f00..80d6c4fda 100644 --- a/client/src/app/shared/video/video-miniature.component.scss +++ b/client/src/app/shared/video/video-miniature.component.scss @@ -10,79 +10,84 @@ height: 195px; vertical-align: top; - .video-miniature-information { - width: 200px; - line-height: normal; + .video-bottom { + display: flex; - .video-miniature-name { - @include miniature-name; - } + .video-miniature-information { + width: 200px; + line-height: normal; - .video-miniature-created-at-views { - display: block; - font-size: 13px; - } + .video-miniature-name { + @include miniature-name; + } - .video-miniature-account, - .video-miniature-channel { - @include disable-default-a-behaviour; - @include ellipsis; + .video-miniature-created-at-views { + display: block; + font-size: 13px; + } - display: block; - font-size: 13px; - color: $grey-foreground-color; + .video-miniature-account, + .video-miniature-channel { + @include disable-default-a-behaviour; + @include ellipsis; - &:hover { - color: $grey-foreground-hover-color; + display: block; + font-size: 13px; + color: $grey-foreground-color; + + &:hover { + color: $grey-foreground-hover-color; + } } - } - .video-info-privacy, - .video-info-blacklisted .blacklisted-label, - .video-info-nsfw { - font-weight: $font-semibold; - } + .video-info-privacy, + .video-info-blacklisted .blacklisted-label, + .video-info-nsfw { + font-weight: $font-semibold; + } - .video-info-blacklisted { - color: red; + .video-info-blacklisted { + color: red; - .blacklisted-reason::before { - content: ' - '; + .blacklisted-reason::before { + content: ' - '; + } } - } - .video-info-nsfw { - color: red; + .video-info-nsfw { + color: red; + } } - } - - .video-bottom { - display: flex; .video-actions { margin-top: 3px; margin-right: 10px; - } - /deep/ .dropdown-root:not(.show) { - display: none; - } + /deep/ .dropdown-root:not(.show) { + display: none; + } - &:hover /deep/ .dropdown-root { - display: block; + /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { + display: block; + } } - /deep/ .playlist-dropdown.show + my-action-dropdown .dropdown-root { + &:hover .video-actions /deep/ .dropdown-root { display: block; } @media screen and (max-width: $small-view) { - .video-actions { - margin-right: 0; + .video-miniature-information .video-miniature-name { + margin-top: 0; } - /deep/ .dropdown-root { - display: block !important; + .video-actions { + margin: 0; + top: -3px; + + /deep/ .dropdown-root { + display: block !important; + } } } } @@ -97,38 +102,40 @@ margin-right: 10px; } - .video-miniature-information { - width: auto; - min-width: 500px; - - .video-miniature-name { - @include ellipsis-multiline(1.3em, 2); - - margin-top: 2px; - margin-bottom: 5px; - } - - .video-miniature-created-at-views, - .video-miniature-account, - .video-miniature-channel { - font-size: 14px; - width: fit-content; - } - - .video-info-privacy { - margin-top: 5px; + .video-bottom { + .video-miniature-information { + width: auto; + min-width: 500px; + + .video-miniature-name { + @include ellipsis-multiline(1.3em, 2); + + margin-top: 2px; + margin-bottom: 5px; + } + + .video-miniature-created-at-views, + .video-miniature-account, + .video-miniature-channel { + font-size: 14px; + width: fit-content; + } + + .video-info-privacy { + margin-top: 5px; + } + + .video-info-blacklisted { + margin-top: 3px; + } } - .video-info-blacklisted { - margin-top: 3px; + .video-actions { + margin: 0; + top: -3px; } } - .video-bottom .video-actions { - margin: 0; - top: -3px; - } - @media screen and (max-width: $small-view) { flex-direction: column; height: auto; 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 42b542233..a24766783 100644 --- a/client/src/app/videos/video-list/video-overview.component.scss +++ b/client/src/app/videos/video-list/video-overview.component.scss @@ -3,6 +3,8 @@ @import '_miniature'; .section { + max-height: 500px; // 2 rows max + overflow: hidden; padding-top: 10px; &:first-child { @@ -44,11 +46,18 @@ } @media screen and (max-width: 500px) { + .margin-content { + margin: 0 !important; + } + .section-title { font-size: 17px; } .section { + max-height: initial; + overflow: initial; + @include video-miniature-small-screen; } } -- cgit v1.2.3