[OCaml] High Intensity Training Online
feat Label the feedback modal close as Discard
Replace the × in the modal heading with a "Discard" link styled as an outlined primary button: oxblood text and border, transparent fill, filling on hover. Add the a.button.outline variant beside the existing secondary one so the style is shared, not local to the modal. The link still targets the logbook and still dismisses in place with script.
Changed files
lib/presenter/pages_logbook.ml
@@ -77,17 +77,16 @@
77
77
[ class_ "feedback-modal-heading" ]
78
78
[
79
79
tag "h2" [] [ txt "How are you feeling?" ];
80
Removed:
(* Close is a plain link back to the logbook. Nothing is stored
81
Removed:
until Submit, so there is no flow state to discard. With
82
Removed:
script, the client closes the dialog in place instead. *)
80
Added:
(* Discard is a plain link back to the logbook. Nothing is stored
81
Added:
until Submit, so there is no flow state to discard on the
82
Added:
server. With script, the client closes the dialog in place. *)
83
83
tag "a"
84
84
[
85
85
href Routes.logbook;
86
Removed:
class_ "feedback-modal-close";
87
Removed:
Dream_html.string_attr "aria-label" "Close feedback";
86
Added:
class_ "button outline feedback-modal-close";
88
87
Dream_html.attr "data-hito-feedback-dismiss";
89
88
]
90
Removed:
[ txt "×" ];
89
Added:
[ txt "Discard" ];
91
90
];
92
91
feedback_form request;
93
92
];
lib/web/assets/hito.css
@@ -518,6 +518,15 @@
518
518
color: var(--paper-raised);
519
519
background: var(--brass);
520
520
}
521
Added:
a.button.outline {
522
Added:
color: var(--oxblood);
523
Added:
background: transparent;
524
Added:
border-color: var(--oxblood);
525
Added:
}
526
Added:
a.button.outline:hover {
527
Added:
color: var(--paper-raised);
528
Added:
background: var(--oxblood);
529
Added:
}
521
530
522
531
/* The logbook table: recorded workouts, one row each, with the date, a link to
523
532
the workout, and how many exercises progressed. */
@@ -747,18 +756,11 @@
747
756
gap: 1rem;
748
757
}
749
758
.feedback-modal-heading h2 { margin-top: 0; }
759
Added:
/* Discard sits in the heading row, so it is shorter than a full-height button. */
750
760
.feedback-modal-close {
751
Removed:
min-width: 2.5rem;
752
761
min-height: 2.5rem;
753
Removed:
border: 1px solid var(--rule-strong);
754
Removed:
border-radius: 50%;
755
Removed:
color: var(--ink);
756
Removed:
background: transparent;
757
Removed:
cursor: pointer;
758
Removed:
font-size: 1.5rem;
759
Removed:
line-height: 1;
762
Added:
padding: 0 0.85rem;
760
763
}
761
Removed:
.feedback-modal-close:hover { background: var(--brass-wash); }
762
764
.feedback-actions {
763
765
display: flex;
764
766
flex-wrap: wrap;