[frontend] Fix button css issue

This commit is contained in:
Cathy Hu 2020-09-11 17:13:26 +02:00
parent bc4b57aaef
commit 8a7a088038
4 changed files with 38 additions and 9 deletions

View file

@ -17,9 +17,11 @@
<mat-list *ngIf="emails$ | loading | async as emails">
<ng-template [ngIf]="emails.value">
<mat-list-item *ngIf="emails.value.length === 0; else startButton">
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
<button class="add-button" mat-button (click)="onCreate()">
<div class="in-add-button">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
</div>
</button>
<mat-divider></mat-divider>
</mat-list-item>

View file

@ -17,9 +17,11 @@
<mat-list *ngIf="telegrams$ | loading | async as telegrams">
<ng-template [ngIf]="telegrams.value">
<mat-list-item *ngIf="telegrams.value.length === 0">
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
<button class="add-button" mat-button (click)="onCreate()">
<div class="in-add-button">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
</div>
</button>
<mat-divider></mat-divider>
</mat-list-item>

View file

@ -17,9 +17,11 @@
<mat-list *ngIf="twitters$ | loading | async as twitters">
<ng-template [ngIf]="twitters.value">
<mat-list-item *ngIf="(twitters.value | twitterCorpses).length === 0">
<button mat-menu-item (click)="onCreate()">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
<button class="add-button" mat-button (click)="onCreate()">
<div class="in-add-button">
<mat-icon>add</mat-icon>
<span> Add a platform connection!</span>
</div>
</button>
<mat-divider></mat-divider>
</mat-list-item>

View file

@ -75,6 +75,8 @@ a {
/* public pages end */
/* shared start */
.spinner {
display: block;
margin-left: auto;
@ -87,3 +89,24 @@ a {
text-align: center;
min-width: 100%;
}
/* shared end */
/* platforms start */
.add-button {
width: 100%;
margin: 0;
text-align: left;
height: 48px;
overflow: hidden;
padding: 0 16px;
}
.in-add-button {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
/* platforms end */