<div i18n class="video-channel-followers">{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
+ <div class="video-channel-buttons">
+ <my-edit-button [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button>
+ <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
+ </div>
+
<div *ngIf="!isInSmallView" class="w-100 d-flex justify-content-end">
<p-chart *ngIf="videoChannelsChartData && videoChannelsChartData[i]" type="line" [data]="videoChannelsChartData[i]" [options]="chartOptions" width="40vw" height="100px"></p-chart>
</div>
</div>
-
- <div class="video-channel-buttons">
- <my-edit-button [routerLink]="[ 'update', videoChannel.nameWithHost ]"></my-edit-button>
- <my-delete-button (click)="deleteVideoChannel(videoChannel)"></my-delete-button>
- </div>
</div>
</div>
}
.video-channel-buttons {
+ margin-top: 10px;
min-width: 190px;
}
}
flex-direction: column;
align-items: center !important;
margin: auto;
+
+ .video-channel-name {
+ margin-left: 0px !important;
+ }
}
}
}
.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;
}
}
}
</ng-template>
<ng-template ptTemplate="rowButtons" let-video>
- <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
+ <div class="action-button">
+ <my-delete-button (click)="deleteVideo(video)"></my-delete-button>
- <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
+ <my-edit-button [routerLink]="[ '/videos', 'update', video.uuid ]"></my-edit-button>
- <my-button i18n-label label="Change ownership"
- className="action-button-change-ownership grey-button"
- icon="im-with-her"
- (click)="changeOwnership($event, video)"
- ></my-button>
+ <my-button i18n-label label="Change ownership"
+ className="action-button-change-ownership grey-button"
+ icon="im-with-her"
+ (click)="changeOwnership($event, video)"
+ ></my-button>
+ </div>
</ng-template>
</my-videos-selection>
}
::ng-deep {
+ .video {
+ flex-wrap: wrap;
+ }
+
.action-button span {
white-space: nowrap;
}
}
}
+.action-button {
+ display: flex;
+ margin-left: 55px;
+ margin-top: 10px;
+ align-self: flex-end;
+}
+
my-delete-button,
my-edit-button {
margin-right: 10px;
flex-direction: column;
}
+ .action-button {
+ flex-direction: column;
+ align-self: center;
+ margin-left: 0px;
+ }
+
::ng-deep {
.video-miniature {
align-items: center;
}
}
}
+
+// 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;
+ }
+ }
+ }
+ }
+}
}
}
+@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,
justify-content: center;
align-items: center;
text-align: center;
-
+
img {
margin: 0;
}