Merge pull request #44 from intuitem/ui/keep-line-breaks

UI/keep line breaks
intuitem · Feb 14, 2024 · 6ee8be7 · 6ee8be7
2 parents 83dcd9c + adce386
commit 6ee8be7
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 17 deletions.
diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import TableRowActions from '$lib/components/TableRowActions/TableRowActions.svelte';
 	import { page } from '$app/stores';
+	import TableRowActions from '$lib/components/TableRowActions/TableRowActions.svelte';
 	import { FIELD_COLORED_TAG_MAP, FIELD_COMPONENT_MAP } from '$lib/utils/crud';
 	import { createEventDispatcher } from 'svelte';
 
@@ -198,8 +198,9 @@
 							{#if component}
 								<svelte:component this={component} meta={row.meta ?? {}} cell={value}/>
 							{:else}
+                <span class="font-token whitespace-pre-line break-words">
                 {#if Array.isArray(value)}
-                  <ul class="list-disc pl-4">
+                  <ul class="list-disc pl-4 whitespace-normal">
                     {#each value as val}
                       <li>
                         {#if val.str && val.id}
@@ -224,11 +225,12 @@
                   {:else}
                     {value.str ?? '-'}
                   {/if}
-				{:else if value && value.hexcolor}
-				  <p class="flex w-1/2 justify-center p-1 rounded-md ml-2" style="background-color: {value.hexcolor}">{value.name ?? value.str ?? '-'}</p>
+                {:else if value && value.hexcolor}
+                  <p class="flex w-1/2 justify-center p-1 rounded-md ml-2" style="background-color: {value.hexcolor}">{value.name ?? value.str ?? '-'}</p>
                 {:else}
                   {value ?? '-'}
                 {/if}
+                </span>
 							{/if}
 						</td>
             {/if}

diff --git a/frontend/src/routes/(app)/[model=urlmodel]/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/[model=urlmodel]/[id=uuid]/+page.svelte
@@ -169,7 +169,7 @@
 		</div>
 	{/if}
 	<div class="card px-6 py-4 bg-white flex flex-row space-y-2 justify-between shadow-lg">
-		<div class="flex flex-col space-y-2">
+		<div class="flex flex-col space-y-2 whitespace-pre-line">
 			{#each Object.entries(data.data).filter(([key, _]) => !['id', 'is_published'].includes(key)) as [key, value]}
 				<div class="flex flex-col">
 					<div class="text-sm font-medium text-gray-800 capitalize-first">

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/+page.svelte
@@ -80,9 +80,9 @@
 	$: expandedNodesState.set(expandedNodes);
 </script>
 
-<div class="flex flex-col space-y-4">
+<div class="flex flex-col space-y-4 whitespace-pre-line">
 	<div class="card px-6 py-4 bg-white flex flex-row justify-between shadow-lg">
-		<div class="flex flex-col space-y-2">
+		<div class="flex flex-col space-y-2 whitespace-pre-line">
 			{#each Object.entries(data.compliance_assessment).filter( ([key, _]) => ['name', 'description', 'project', 'framework'].includes(key) ) as [key, value]}
 				<div class="flex flex-col">
 					<div class="text-sm font-medium text-gray-800 capitalize-first">

diff --git a/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/compliance-assessments/[id=uuid]/TreeViewItemContent.svelte
@@ -102,7 +102,9 @@
 					</a>
 				</span>
 			{:else}
-				{content}
+				<p class="max-w-[65ch] whitespace-pre-line">
+					{content}
+				</p>
 			{/if}
 		</span>
 		{#if (threats && threats.length > 0) || (security_functions && security_functions.length > 0)}

diff --git a/frontend/src/routes/(app)/evidences/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/evidences/[id=uuid]/+page.svelte
@@ -66,9 +66,9 @@
 	let tabSet = 0;
 </script>
 
-<div class="flex flex-col space-y-4">
+<div class="flex flex-col space-y-4 whitespace-pre-line">
 	<div class="card px-6 py-4 bg-white flex flex-row justify-between shadow-lg">
-		<div class="flex flex-col space-y-2">
+		<div class="flex flex-col space-y-2 whitespace-pre-line">
 			{#each Object.entries(data.evidence).filter( ([key, _]) => ['name', 'description', 'folder', 'attachment', 'link', 'comment'].includes(key) ) as [key, value]}
 				<div class="flex flex-col">
 					<div class="text-sm font-medium text-gray-800 capitalize-first">

diff --git a/frontend/src/routes/(app)/frameworks/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/frameworks/[id=uuid]/+page.svelte
@@ -26,7 +26,7 @@
 	let treeViewNodes: TreeViewNode[] = transformToTreeView(Object.entries(tree));
 </script>
 
-<div class="flex flex-col space-y-4">
+<div class="flex flex-col space-y-4 whitespace-pre-line">
 	<div class="card px-6 py-4 bg-white flex flex-row justify-between shadow-lg">
 		<div class="flex flex-col space-y-2">
 			{#each Object.entries(data.framework).filter(([key, _]) => key !== 'id' && key !== 'created_at') as [key, value]}

diff --git a/frontend/src/routes/(app)/frameworks/[id=uuid]/TreeViewItemContent.svelte b/frontend/src/routes/(app)/frameworks/[id=uuid]/TreeViewItemContent.svelte
@@ -21,16 +21,26 @@
 </script>
 
 <div>
-	<span style="font-weight: {hasChildren ? 600 : 300};">
-		{content}
+	<span class="whitespace-pre-line" style="font-weight: {hasChildren ? 600 : 300};">
+		<p class="max-w-[65ch]">
+			{content}
+		</p>
 	</span>
 	{#if (threats && threats.length > 0) || (security_functions && security_functions.length > 0)}
 		<div
 			role="button"
 			tabindex="0"
 			class="underline text-sm hover:text-primary-400 {classesShowInfoText(showInfo)}"
-			on:click={(_) => (showInfo = !showInfo)}
-			on:keydown={(_) => (showInfo = !showInfo)}
+			on:click={(e) => {
+				e.preventDefault();
+				showInfo = !showInfo;
+			}}
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					e.preventDefault();
+					showInfo = !showInfo;
+				}
+			}}
 		>
 			<i class="text-xs fa-solid fa-info-circle" /> Learn more
 		</div>

diff --git a/frontend/src/routes/(app)/requirement-assessments/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/requirement-assessments/[id=uuid]/+page.svelte
@@ -141,12 +141,12 @@
 </script>
 
 <div class="card space-y-2 p-4 bg-white shadow">
-	<h3 class="h3 font-semibold">
+	<h3 class="h3 font-semibold whitespace-pre-line">
 		{title}
 	</h3>
 	<code class="code">{data.requirement.urn}</code>
 	{#if data.requirement.description}
-		<p>{data.requirement.description}</p>
+		<p class="whitespace-pre-line">{data.requirement.description}</p>
 	{/if}
 	{#if threats || security_functions}
 		<div class="card p-4 variant-glass-primary text-sm flex flex-row cursor-auto">