peter/RealCV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve score roundel CSS and fix rotation

Browse Source 
- Add explicit circumference calculation for clarity
- Apply rotate(-90deg) to start progress from 12 o'clock
- Add transform-origin: center for consistent rotation
- Clean up duplicate CSS rules
- Fix mobile responsive styles for score-roundel

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
peter
2026-01-20 23:59:13 +01:00
parent f840b9a55d
commit a15be6423a
1 changed files with 16 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/TrueCV.Web/Components/Pages/Report.razor
View File

@@ -132,10 +132,16 @@
<div class="score-roundel @GetScoreColorClass(_report!.OverallScore)">
<svg class="score-ring" viewBox="0 0 120 120">
<circle class="score-ring-bg" cx="60" cy="60" r="54" />
@{
var circumference = 339.292;
var progressLength = circumference * _report.OverallScore / 100;
var gapLength = circumference - progressLength;
}
@if (_report.OverallScore > 0)
{
<circle class="score-ring-progress" cx="60" cy="60" r="54"
stroke-dasharray="@(339.3 * _report.OverallScore / 100) 339.3" />
stroke-dasharray="@progressLength @gapLength"
stroke-dashoffset="0" />
}
</svg>
<div class="score-value-container">
@@ -512,6 +518,12 @@
padding: 8px;
}
.score-roundel .score-ring {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.score-roundel .score-ring-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.2);
@@ -522,6 +534,7 @@
fill: none;
stroke-width: 8;
stroke-linecap: round;
transform-origin: center;
transition: stroke-dasharray 0.6s ease;
}
@@ -559,55 +572,6 @@
color: white;
}
/* Legacy score-ring-container for backwards compat */
.score-ring-container {
position: relative;
width: 140px;
height: 140px;
margin: 0 auto;
}
.score-ring {
transform: rotate(-90deg);
width: 100%;
height: 100%;
}
.score-ring-bg {
fill: none;
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 8;
}
.score-ring-progress {
fill: none;
stroke: white;
stroke-width: 8;
stroke-linecap: round;
transition: stroke-dasharray 0.6s ease;
}
.score-value-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.score-value-container .score-value {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
color: white;
}
.score-value-container .score-max {
font-size: 1rem;
opacity: 0.7;
color: white;
}
/* Stat Items */
.stat-item {
padding: 0.5rem;
@@ -684,12 +648,12 @@
font-size: 1.5rem;
}
.score-ring-container {
.score-roundel {
width: 120px;
height: 120px;
}
.score-value-container .score-value {
.score-roundel .score-value {
font-size: 2rem;
}