From 38d5f7bd4fa547dc92ff9f671c4495fdb4ae24e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Fri, 1 Mar 2019 15:22:52 +0100
Subject: [PATCH] Rearrange card header and change button to icon button
---
.../shared/statistic/statistic.component.html | 15 +++++++------
.../shared/statistic/statistic.component.scss | 21 ++++++++-----------
2 files changed, 18 insertions(+), 18 deletions(-)
diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index 04b2032b9..a59d2ec5e 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -1,12 +1,15 @@
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
<div fxLayout="row" fxLayoutAlign="center">
<mat-card>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-card-title>
- <h4>{{subject}}</h4>
- </mat-card-title>
- <button mat-raised-button>Show Correct</button>
- </div>
+ <mat-card-header>
+ <mat-card-title>
+ <h4>{{subject}}</h4>
+ </mat-card-title>
+ <span class="fill-remaining-space"></span>
+ <button mat-icon-button color="primary">
+ <mat-icon>info</mat-icon>
+ </button>
+ </mat-card-header>
<mat-divider></mat-divider>
<mat-toolbar></mat-toolbar>
<div>
diff --git a/src/app/components/shared/statistic/statistic.component.scss b/src/app/components/shared/statistic/statistic.component.scss
index 9edde1165..3156b31d0 100644
--- a/src/app/components/shared/statistic/statistic.component.scss
+++ b/src/app/components/shared/statistic/statistic.component.scss
@@ -9,18 +9,15 @@ mat-toolbar {
background-color: #fff8e1;
}
-.mat-raised-button {
- display: flex;
- justify-content: flex-end;
- padding-top: 0%;
- padding-bottom: 0%;
- padding-right: 5%;
- padding-left: 5%;
- max-height: 50px;
+.mat-icon-button {
+ width: 50px;
+ height: 50px;
+ margin-bottom: 10px;
}
-h4 {
- max-height: 50px;
- margin-top: 5px;
- margin-bottom: 10px;
+mat-icon {
+ font-size: 40px;
+ height: 40px;
+ width: 40px;
+ line-height: 100%!important;
}
--
GitLab