[OCaml] High Intensity Training Online
fix Fix workout grid layout for ending and set controls
The failure-ending select did not span the full grid width and was cut off. The reps-unit label and amount input did not align under their grid columns. Make the ending select span all three grid columns. Switch the amount wrapper to display: contents so each child lands in its own column, with the amount label visually hidden.
lib/web/assets/hito.css
@@ -946,7 +946,7 @@
946
946
wider portion, split evenly at 0.809fr each. Each movement group and the
947
947
heading row use display:contents, so their cells land on the grid. The set
948
948
ending, which is the extension select and an optional amount, is a separate
949
Removed:
row below the grid. */
949
Added:
row below the grid on the same three columns. */
950
950
.exercise-name-label {
951
951
display: block;
952
952
color: var(--ink);
@@ -991,40 +991,28 @@
991
991
.logging-grid .field-number { padding: 0; }
992
992
.logging-grid input { width: 100%; }
993
993
994
Removed:
/* The set ending sits below the number columns and shares the logging grid's
995
Removed:
geometry. The select's left edge aligns with the Load column, and the amount
996
Removed:
aligns with the Reps column. The name column stays empty. The select fills
997
Removed:
its column. The amount is a compact input with a muted unit after it. */
994
Added:
/* The set ending sits below the movements and shares the logging grid's
995
Added:
geometry. Each control takes one column: the select under the names, the
996
Added:
amount under Load, and its unit under Reps. Positive failure hides the
997
Added:
amount, and the select then spans all three columns. See the :has block. */
998
998
.ending-block {
999
999
display: grid;
1000
1000
grid-template-columns: minmax(0, 1fr) minmax(0, 0.809fr) minmax(0, 0.809fr);
1001
Removed:
align-items: end;
1001
Added:
align-items: center;
1002
1002
gap: 0.6rem;
1003
1003
margin-top: 0.6rem;
1004
1004
}
1005
1005
.ending-block .field { margin: 0; min-width: 0; }
1006
Removed:
/* The select sits in the Load column and the amount in the Reps column, so
1007
Removed:
both align with the inputs above. Positive failure hides the amount. The
1008
Removed:
select then spans both number columns to fill that width. See the :has
1009
Removed:
block. */
1010
Removed:
.ending-block .field-ending { grid-column: 2; }
1011
Removed:
.ending-block .field-extension-amount { grid-column: 3; }
1012
Removed:
/* Input and its unit stay together on the amount line, and never wrap onto
1013
Removed:
separate lines. */
1014
Removed:
.ending-block .field-extension-amount {
1015
Removed:
display: flex;
1016
Removed:
align-items: baseline;
1017
Removed:
gap: 0.35rem;
1018
Removed:
flex-wrap: nowrap;
1019
Removed:
white-space: nowrap;
1020
Removed:
}
1021
Removed:
.ending-block .field-extension-amount input {
1022
Removed:
width: 4.5rem;
1023
Removed:
flex: none;
1024
Removed:
}
1006
Added:
.ending-block .field-ending { grid-column: 1; }
1007
Added:
/* The amount field flattens onto the grid, so its input and its unit each
1008
Added:
take a column. Its label is visually hidden and out of flow. */
1009
Added:
.ending-block .field-extension-amount { display: contents; }
1010
Added:
.ending-block .field-extension-amount input { grid-column: 2; }
1025
1011
.ending-block .field-unit {
1012
Added:
grid-column: 3;
1026
1013
color: var(--muted-ink);
1027
1014
font: 500 var(--font-size-small)/1 var(--sans);
1015
Added:
white-space: nowrap;
1028
1016
}
1029
1017
1030
1018
/* The extension amount follows the live selection with no script, because
@@ -1036,11 +1024,11 @@
1036
1024
.field-extension-amount {
1037
1025
display: none;
1038
1026
}
1039
Removed:
/* With no amount, the select fills both number columns to match the inputs. */
1027
Added:
/* With no amount, the select spans the whole grid. */
1040
1028
.logging-fieldset:has(select[name="extension"] option[value=""]:checked)
1041
1029
.ending-block
1042
1030
.field-ending {
1043
Removed:
grid-column: 2 / 4;
1031
Added:
grid-column: 1 / -1;
1044
1032
}
1045
1033
.logging-fieldset:has(select[name="extension"] option[value="static"]:checked)
1046
1034
.amount-label-reps {