style: improve score display

intuitem · Jan 10, 2025 · d5d5c43 · d5d5c43
1 parent f385c0d
commit d5d5c43
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 31 deletions.
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -1084,6 +1084,7 @@
 	"material": "Material",
 	"environmental": "Environmental",
 	"documentationScore": "Documentation score",
+	"implementationScore": "Implementation score",
 	"useDocumentationScore": "Use documentation score",
 	"useDocumentationScoreHelpText": "A second score (the documentation score) will be available for scoring the requirements."
 }
diff --git a/frontend/src/lib/components/Forms/Score.svelte b/frontend/src/lib/components/Forms/Score.svelte
@@ -92,7 +92,7 @@
 	{/if}
 	<div class="flex flex-col w-full justify-evenly space-x-4">
 		{#if isApplicable}
-			<div class="flex w-full items-center justify-center flex-col">
+			<div class="flex w-full space-y-2 items-center justify-center flex-col">
 				<RangeSlider
 					class="w-full"
 					data-testid="range-slider-input"
@@ -104,7 +104,17 @@
 					ticked
 					disabled={!$isScored}
 				>
-					<div class="flex space-x-8 justify-center items-center">
+					<div class="flex space-x-8 justify-between items-center">
+						{#if !always_enabled}
+							<SlideToggle
+								bind:checked={$isScored}
+								class="shrink-0"
+								active="bg-primary-500"
+								name="score-slider"
+							>
+								<p class="text-sm text-gray-500">{m.scoringHelpText()}</p></SlideToggle
+							>
+						{/if}
 						{#if $isScored && scores_definition && $value !== null}
 							{#each scores_definition as definition}
 								{#if definition.score === $value}
@@ -114,43 +124,33 @@
 								{/if}
 							{/each}
 						{/if}
-						{#if !always_enabled}
-							<SlideToggle
-								bind:checked={$isScored}
+						<div class="flex space-x-2 justify-center items-center">
+							{#if show_documentation_score}<span>{m.implementationScore()}</span>{/if}
+							<ProgressRadial
+								stroke={100}
+								meter={displayScoreColor($value, max_score, inversedColors)}
+								value={$isScored ? formatScoreValue($value, max_score, fullDonut) : min_score}
+								font={150}
 								class="shrink-0"
-								active="bg-primary-500"
-								name="score-slider"
+								width={'w-12'}>{$isScored ? $value : '--'}</ProgressRadial
 							>
-								<p class="text-sm text-gray-500">{m.scoringHelpText()}</p></SlideToggle
-							>
-						{/if}
+						</div>
+					</div>
+				</RangeSlider>
+				{#if show_documentation_score}
+					<div class="flex space-x-2 justify-end w-full items-center">
+						<span>{m.documentationScore()}</span>
 						<ProgressRadial
 							stroke={100}
-							meter={displayScoreColor($value, max_score, inversedColors)}
-							value={$isScored ? formatScoreValue($value, max_score, fullDonut) : min_score}
+							meter={displayScoreColor($documentationScore, max_score, inversedColors)}
+							value={$isScored
+								? formatScoreValue($documentationScore, max_score, fullDonut)
+								: min_score}
 							font={150}
 							class="shrink-0"
-							width={'w-12'}>{$isScored ? $value : '--'}</ProgressRadial
+							width={'w-12'}>{$isScored ? $documentationScore : '--'}</ProgressRadial
 						>
-						<strong>{m.score()}</strong>
-						{#if show_documentation_score}
-							<div class="flex space-x-8 justify-center items-center">
-								<ProgressRadial
-									stroke={100}
-									meter={displayScoreColor($documentationScore, max_score, inversedColors)}
-									value={$isScored
-										? formatScoreValue($documentationScore, max_score, fullDonut)
-										: min_score}
-									font={150}
-									class="shrink-0"
-									width={'w-12'}>{$isScored ? $documentationScore : '--'}</ProgressRadial
-								>
-								<strong>{m.documentationScore()}</strong>
-							</div>
-						{/if}
 					</div>
-				</RangeSlider>
-				{#if show_documentation_score}
 					<RangeSlider
 						class="w-full"
 						data-testid="range-slider-input"