From 57a3a8c9a7ba2e0feadf5d07bc3d0853a4369319 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Tue, 26 Feb 2019 03:01:43 +0100
Subject: [PATCH] Center statistic-cards horizontally
---
.../shared/statistic/statistic.component.html | 38 +++++++++--------
.../statistics-page.component.html | 42 ++++++++++---------
2 files changed, 42 insertions(+), 38 deletions(-)
diff --git a/src/app/components/shared/statistic/statistic.component.html b/src/app/components/shared/statistic/statistic.component.html
index 85692db5f..2f34c95be 100644
--- a/src/app/components/shared/statistic/statistic.component.html
+++ b/src/app/components/shared/statistic/statistic.component.html
@@ -1,22 +1,24 @@
-<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
- <mat-card>
- <mat-card-header>
- <h3>{{subject}}</h3>
- </mat-card-header>
- <mat-divider></mat-divider>
- <mat-toolbar></mat-toolbar>
- <div>
- <div style="position: relative; height: 60vh">
- <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-card>
+ <mat-card-header>
+ <h3>{{subject}}</h3>
+ </mat-card-header>
+ <mat-divider></mat-divider>
+ <mat-toolbar></mat-toolbar>
+ <div>
+ <div style="position: relative; height: 60vh">
+ <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
+ </div>
+ </div>
+ <canvas id="chart"></canvas>
</div>
</div>
- <canvas id="chart"></canvas>
- </div>
+ <mat-list role="list">
+ <mat-list-item role="listitem" *ngFor="let a of answerList">{{a.label}} : {{a.answer}}</mat-list-item>
+ </mat-list>
+ </mat-card>
</div>
- <mat-list role="list">
- <mat-list-item role="listitem" *ngFor="let a of answerList">{{a.label}} : {{a.answer}}</mat-list-item>
- </mat-list>
-</mat-card>
</div>
diff --git a/src/app/components/shared/statistics-page/statistics-page.component.html b/src/app/components/shared/statistics-page/statistics-page.component.html
index b77305510..7bda11622 100644
--- a/src/app/components/shared/statistics-page/statistics-page.component.html
+++ b/src/app/components/shared/statistics-page/statistics-page.component.html
@@ -1,22 +1,24 @@
-<div fxLayout="row" fxLayoutGap="20px" fxLayoutAlign="center">
- <mat-card>
- <mat-card-header>
- <h2>{{'statistic.learning-status' | translate}}</h2>
- <span class="fill-remaining-space"></span>
- <button mat-icon-button (click)="showHelp()"><mat-icon color="primary">help</mat-icon></button>
- </mat-card-header>
- <mat-divider></mat-divider>
- <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
- <div fxLayout="row" fxLayoutAlign="center">
- <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
- </div>
- </div>
- <mat-tab-group>
- <mat-tab *ngFor="let cg of contentGroups; let i = index" label="{{cg.name}}">
- <div fxLayout="column" fxLayoutAlign="center">
- <app-list-statistic [contentGroup]="cg"></app-list-statistic>
+<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-card>
+ <mat-card-header>
+ <h2>{{'statistic.learning-status' | translate}}</h2>
+ <span class="fill-remaining-space"></span>
+ <button mat-icon-button (click)="showHelp()"><mat-icon color="primary">help</mat-icon></button>
+ </mat-card-header>
+ <mat-divider></mat-divider>
+ <div *ngIf="isLoading" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="20px" fxFill>
+ <div fxLayout="row" fxLayoutAlign="center">
+ <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
</div>
- </mat-tab>
- </mat-tab-group>
- </mat-card>
+ </div>
+ <mat-tab-group>
+ <mat-tab *ngFor="let cg of contentGroups; let i = index" label="{{cg.name}}">
+ <div fxLayout="column" fxLayoutAlign="center">
+ <app-list-statistic [contentGroup]="cg"></app-list-statistic>
+ </div>
+ </mat-tab>
+ </mat-tab-group>
+ </mat-card>
+ </div>
</div>
--
GitLab