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;
}