diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html index 03d45227e..4cf08ab66 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.html @@ -19,14 +19,14 @@
{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}
+
+ + +
+
- -
- - -
diff --git a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss index e1acf6cd6..144c2440b 100644 --- a/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss +++ b/client/src/app/+my-account/my-account-video-channels/my-account-video-channels.component.scss @@ -50,6 +50,7 @@ } .video-channel-buttons { + margin-top: 10px; min-width: 190px; } } @@ -80,6 +81,10 @@ flex-direction: column; align-items: center !important; margin: auto; + + .video-channel-name { + margin-left: 0px !important; + } } } @@ -88,7 +93,23 @@ } .video-channel-buttons { - margin-top: 10px; + align-self: center; + } + } +} + +@media screen and (min-width: breakpoint(lg)) { + :host-context(.main-col:not(.expanded)) { + .video-channel-buttons { + float: right; + } + } +} + +@media screen and (min-width: $small-view) { + :host-context(.expanded) { + .video-channel-buttons { + float: right; } } } 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; + } + } + } + } +} diff --git a/client/src/app/search/search.component.scss b/client/src/app/search/search.component.scss index 641647e2e..78749cf20 100644 --- a/client/src/app/search/search.component.scss +++ b/client/src/app/search/search.component.scss @@ -81,6 +81,48 @@ } } +@media screen and (min-width: $small-view) and (max-width: breakpoint(xl)) { + .video-channel-info .video-channel-names { + flex-direction: column !important; + + .video-channel-name { + @include ellipsis; // Ellipsis and max-width on channel-name to not break screen + + max-width: 250px; + margin-left: 0 !important; + } + } + + :host-context(.main-col:not(.expanded)) { + // Override the min-width: 500px to not break screen + ::ng-deep .video-miniature-information { + min-width: 300px !important; + } + } +} + +@media screen and (min-width: $small-view) and (max-width: breakpoint(lg)) { + :host-context(.main-col:not(.expanded)) { + .video-channel-info .video-channel-names { + .video-channel-name { + max-width: 160px; + } + } + + // Override the min-width: 500px to not break screen + ::ng-deep .video-miniature-information { + min-width: 223px !important; + } + } + + :host-context(.expanded) { + // Override the min-width: 500px to not break screen + ::ng-deep .video-miniature-information { + min-width: 300px !important; + } + } +} + @media screen and (max-width: $small-view) { .search-result { .entry.video-channel, @@ -90,7 +132,7 @@ justify-content: center; align-items: center; text-align: center; - + img { margin: 0; }