💄 make repo card look nicer

Author: lukasbm

frontend/src/app/projects-tab/projects-tab.component.html

@@ -89,7 +89,8 @@
 
   <!-- Paginator and Repositories -->
   <mat-card-content>
-    <mat-paginator #paginator
+    <mat-paginator
+      #paginator
       [length]="projects.totalElements"
       [pageSize]="pageSize"
       [pageSizeOptions]="pageSizeOptions"

frontend/src/app/repository/repository.component.css

@@ -1,6 +1,6 @@
 .repository-card {
   width: 370px;
-  height: 160px;
+  height: 170px;
   margin: 20px;
   -moz-border-radius: 30px;
   -webkit-border-radius: 30px;
@@ -14,3 +14,14 @@
 .repository-card:hover {
   transform: scale(1.1);
 }
+
+mat-card-header {
+  padding-right: 3em;
+}
+
+#show-dialog {
+  bottom: 1.5em;
+  right: 1.5em;
+  position: absolute;
+  background-color: #80c6ff;
+}

frontend/src/app/repository/repository.component.html

@@ -1,24 +1,26 @@
 <mat-card class="repository-card">
   <mat-card-header>
     <mat-card-title style="text-align: left">
-      {{ project.name }}
+      {{ truncateName() }}
     </mat-card-title>
     <mat-card-subtitle style="text-align: left">
       {{ project.nameSpace }}
     </mat-card-subtitle>
   </mat-card-header>
   <mat-card-content style="padding-left: 16px">
-    <p>
-      {{ truncateDescription() }}
-    </p>
-    <p>
-      <a [href]="project.url" target="_blank">Link zum Repository</a>
-    </p>
+    {{ truncateDescription() }}
   </mat-card-content>
-  <mat-card-actions style="bottom: 16%; right: 8%; position: absolute">
-    <button
-      mat-raised-button
-      style="background-color: #80c6ff"
+  <mat-card-actions>
+    <a
+      mat-button
+      [href]="project.url"
+      target="_blank"
+      style="top: 1em; right: 1em; position: absolute"
+    >
+      <mat-icon>code</mat-icon>
+    </a>
+    <button id="show-dialog"
+      mat-flat-button
       (click)="openDetailsDialog()"
     >
       Anzeigen

frontend/src/app/repository/repository.component.ts

@@ -34,4 +34,14 @@ export class RepositoryComponent {
       return this.project.description.substring(0, 100) + '...';
     }
   }
+
+  truncateName() {
+    if (this.project.name == '') {
+      return 'Kein Name Vorhanden'
+    } else if (this.project.name.length <= 40) {
+      return this.project.name;
+    } else {
+      return this.project.name.substring(0, 40) + '...'
+    }
+  }
 }