Unverified Commit b16e0cf2 authored by Ms Kimsible's avatar Ms Kimsible Committed by GitHub
Browse files

Fix broken delete buttons of admin federation lists (#4378)



* Add ellipsis on my-delete button of federation admin

* Add ellipsis on button label to define (max-)width on host component
Co-authored-by: default avatarMs Kimsible <kimsible@users.noreply.github.com>
parent fb72d2e1
...@@ -21,3 +21,7 @@ a { ...@@ -21,3 +21,7 @@ a {
@include margin-right(10px); @include margin-right(10px);
} }
} }
my-delete-button {
max-width: 130px;
}
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<ng-template pTemplate="body" let-follow> <ng-template pTemplate="body" let-follow>
<tr> <tr>
<td class="action-cell"> <td class="action-cell">
<my-delete-button label="Unfollow" i18n-label (click)="removeFollowing(follow)"></my-delete-button> <my-delete-button label (click)="removeFollowing(follow)"></my-delete-button>
</td> </td>
<td> <td>
<a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer"> <a [href]="follow.following.url" i18n-title title="Open instance in a new tab" target="_blank" rel="noopener noreferrer">
......
...@@ -19,3 +19,7 @@ a { ...@@ -19,3 +19,7 @@ a {
.follow-button { .follow-button {
@include create-button; @include create-button;
} }
my-delete-button {
max-width: 130px;
}
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
:host { :host {
outline: none; outline: none;
display: inline-block;
} }
my-small-loader ::ng-deep .root { my-small-loader ::ng-deep .root {
...@@ -31,6 +32,8 @@ span[class$=-button] { ...@@ -31,6 +32,8 @@ span[class$=-button] {
.action-button { .action-button {
@include peertube-button-link; @include peertube-button-link;
@include button-with-icon(21px); @include button-with-icon(21px);
width: 100%; // useful for ellipsis, allow to define a max-width on host component
} }
.orange-button { .orange-button {
...@@ -53,6 +56,10 @@ span[class$=-button] { ...@@ -53,6 +56,10 @@ span[class$=-button] {
@include grey-button; @include grey-button;
} }
.button-label {
@include ellipsis;
}
// In a table, try to minimize the space taken by this button // In a table, try to minimize the space taken by this button
@media screen and (max-width: 1400px) { @media screen and (max-width: 1400px) {
:host-context(td) { :host-context(td) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment