flex

package-lock.json

@@ -568,6 +568,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "11.0.0-beta.33",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-11.0.0-beta.33.tgz",
+      "integrity": "sha512-unfhw3abZuKtdwQicRStHCYGbANPTHYg4WNRQk/RC5Mxq+4WOp4Q8HI7GqRHCGUYDCGUP7w1sU/oDt8f09nM8w==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "@angular/forms": {
       "version": "10.1.5",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-10.1.5.tgz",

package.json

@@ -16,6 +16,7 @@
     "@angular/common": "~10.1.5",
     "@angular/compiler": "~10.1.5",
     "@angular/core": "~10.1.5",
+    "@angular/flex-layout": "^11.0.0-beta.33",
     "@angular/forms": "~10.1.5",
     "@angular/material": "^10.2.4",
     "@angular/material-moment-adapter": "^10.2.7",

src/app/material/material.module.ts

@@ -43,6 +43,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { MatMomentDateModule } from '@angular/material-moment-adapter';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @NgModule({
   declarations: [],
@@ -83,7 +84,8 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter';
     MatPaginatorModule,
     MatSortModule,
     MatTableModule,
-    MatMomentDateModule
+    MatMomentDateModule,
+    FlexLayoutModule
   ],
   exports: [
     MatAutocompleteModule,
@@ -120,7 +122,8 @@ import { MatMomentDateModule } from '@angular/material-moment-adapter';
     MatTooltipModule,
     MatPaginatorModule,
     MatSortModule,
-    MatTableModule
+    MatTableModule,
+    FlexLayoutModule
   ]
 })
 export class MaterialModule { }

src/app/pages/services/services.component.html

@@ -1,17 +1,22 @@
 <h3>{{'services' | i18n}}</h3>
 
-<mat-card *ngFor="let service of services">
+<div fxLayout="row wrap" fxLayoutGap="16px grid">
-    <mat-card-header>
+    <div fxFlex="33.33%" fxFlex.sm="50%" fxFlex.xs="100%" *ngFor="let service of services">
-        <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
+        <mat-card>
-        <mat-card-title>{{'services.' + service.name + '.title'  | i18n}}</mat-card-title>
+            <mat-card-header>
-        <mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
+                <mat-icon>{{'services.' + service.name + '.icon' | i18n}}</mat-icon>
-    </mat-card-header>
+                <mat-card-title>{{'services.' + service.name + '.title' | i18n}}</mat-card-title>
-    <mat-card-content>
+                <mat-card-subtitle>{{'services.' + service.name + '.subtitle' | i18n}}</mat-card-subtitle>
-        <p>
+            </mat-card-header>
-            {{ 'services.' + service.name + '.text'  | i18n}}
+            <mat-card-content>
-        </p>
+                <p>
-    </mat-card-content>
+                    {{ 'services.' + service.name + '.text' | i18n}}
-    <mat-card-actions>
+                </p>
-        <a href="{{service.url}}" target="_blank" mat-raised-button color="primary">{{'services.goto'  | i18n}}</a>
+            </mat-card-content>
-    </mat-card-actions>
+            <mat-card-actions>
-</mat-card>
+                <a href="{{service.url}}" target="_blank" mat-raised-button color="primary">{{'services.goto' |
+                    i18n}}</a>
+            </mat-card-actions>
+        </mat-card>
+    </div>
+</div>

src/app/pages/services/services.component.scss

@@ -0,0 +1,10 @@
+mat-card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+mat-card-content {
+  flex-grow: 1;
+  overflow: auto;
+}

src/assets/i18n/de-informal.json

@@ -214,7 +214,7 @@
       "text": "Alternative zu Diensten wie GitHub, Source Code von bstly-Entwicklungen",
       "title": "Gitea"
     },
-    "goto": "Gehe zum Dienst",
+    "goto": "Zum Dienst",
     "mail": {
       "icon": "email",
       "subtitle": "E-Mail Konto",
@@ -250,6 +250,12 @@
       "subtitle": "Mitgliedschaft im Bastelei e. V.",
       "text": "Reguläres Mitglied im Bastelei e. V.",
       "title": "Vereinsmitgliedschaft"
+    },
+    "wikijs": {
+      "icon": "school",
+      "subtitle": "Informationen, Dokumentation, Anleitungen",
+      "text": "Alle Information rund um Bastelei e. V. und den angebotenen Diensten, sowie Anleitungen für einzelne Dienste und Funktionen",
+      "title": "Wiki"
     }
   },
   "software": "Software",