From 8a3183e50dab38ea79b9557840dce546aa1958ca Mon Sep 17 00:00:00 2001 From: Kim <1877318+kimsible@users.noreply.github.com> Date: Mon, 11 May 2020 11:16:21 +0200 Subject: Fix non-fixed header and menu when overflow-x body on touchscreens (#2711) * Make my-account-videos responsive on small screens * Make my-account-channels responsive for small screens * Make search result responsive on small screen Co-authored-by: kimsible --- .../my-account-videos.component.html | 16 ++++++----- .../my-account-videos.component.scss | 32 ++++++++++++++++++++++ 2 files changed, 41 insertions(+), 7 deletions(-) (limited to 'client/src/app/+my-account/my-account-videos') diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html index b07b9c1a6..55cbfda95 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.html +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.html @@ -23,15 +23,17 @@ - +
+ - + - + +
diff --git a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss index 40bae7668..a3422c239 100644 --- a/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss +++ b/client/src/app/+my-account/my-account-videos/my-account-videos.component.scss @@ -29,6 +29,10 @@ } ::ng-deep { + .video { + flex-wrap: wrap; + } + .action-button span { white-space: nowrap; } @@ -50,6 +54,13 @@ } } +.action-button { + display: flex; + margin-left: 55px; + margin-top: 10px; + align-self: flex-end; +} + my-delete-button, my-edit-button { margin-right: 10px; @@ -60,6 +71,12 @@ my-edit-button { flex-direction: column; } + .action-button { + flex-direction: column; + align-self: center; + margin-left: 0px; + } + ::ng-deep { .video-miniature { align-items: center; @@ -98,3 +115,18 @@ my-edit-button { } } } + +// Adapt my-video-miniature on small screens with menu +@media screen and (min-width: $small-view) and (max-width: #{breakpoint(lg) + ($not-expanded-horizontal-margins / 3) * 2}) { + :host-context(.main-col:not(.expanded)) { + ::ng-deep { + .video-miniature { + flex-direction: column; + + .video-miniature-name { + max-width: 223px; + } + } + } + } +} -- cgit v1.2.3