[OCaml] High Intensity Training Online
fix Style Sign out like the other profile menu items
Sign out was an input[type=submit] wearing the menu-item class, so the global submit rule beat it on specificity and a patch rule undid that property by property — and missed the font, which left Sign out in the button face beside menu items in the inherited one. Make it a button element. Nothing global targets buttons, so the shared .profile-menu-item rule styles it alone and the patch goes. The client now finds either an input or a button as a form's submit control when it disables one during a request.
lib/presenter/page_shell.ml
@@ -116,13 +116,13 @@
116
116
]
117
117
[
118
118
Dream_html.csrf_tag request;
119
Removed:
void "input"
119
Added:
tag "button"
120
120
[
121
121
type_ "submit";
122
122
class_ "profile-menu-item";
123
123
Dream_html.string_attr "role" "menuitem";
124
Removed:
value "Sign out";
125
Removed:
];
124
Added:
]
125
Added:
[ txt "Sign out" ];
126
126
];
127
127
];
128
128
];
lib/web/assets/hito.css
@@ -253,6 +253,7 @@
253
253
width: 100%;
254
254
min-height: 2.5rem;
255
255
box-sizing: border-box;
256
Added:
margin: 0;
256
257
padding: 0.5rem 0.7rem;
257
258
border: none;
258
259
border-radius: var(--radius);
@@ -275,25 +276,6 @@
275
276
}
276
277
.profile-menu .logout {
277
278
margin: 0;
278
Removed:
}
279
Removed:
/* The Sign out control is an input[type="submit"] carrying .profile-menu-item,
280
Removed:
so the generic submit styling would otherwise fight the menu-item styling and
281
Removed:
leave a dark-on-dark hover. Pin it to the same transparent, ink-on-paper look
282
Removed:
as the other menu items, base and hover alike. */
283
Removed:
.profile-menu input[type="submit"].profile-menu-item {
284
Removed:
width: 100%;
285
Removed:
min-height: 2.5rem;
286
Removed:
margin-top: 0;
287
Removed:
border: none;
288
Removed:
background: transparent;
289
Removed:
color: var(--ink);
290
Removed:
letter-spacing: normal;
291
Removed:
text-transform: none;
292
Removed:
}
293
Removed:
.profile-menu input[type="submit"].profile-menu-item:hover {
294
Removed:
color: var(--oxblood-dark);
295
Removed:
background: #ece4d5;
296
Removed:
transform: none;
297
279
}
298
280
299
281
.page-home .bottom-nav > a[href="/"],
lib/web/workout_client.ml
@@ -279,16 +279,26 @@
279
279
Js.to_bool
280
280
(form##hasAttribute (Js.string "data-hito-feedback-form"))
281
281
in
282
Added:
(* The submit control is an input on most forms and a button in the
283
Added:
profile menu; both carry [disabled]. *)
282
284
let submit =
283
285
match
284
286
Js.Opt.to_option
285
Removed:
(form##querySelector (Js.string "input[type=submit]"))
287
Added:
(form##querySelector
288
Added:
(Js.string "input[type=submit], button[type=submit]"))
286
289
with
287
290
| None -> None
288
Removed:
| Some input -> Js.Opt.to_option (Dom_html.CoerceTo.input input)
291
Added:
| Some node -> (
292
Added:
match Js.Opt.to_option (Dom_html.CoerceTo.input node) with
293
Added:
| Some input -> Some (fun on -> input##.disabled := Js.bool on)
294
Added:
| None -> (
295
Added:
match Js.Opt.to_option (Dom_html.CoerceTo.button node) with
296
Added:
| Some button ->
297
Added:
Some (fun on -> button##.disabled := Js.bool on)
298
Added:
| None -> None))
289
299
in
290
300
Dom.preventDefault event;
291
Removed:
Option.iter (fun input -> input##.disabled := Js._true) submit;
301
Added:
Option.iter (fun set -> set true) submit;
292
302
set_busy true;
293
303
announce "Saving";
294
304
(* Dream.form accepts URL-encoded forms. FormData produces a
@@ -307,7 +317,7 @@
307
317
if request <> !request_number then Lwt.return_unit
308
318
else (
309
319
set_busy false;
310
Removed:
Option.iter (fun input -> input##.disabled := Js._false) submit;
320
Added:
Option.iter (fun set -> set false) submit;
311
321
let replace =
312
322
if workout then replace_workout else replace_app
313
323
in