style: improve table layout

intuitem · Dec 20, 2024 · caf1a76 · caf1a76
1 parent d97f224
commit caf1a76
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/frontend/src/lib/components/ModelTable/ModelTable.svelte b/frontend/src/lib/components/ModelTable/ModelTable.svelte
@@ -47,7 +47,7 @@
 	export let regionHead: CssClasses = '';
 	export let regionHeadCell: CssClasses = 'uppercase bg-white text-gray-700';
 	export let regionBody: CssClasses = 'bg-white';
-	export let regionCell: CssClasses = '';
+	export let regionCell: CssClasses = 'text-center';
 	export let regionFoot: CssClasses = '';
 	export let regionFootCell: CssClasses = '';
 
@@ -311,9 +311,11 @@
 							{@const component = field_component_map[key]}
 							<td class={regionCell} role="gridcell">
 								{#if component}
-									<svelte:component this={component} {meta} cell={value} />
+									<div class="flex justify-center items-center">
+										<svelte:component this={component} {meta} cell={value} />
+									</div>
 								{:else}
-									<span class="font-token whitespace-pre-line break-words">
+									<span class="flex font-token whitespace-pre-line break-words justify-center items-center">
 										{#if Array.isArray(value)}
 											<ul class="list-disc pl-4 whitespace-normal">
 												{#each value as val}

diff --git a/frontend/src/lib/components/ModelTable/Th.svelte b/frontend/src/lib/components/ModelTable/Th.svelte
@@ -14,7 +14,7 @@
 	class={_class}
 	data-testid="tableheader"
 >
-	<div class="flex items-center h-full">
+	<div class="flex items-center h-full justify-center">
 		<slot />
 		<span
 			class="pl-2"

diff --git a/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte b/frontend/src/routes/(app)/(internal)/ebios-rm/[id=uuid]/+page.svelte
@@ -80,12 +80,12 @@
 		ws4: [
 			{
 				title: safeTranslate(m.ebiosWs4_1()),
-				status: 'to_do',
+				status: data.data.meta.workshops[3].steps[0].status,
 				href: `${$page.url.pathname}/workshop-4/operational-scenario?activity=one&next=${$page.url.pathname}`
 			},
 			{
 				title: safeTranslate(m.ebiosWs4_2()),
-				status: 'to_do',
+				status: data.data.meta.workshops[3].steps[1].status,
 				href: `${$page.url.pathname}/workshop-4/operational-scenario?activity=two&next=${$page.url.pathname}`
 			}
 		],
@@ -177,11 +177,19 @@
 		>
 			<div slot="addRiskAnalysis">
 				<button class="flex flex-col text-left hover:text-purple-800" on:click={modalCreateForm}>
-					<span
-						class="absolute flex items-center justify-center w-8 h-8 bg-gray-100 rounded-full -start-4 ring-4 ring-white"
-					>
-						<i class="fa-solid fa-clipboard-check"></i>
-					</span>
+						{#if data.data.meta.workshops[4].steps[0].status == 'done'}
+							<span
+								class="absolute flex items-center justify-center w-8 h-8 bg-success-200 rounded-full -start-4 ring-4 ring-white"
+							>
+								<i class="fa-solid fa-check" />
+							</span>
+						{:else}
+							<span
+								class="absolute flex items-center justify-center w-8 h-8 bg-surface-200 rounded-full -start-4 ring-4 ring-white"
+							>
+								<i class="fa-solid fa-clipboard-check" />
+							</span>
+						{/if}
 					<h3 class="font-medium leading-tight">{m.activity()} 1</h3>
 					<p class="text-sm">{safeTranslate(m.ebiosWs5_1())}</p>
 				</button>