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

Improve calculator progress tracking and responsive 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 11:19:11 +02:00
parent 3f86d863ac
commit 51853245ad
15 changed files with 329 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,6 +19,62 @@
min-height: 0;
}
.module[data-module-type="calculator"] {
container-name: calculator-tool;
container-type: inline-size;
}
@container calculator-tool (max-width: 820px) {
.calculator-module {
grid-template-columns: minmax(0, 1fr);
}
.calculator-card {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.calculator-field {
grid-column: 1;
grid-row: 1;
}
.calculator-current-field {
grid-column: 1;
grid-row: 2;
}
.calculator-result {
grid-column: 2;
grid-row: 1 / 3;
}
.calculator-label-field,
.calculator-save-button {
grid-column: 1 / -1;
}
}
@container calculator-tool (max-width: 560px) {
.calculator-card {
grid-template-columns: minmax(0, 1fr);
}
.calculator-field,
.calculator-current-field,
.calculator-result,
.calculator-label-field,
.calculator-save-button {
grid-column: 1;
grid-row: auto;
}
}
@supports not (container-type: inline-size) {
.calculator-module {
grid-template-columns: minmax(0, 1fr);
}
}
.calculator-card,
.tool-split-results,
.timer-control-card,