From 4e1260a51c58654e50d65a8b358ebdcf73646286 Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Fri, 4 Dec 2020 00:29:07 +0100
Subject: [PATCH] Add underlines for h2 in datapage

---
 .../components/data-page/data-page.component.html   |  6 +++---
 .../components/data-page/data-page.component.scss   |  2 +-
 src/styles.scss                                     | 13 +++++++++++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/app/components/data-page/data-page.component.html b/src/app/components/data-page/data-page.component.html
index b247899..4131b74 100644
--- a/src/app/components/data-page/data-page.component.html
+++ b/src/app/components/data-page/data-page.component.html
@@ -14,8 +14,8 @@
   </h1>
   <ng-container *ngFor="let object of propertiesInfo">
     <mat-card class="inline-card" *ngIf="object.type === 'Group'">
-      <mat-card-title
-        >{{ object.title }}
+      <mat-card-title class="card-header">
+        <h2>{{ object.title }}</h2>
         <button
           mat-button
           *ngIf="data.isLockedByMe && object.possibleObjects"
@@ -47,7 +47,7 @@
 
     <mat-card class="inline-card" *ngIf="object.type === 'ReferenceTable'">
       <mat-card-title
-        >{{ object.title }}
+        ><h2>{{ object.title }}</h2>
         <a
           mat-button
           *ngIf="object.linkToTable"
diff --git a/src/app/components/data-page/data-page.component.scss b/src/app/components/data-page/data-page.component.scss
index c3961fe..af64e05 100644
--- a/src/app/components/data-page/data-page.component.scss
+++ b/src/app/components/data-page/data-page.component.scss
@@ -36,4 +36,4 @@
   .mat-icon {
     margin-left: 8px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles.scss b/src/styles.scss
index 63faf2f..9b0b709 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -17,6 +17,19 @@ h1:before {
     bottom: 0;
     border-bottom: 3px solid #7fc600;
 }
+h2 {
+    display: block;
+    padding-bottom: 0;
+    position: relative;
+}
+h2:before {
+    content: "";
+    position: absolute;
+    width: 5rem;
+    height: 1px;
+    bottom: 0;
+    border-bottom: 2px solid #7fc600;
+}
 
 .mat-list-item-content {
     width: 100%;