fix(results): display xml a better way (DEV-96) (#593)

dasch-swiss · Nov 19, 2021 · d968f2f · d968f2f
1 parent df09a13
commit d968f2f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 deletions.
diff --git a/src/app/workspace/results/list-view/resource-grid/resource-grid.component.html b/src/app/workspace/results/list-view/resource-grid/resource-grid.component.html
@@ -27,9 +27,7 @@
                             {{ resource.entityInfo.properties[val.property].label }}
                         </span>
 
-                        <div class="res-prop-value">
-                            {{ val.strval | appTruncate: 256:"..." }}
-                        </div>
+                        <div class="res-prop-value shorten-long-text" [innerHtml]="val.strval"></div>
                     </div>
                 </mat-card-content>
             </div>

diff --git a/src/app/workspace/results/list-view/resource-list/resource-list.component.html b/src/app/workspace/results/list-view/resource-list/resource-list.component.html
@@ -16,10 +16,7 @@ <h3 matLine class="res-class-value">{{ resource.label }}</h3>
                         <span class="res-prop-label">
                             {{ resource.entityInfo.properties[val.property].label }}
                         </span>
-
-                        <div class="res-prop-value">
-                            {{ val.strval | appTruncate: 256:"..." }}
-                        </div>
+                        <div class="res-prop-value shorten-long-text" [innerHtml]="val.strval"></div>
                     </div>
                 </div>
             </div>

diff --git a/src/app/workspace/results/list-view/resource-list/resource-list.component.scss b/src/app/workspace/results/list-view/resource-list/resource-list.component.scss
@@ -18,10 +18,6 @@
   margin: 0 15px;
 }
 
-.res-prop-value {
-  text-align: justify;
-}
-
 .res-class-label,
 .res-prop-label {
   color: rgba(0, 0, 0, 0.54);

diff --git a/src/assets/style/_elements.scss b/src/assets/style/_elements.scss
@@ -670,6 +670,16 @@ $gc-small: $form-width - $gc-large - 4;
 .search-results-title {
   color: rgba(0, 0, 0, 1) !important;
 }
+
+.shorten-long-text {
+  text-align: justify;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+  max-height: 42px;
+  text-overflow: ellipsis;
+  display: block;
+}
 // --------------------------------------
 
 //