From 8a7a0880381608c477a274f01c2d4566476ad5d2 Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 11 Sep 2020 17:13:26 +0200
Subject: [PATCH] [frontend] Fix button css issue
---
.../email-settings.component.html | 8 ++++---
.../telegram-settings.component.html | 8 ++++---
.../twitter-settings.component.html | 8 ++++---
kibicara-frontend/src/sass/styles.scss | 23 +++++++++++++++++++
4 files changed, 38 insertions(+), 9 deletions(-)
diff --git a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
index b9e5915..1e40f87 100644
--- a/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/email/email-settings/email-settings.component.html
@@ -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>
diff --git a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
index b920395..4178b60 100644
--- a/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/telegram/telegram-settings/telegram-settings.component.html
@@ -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>
diff --git a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
index 3db3388..c4dac31 100644
--- a/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
+++ b/kibicara-frontend/src/app/platforms/twitter/twitter-settings/twitter-settings.component.html
@@ -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>
diff --git a/kibicara-frontend/src/sass/styles.scss b/kibicara-frontend/src/sass/styles.scss
index a76c6f9..72949d4 100644
--- a/kibicara-frontend/src/sass/styles.scss
+++ b/kibicara-frontend/src/sass/styles.scss
@@ -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 */