style: tweak report layout

This commit is contained in:
Riccardo Senica
2025-01-20 05:52:50 +00:00
parent 7c1e3989a5
commit 26cfc526d1

View File

@@ -137,6 +137,27 @@ export class ExpenseReporter {
th { background-color: #f5f5f5; }
.summary { margin: 20px 0; padding: 20px; background: #f9f9f9; border-radius: 5px; }
.category-summary { margin-top: 10px; }
.rating {
--star-size: 20px;
--star-background: #ffd700;
--star-color: #ddd;
--percent: calc(var(--rating) * 20%);
display: inline-block;
font-size: var(--star-size);
font-family: Times; /* Ensures better star symbol rendering */
line-height: 1;
background: linear-gradient(90deg,
var(--star-background) var(--percent),
var(--star-color) var(--percent)
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.rating::before {
content: '★★★★★';
letter-spacing: 3px;
}
</style>
</head>
<body>
@@ -208,18 +229,16 @@ export class ExpenseReporter {
(dl): dl is typeof dl & { comments: any[] } =>
dl.comments !== null && Array.isArray(dl.comments)
)
.flatMap(dl =>
dl.comments.map(
comment => `
.map(
dl => `
<tr>
<td>${dl.id}</td>
<td>${formatDate(dl.createdAt)}</td>
<td>${'✪'.repeat(comment.stars)}</td>
<td>${comment.text}</td>
<td><div class="rating" style="--rating: ${Math.round(dl.comments.reduce((a, c) => a + c.stars, 0) / dl.comments.length)};"></div></td>
<td>${dl.comments.map(c => `- ${c.text}`).join('<br>')}</td>
</tr>
`
)
)
.join('')}
</table>
</body>