add invites

2021-05-06 21:26:57 +02:00
parent 3e02cbb353
commit c8a10eb73c
12 changed files with 1213 additions and 892 deletions
@@ -2,24 +2,34 @@

 <p *ngIf="!services || services.length == 0">{{'services.empty' | i18n}}</p>

-<div fxLayout="row wrap" fxLayoutGap="16px grid">
-    <div fxFlex="33.33%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let service of services">
-        <mat-card>
-            <mat-card-header>
-                <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
-                <mat-card-title>{{'services.' + service.name + '.title' | i18n}}</mat-card-title>
-                <mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
-            </mat-card-header>
-            <mat-card-content>
-                <p>
-                    {{ 'services.' + service.name + '.text' | i18n}}
-                </p>
-            </mat-card-content>
-            <mat-card-actions>
-                <a href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-raised-button
-                    color="accent">{{'services.goto' | i18n}} <mat-icon *ngIf="!service.sameSite" inline="true">
-                        open_in_new</mat-icon></a>
-            </mat-card-actions>
-        </mat-card>
-    </div>
-</div>
+
+<table *ngIf="services && services.length > 0" mat-table matSort [dataSource]="services" (matSortChange)="sortData($event)" matSortActive="name" matSortDirection="desc">
+
+    <ng-container matColumnDef="icon">
+        <th mat-header-cell *matHeaderCellDef> </th>
+        <td mat-cell *matCellDef="let service">
+            <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
+        </td>
+    </ng-container>
+
+
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="name"> {{'service.name' | i18n}} </th>
+        <td mat-cell *matCellDef="let service" class="text-center">
+            <a href="{{service.url}}" [target]="service.sameSite ? '_self' : '_blank'" mat-button color="accent">
+                <strong>{{'services.' + service.name + '.title' | i18n}}</strong>
+                <mat-icon *ngIf="!service.sameSite" inline="true">
+                    open_in_new</mat-icon>
+            </a>
+            <div><small>{{'services.' + service.name + '.subtitle' | i18n}}</small></div>
+        </td>
+    </ng-container>
+
+    <ng-container matColumnDef="text">
+        <th mat-header-cell *matHeaderCellDef> {{'service.text' | i18n}} </th>
+        <td mat-cell *matCellDef="let service">{{ 'services.' + service.name + '.text' | i18n}}</td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="serviceColumns"></tr>
+    <tr mat-row *matRowDef="let myRowData; columns: serviceColumns"></tr>
+</table>