fix(ontology): display all classes in a property (DEV-564) (#701)

dasch-swiss · Apr 6, 2022 · f90aedc · f90aedc
1 parent 5d4bb7c
commit f90aedc
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git a/src/app/project/ontology/ontology.component.scss b/src/app/project/ontology/ontology.component.scss
@@ -83,8 +83,10 @@ $width: 340px;
         margin: 16px 10%;
 
         .property {
-          height: 56px !important;
+          height: auto;
+          min-height: 56px !important;
           margin: 4px 0;
+          padding: 16px 0;
           &.odd {
             background-color: $primary_50;
           }

diff --git a/src/app/project/ontology/property-info/property-info.component.html b/src/app/project/ontology/property-info/property-info.component.html
@@ -1,6 +1,6 @@
 <div class="property-info" (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
 
-    <div mat-line class="title">
+    <div mat-line class="title" [class.with-line-break]="!propCard">
         <span class="icon" *ngIf="propType" [matTooltip]="propType?.group + ': ' + propType?.label + ' (' + propDef.id.split('#')[1] + ')'"
             matTooltipPosition="above">
             <mat-icon class="type">{{propType?.icon}}</mat-icon>
@@ -19,7 +19,7 @@
         </span>
     </div>
 
-    <div mat-line class="info additional-info" [class.flex]="propCard">
+    <div mat-line class="info additional-info" [class.flex]="propCard" [class.with-line-break]="!propCard">
         <span [matTooltip]="'id: ' + propDef.id" matTooltipPosition="above" class="mat-caption">
             {{propDef.id | split: '#':1}}
         </span>
@@ -32,7 +32,7 @@
             required
         </span>
         <!-- in case of ontology property: display corresponding resource classes -->
-        <span *ngIf="!propCard">
+        <span *ngIf="!propCard" class="white-space">
             <span *ngIf="resClasses.length; else notUsed">
                 Property is used in:
                 <!-- <span>{{ resClasses.join(", ") }}</span> -->

diff --git a/src/app/project/ontology/property-info/property-info.component.scss b/src/app/project/ontology/property-info/property-info.component.scss
@@ -12,27 +12,33 @@
   display: flex !important;
 }
 
-.mat-line.title {
-  line-height: 1.8;
-  .mat-icon {
-    top: 4px;
-    position: relative;
+.mat-line {
+  &.title {
+    line-height: 1.8;
+    .mat-icon {
+      top: 4px;
+      position: relative;
+    }
   }
-}
 
-.mat-line.info {
-  font-size: small;
+  &.info {
+    font-size: small;
 
-  .mat-caption {
-    color: rgba($dark, .7);
+    .mat-caption {
+      color: rgba($dark, .7);
+    }
+
+    .mat-icon {
+      width: 12px;
+      height: 12px;
+      font-size: small;
+      top: 2px;
+      position: relative;
+    }
   }
 
-  .mat-icon {
-    width: 12px;
-    height: 12px;
-    font-size: small;
-    top: 2px;
-    position: relative;
+  &.with-line-break {
+    white-space: normal;
   }
 }