Merge pull request #17 from NorskHelsenett/feature/description-styling

Preserving line breaks in description
NorskHelsenett · Jan 13, 2025 · 01c4b34 · 01c4b34
2 parents 0696cb6 + 2d0d5c2
commit 01c4b34
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 10 deletions.
diff --git a/src/app/clusters/components/cluster-description/cluster-description.component.html b/src/app/clusters/components/cluster-description/cluster-description.component.html
@@ -1,15 +1,20 @@
-<div class="grid space-y-8 lg:gap-8 lg:space-y-0 mt-5">
+<div class="grid mt-5">
   <div class="dark:bg-darker flex items-center justify-between overflow-x-auto rounded-md bg-white p-2">
-    <div class="dark:bg-darker col-span-2 overflow-x-auto rounded-md bg-white">
-      <div class="dark:border-primary flex items-center justify-between border-b p-4">
+    <div class="dark:bg-darker col-span-2 overflow-x-auto rounded-md bg-white w-full">
+      <div class="dark:border-primary flex items-end justify-between border-b p-4">
         <h4 class="dark:text-light text-lg font-semibold text-gray-500">{{ 'common.description' | translate }}</h4>
-        <a class="dark:text-primary text-primary cursor-pointer" (click)="editRequested()">{{ 'common.edit' | translate }}</a>
+        <div class="">
+          <a class="dark:text-primary text-primary cursor-pointer" (click)="editRequested()">{{ 'common.edit' | translate }}</a>
+        </div>
       </div>
+
       <div class="overflow-x-auto">
         <div class="relative m-3">
-          <div>
-            <p>{{ cluster?.metadata?.description }}</p>
-          </div>
+          @if (cluster?.metadata?.description) {
+            <div class="whitespace-pre-line">{{ cluster?.metadata?.description }}</div>
+          } @else {
+            <div class="text-gray-500">{{ 'common.noValue' | translate }}</div>
+          }
         </div>
       </div>
     </div>

diff --git a/src/app/clusters/pages/cluster-metadata-page/cluster-metadata-page.component.html b/src/app/clusters/pages/cluster-metadata-page/cluster-metadata-page.component.html
@@ -68,7 +68,7 @@
                   <tr class="hover:bg-grey-light">
                     <td class="px-2 py-1 align-top">{{ 'pages.clusters.details.metadata.description' | translate }}</td>
                     <td class="px-2 py-1 font-bold">
-                      <div class="dark:bg-gray-800 bg-slate-200 p-4">
+                      <div class="dark:bg-gray-800 bg-slate-200 p-4 whitespace-pre-line">
                         {{ cluster?.metadata?.description }}
                       </div>
                     </td>

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -118,7 +118,8 @@
     "summary": "Summary",
     "report": "Report",
     "change": "Change",
-    "description": "Description"
+    "description": "Description",
+    "noValue": "No value"
   },
   "error": {
     "forbidden": "Forbidden area",

diff --git a/src/assets/i18n/no.json b/src/assets/i18n/no.json
@@ -118,7 +118,8 @@
     "summary": "Sammendrag",
     "report": "Rapport",
     "change": "Change",
-    "description": "Beskrivelse"
+    "description": "Beskrivelse",
+    "noValue": "Ingen verdi"
   },
   "nav": {
     "home": "Oversikt",