Skip to content

Commit

Permalink
Tweak chart design
Browse files Browse the repository at this point in the history
marlonbaeten committed May 27, 2024
1 parent f004fc2 commit 5b95e5c
Showing 3 changed files with 12 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/CompetenceResult.tsx
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ export default function CompetenceResult({
<div
className="bar"
style={{
width: `${percentage}%`,
width: `calc(${percentage}% - 0.5rem)`,
}}
></div>
</td>
4 changes: 2 additions & 2 deletions src/ThemeResult.tsx
Original file line number Diff line number Diff line change
@@ -32,7 +32,7 @@ export default function ThemeResult({ state }: { state: State }): JSX.Element {
className="bar"
style={{
backgroundColor: color,
width: `${percentage}%`,
width: `calc(${percentage}% - 0.5rem)`,
}}
></div>
</td>
@@ -45,7 +45,7 @@ export default function ThemeResult({ state }: { state: State }): JSX.Element {
<div
className="bar"
style={{
width: `${totalPercentage}%`,
width: `calc(${totalPercentage}% - 0.5rem)`,
}}
></div>
</td>
10 changes: 9 additions & 1 deletion src/index.css
Original file line number Diff line number Diff line change
@@ -208,7 +208,7 @@ table.form tr.selectable:hover {
top: 0.5rem;
content: '';
display: block;
width: 100%;
width: calc(100% - 0.5rem);
height: 1rem;
background-color: #fafafa;
}
@@ -225,12 +225,20 @@ table.form tr.selectable:hover {
padding: 0.25rem
}

.result td {
vertical-align: top;
}

.result td:nth-child(2) {
text-align: right;
padding: 0.25rem 1rem;
}

@media screen and (max-width: 768px) {
.result table {
width: 100%;
}

.result .progress {
max-width: 40vw;
}

0 comments on commit 5b95e5c

Please sign in to comment.