shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine the calculator result layout
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-29 15:18:35 +02:00
parent 51853245ad
commit 0959c6740b
5 changed files with 61 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

30
website/src/styles/toolboxes/_calculator-results.scss
View file

@ -8,13 +8,17 @@
.calculator-form label,
.calculator-field,
.calculator-current-field,
.calculator-result {
.calculator-result-field {
display: grid;
width: 100%;
min-width: 0;
gap: 7px;
}
.calculator-result-field {
grid-template-rows: auto minmax(0, 1fr);
}
.calculator-card > *,
.calculator-form input {
width: 100%;
@ -113,7 +117,7 @@
.calculator-field > span,
.calculator-total-label,
.calculator-current-field > span,
.calculator-result span,
.calculator-result-field > span,
.tool-split-root-button {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
@ -121,8 +125,11 @@
}
.calculator-result {
display: grid;
width: 100%;
min-width: 0;
min-height: 72px;
justify-content: stretch;
align-items: end;
padding: 12px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
@ -154,3 +161,20 @@
font-size: 0.92rem;
line-height: 1.05;
}
@container calculator-tool (min-width: 561px) and (max-width: 820px) {
.calculator-result-field:not(.has-current) .calculator-result {
height: 36px;
min-height: 36px;
padding: 7px 12px;
align-items: center;
}
.calculator-result-field:not(.has-current) .calculator-result strong,
.calculator-result-field:not(.has-current) .calculator-result.is-long strong,
.calculator-result-field:not(.has-current) .calculator-result.is-compact strong {
font-size: var(--font-size-md);
line-height: 20px;
}
}

14
website/src/styles/toolboxes/_calculator.scss
View file

@ -43,9 +43,15 @@
grid-row: 2;
}
.calculator-result {
.calculator-result-field {
grid-column: 2;
grid-row: 1;
align-self: start;
}
.calculator-result-field.has-current {
grid-row: 1 / 3;
align-self: stretch;
}
.calculator-label-field,
@ -61,12 +67,16 @@
.calculator-field,
.calculator-current-field,
.calculator-result,
.calculator-result-field,
.calculator-label-field,
.calculator-save-button {
grid-column: 1;
grid-row: auto;
}
.calculator-result-field.has-current {
grid-row: auto;
}
}
@supports not (container-type: inline-size) {