[OCaml] High Intensity Training Online
refactor align workout fieldset layout
Keep movement order and field grouping explicit in the workout form. Use flex layouts for the ordered movement list and its movement and set-ending fieldsets so desktop and mobile controls follow the same structure.
Changed files
lib/presenter/pages_workout.ml
@@ -67,11 +67,15 @@
67
67
tag "li"
68
68
[ class_ "movement-group" ]
69
69
[
70
Removed:
tag "h3" [ class_ "movement-name" ] [ txt "%s" name ];
71
Removed:
number_field ~input_id:load_id ~field:load_field ~value:load_value
72
Removed:
~step_:"0.5" ~label:"Load (kg)" ~previous:previous_load ~unit:"kg";
73
Removed:
number_field ~input_id:reps_id ~field:reps_field ~value:reps_value
74
Removed:
~step_:"1" ~label:reps_label ~previous:previous_reps ~unit:"reps";
70
Added:
tag "fieldset"
71
Added:
[ class_ "movement-fieldset" ]
72
Added:
[
73
Added:
tag "legend" [] [ txt "%s" name ];
74
Added:
number_field ~input_id:load_id ~field:load_field ~value:load_value
75
Added:
~step_:"0.5" ~label:"Load (kg)" ~previous:previous_load ~unit:"kg";
76
Added:
number_field ~input_id:reps_id ~field:reps_field ~value:reps_value
77
Added:
~step_:"1" ~label:reps_label ~previous:previous_reps ~unit:"reps";
78
Added:
];
75
79
]
76
80
77
81
(* A stimulus records one movement or a prescribed pre-exhaust sequence. Its
lib/web/assets/hito.css
@@ -919,9 +919,8 @@
919
919
.chart-series.reps { stroke: var(--brass); stroke-dasharray: 5 3; }
920
920
921
921
/* --- Workout logging ---
922
Removed:
A stimulus has an ordered list of movements and one set ending. Each
923
Removed:
movement owns its three related controls, so a grid never mixes movements.
924
Removed:
The ending is a sibling concept, not another movement row. */
922
Added:
A stimulus has an ordered list of movement fieldsets and one set-ending
923
Added:
fieldset. Each fieldset keeps its related controls and title together. */
925
924
.logging-form {
926
925
display: flex;
927
926
flex-direction: column;
@@ -929,25 +928,45 @@
929
928
margin-top: 1rem;
930
929
}
931
930
.movement-list {
932
Removed:
display: grid;
931
Added:
display: flex;
932
Added:
flex-direction: column;
933
933
gap: 0.7rem;
934
934
margin: 0;
935
935
padding: 0;
936
936
list-style: none;
937
937
}
938
938
.movement-group {
939
Removed:
display: grid;
940
Removed:
grid-template-columns: repeat(3, minmax(0, 1fr));
939
Added:
margin: 0;
940
Added:
}
941
Added:
.movement-fieldset {
942
Added:
display: flex;
943
Added:
flex-wrap: wrap;
941
944
align-items: center;
942
945
gap: 0.6rem;
943
Removed:
}
944
Removed:
.movement-name {
945
946
margin: 0;
947
Added:
padding: 0;
948
Added:
border: 0;
949
Added:
}
950
Added:
.movement-fieldset > legend {
951
Added:
flex: 1 0 100%;
952
Added:
}
953
Added:
.movement-fieldset > .field,
954
Added:
.set-ending > .field-ending {
955
Added:
flex: 1 1 15rem;
956
Added:
}
957
Added:
.set-ending > .field-extension-amount {
958
Added:
flex: 0 1 18rem;
959
Added:
}
960
Added:
.movement-fieldset > legend,
961
Added:
.set-ending > legend {
962
Added:
margin: 0 0 0.25rem;
963
Added:
padding: 0;
946
964
color: var(--ink);
947
965
font: 600 var(--font-size-lead)/1.2 var(--sans);
948
966
letter-spacing: -0.01em;
967
Added:
text-transform: none;
949
968
}
950
Removed:
.movement-group > .field,
969
Added:
.movement-fieldset > .field,
951
970
.set-ending > .field {
952
971
min-width: 0;
953
972
margin: 0;
@@ -1004,27 +1023,20 @@
1004
1023
border-left: 0;
1005
1024
border-radius: 0 var(--radius) var(--radius) 0;
1006
1025
}
1007
Removed:
/* The set ending is a property of the completed stimulus. The dividing rule
1008
Removed:
and legend make that distinction clear without a second card. */
1026
Added:
/* The set ending is a property of the completed stimulus. Its spacing and
1027
Added:
legend make that distinction clear without a second card. */
1009
1028
.set-ending {
1010
Removed:
display: grid;
1011
Removed:
grid-template-columns: repeat(3, minmax(0, 1fr));
1029
Added:
display: flex;
1030
Added:
flex-wrap: wrap;
1031
Added:
align-items: center;
1012
1032
gap: 0.6rem;
1013
1033
margin: 0.1rem 0 0;
1014
1034
padding: 0.9rem 0 0;
1015
1035
border: 0;
1016
Removed:
border-top: 1px solid var(--rule);
1017
1036
}
1018
1037
.set-ending > legend {
1019
Removed:
grid-column: 1 / -1;
1020
Removed:
padding: 0;
1021
Removed:
color: var(--muted-ink);
1022
Removed:
font: 600 var(--font-size-small)/1.35 var(--sans);
1023
Removed:
letter-spacing: 0.05em;
1024
Removed:
text-transform: uppercase;
1038
Added:
flex: 1 0 100%;
1025
1039
}
1026
Removed:
.set-ending > .field-ending { grid-column: 1 / span 2; }
1027
Removed:
.set-ending > .field-extension-amount { grid-column: 3; }
1028
1040
.record-action { margin: 0 !important; }
1029
1041
.correction-actions {
1030
1042
display: grid;
@@ -1055,10 +1067,6 @@
1055
1067
.field-extension-amount {
1056
1068
display: none;
1057
1069
}
1058
Removed:
.set-ending:has(select[name="extension"] option[value=""]:checked)
1059
Removed:
.field-ending {
1060
Removed:
grid-column: 1 / -1;
1061
Removed:
}
1062
1070
.set-ending:has(select[name="extension"] option[value="static"]:checked)
1063
1071
.amount-label-reps {
1064
1072
display: none;
@@ -1358,14 +1366,20 @@
1358
1366
}
1359
1367
1360
1368
/* One column: a movement and its ending each take the full width. */
1361
Removed:
.movement-group,
1362
Removed:
.set-ending,
1369
Added:
.movement-fieldset,
1370
Added:
.set-ending {
1371
Added:
flex-direction: column;
1372
Added:
align-items: stretch;
1373
Added:
}
1374
Added:
.movement-fieldset > legend,
1375
Added:
.movement-fieldset > .field,
1376
Added:
.set-ending > legend,
1377
Added:
.set-ending > .field {
1378
Added:
flex: 0 0 auto;
1379
Added:
width: 100%;
1380
Added:
}
1363
1381
.correction-actions {
1364
1382
grid-template-columns: 1fr;
1365
Removed:
}
1366
Removed:
.set-ending > .field-ending,
1367
Removed:
.set-ending > .field-extension-amount {
1368
Removed:
grid-column: 1;
1369
1383
}
1370
1384
}
1371
1385