novaloop-oss/mastodon-apps
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: fix column widths in table view

Browse Source
This commit is contained in:
Markus Huggler
2022-12-23 11:48:48 +01:00
parent 279c4830d6
commit d411d2107d
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
projects/mastolists/src/app/followings-table/table/table.component.html
View File

@@ -14,7 +14,7 @@
<th>Actions</th> <th>Actions</th>
</tr> </tr>
<tr *ngFor="let row of rows$ |async"> <tr *ngFor="let row of rows$ |async">
<td> <td class="col small">
<a [href]="row.url"> <a [href]="row.url">
<nb-user <nb-user
size="medium" size="medium"
@@ -26,9 +26,13 @@
</nb-user> </nb-user>
</a> </a>
</td> </td>
<td><span [innerHTML]="row.note"></span></td> <td class="col large">
<td><span [innerHTML]="row.fields"></span></td> <span [innerHTML]="row.note"></span>
<td> </td>
<td class="col large">
<span [innerHTML]="row.fields"></span>
</td>
<td class="col medium">
<div *ngFor="let list of row.lists"> <div *ngFor="let list of row.lists">
{{list.title}} {{list.title}}
<nb-icon icon="person-remove-outline" (click)="removeAccountFromList(row.id, list.id)"> <nb-icon icon="person-remove-outline" (click)="removeAccountFromList(row.id, list.id)">
@@ -36,7 +40,7 @@
</nb-icon> </nb-icon>
</div> </div>
</td> </td>
<td> <td class="col medium">
<div class="actions"> <div class="actions">
<select class="list-select" #listSelect> <select class="list-select" #listSelect>
<option *ngFor="let list of lists$ | async" [value]="list.id">{{list.title}}</option> <option *ngFor="let list of lists$ | async" [value]="list.id">{{list.title}}</option>

15
projects/mastolists/src/app/followings-table/table/table.component.scss
View File

@@ -13,6 +13,21 @@ table {
td { td {
border: 1pt solid #101426; border: 1pt solid #101426;
} }
td.col {
&.small {
min-width: 180px;
}
&.medium {
min-width: 300px;
}
&.large {
min-width: 400px;
}
max-width: calc(100vw / 3);
overflow: hidden;
text-overflow: ellipsis;
}
} }
div.actions { div.actions {