[OCaml] High Intensity Training Online

style calendar header is just prev / Today / next

Remove the month and year dropdowns and the Go button. The header is now the previous-month arrow, a centered Today link, and the next-month arrow. Month navigation is entirely arrow- and Today-driven; drop the unused month/year picker view-model fields and CSS.

Commit
a510f575ed23028528f8cfa7115c148822c47895
Author
Marius Peter <dev@marius-peter.com>
Author date
Committer
Marius Peter <dev@marius-peter.com>
Committer date
Changed files
lib/presenter/pages_logbook.ml
index 5a6b5897..ea3e2aa8 100644..100644
@@ -282,12 +282,6 @@
282 282 else [])
283 283 [ txt "%d" d.day_of_month ]
284 284 in
285 Removed: let option_ ~selected value label =
286 Removed: tag "option"
287 Removed: ([ Dream_html.string_attr "value" "%d" value ]
288 Removed: @ if value = selected then [ Dream_html.attr "selected" ] else [])
289 Removed: [ txt "%s" label ]
290 Removed: in
291 285 let prev_month =
292 286 if cal.selected_month = 1 then (cal.selected_year - 1, 12)
293 287 else (cal.selected_year, cal.selected_month - 1)
@@ -306,27 +300,7 @@
306 300 ]
307 301 [ txt "%s" label ]
308 302 in
309 Removed: (* The picker doubles as the title: month and year dropdowns between the prev
310 Removed: and next arrows, submitting on Go. *)
311 Removed: let picker =
312 Removed: tag "form"
313 Removed: [ action Routes.logbook; class_ "calendar-picker" ]
314 Removed: [
315 Removed: tag "select"
316 Removed: [ name "month"; Dream_html.string_attr "aria-label" "Month" ]
317 Removed: (List.map
318 Removed: (fun (n, nm) -> option_ ~selected:cal.selected_month n nm)
319 Removed: cal.months);
320 Removed: tag "select"
321 Removed: [ name "year"; Dream_html.string_attr "aria-label" "Year" ]
322 Removed: (List.map
323 Removed: (fun y -> option_ ~selected:cal.selected_year y (string_of_int y))
324 Removed: cal.years);
325 Removed: tag "button"
326 Removed: [ type_ "submit"; Dream_html.string_attr "aria-label" "Go" ]
327 Removed: [ txt "Go" ];
328 Removed: ]
329 Removed: in
303 Added: (* Header: previous, a Today link that returns to the current month, next. *)
330 304 tag "div"
331 305 [ class_ "calendar" ]
332 306 [
@@ -334,12 +308,6 @@
334 308 [ class_ "calendar-header" ]
335 309 [
336 310 arrow ~label:"‹" prev_month "Previous month";
337 Removed: picker;
338 Removed: arrow ~label:"›" next_month "Next month";
339 Removed: ];
340 Removed: tag "div"
341 Removed: [ class_ "calendar-subhead" ]
342 Removed: [
343 311 tag "a"
344 312 [
345 313 href Routes.logbook;
@@ -347,6 +315,7 @@
347 315 Dream_html.attr "data-hito-app-link";
348 316 ]
349 317 [ txt "Today" ];
318 Added: arrow ~label:"›" next_month "Next month";
350 319 ];
351 320 tag "table"
352 321 [ class_ "calendar-grid" ]
lib/presenter/view_model.ml
index 3f2ec3d3..ed406cfc 100644..100644
@@ -193,15 +193,13 @@
193 193
194 194 type t = {
195 195 selected_year : int;
196 Removed: selected_month : int; (** 1..12. *)
197 Removed: months : (int * string) list; (** (number, name) for the month dropdown. *)
198 Removed: years : int list; (** Selectable years, ascending. *)
196 Added: selected_month : int; (** 1..12; the month shown. *)
199 197 weekday_headings : string list; (** Seven short labels, Monday first. *)
200 198 weeks : cell list list; (** Rows of seven cells, Monday first. *)
201 199 }
202 Removed: (** A single month laid out as a week grid, above the logbook, with month and
203 Removed: year dropdowns to choose which month to show. The handler does the date
204 Removed: arithmetic; the presenter renders the grid and the picker. *)
200 Added: (** A single month laid out as a week grid, above the logbook. Prev/next
201 Added: arrows and a Today link navigate months. The handler does the date
202 Added: arithmetic; the presenter renders the grid. *)
205 203 end
206 204
207 205 module Progress_page = struct
lib/web/assets/hito.css
index 6bb7deda..1552e21d 100644..100644
@@ -757,22 +757,10 @@
757 757 text-decoration: none;
758 758 }
759 759 .calendar-arrow:hover { background: var(--hover-surface); }
760 Removed: .calendar-picker {
761 Removed: display: flex;
760 Added: .calendar-today-link {
762 761 flex: 1 1 auto;
763 Removed: gap: 0.35rem;
764 Removed: align-items: center;
765 Removed: justify-content: center;
766 Removed: }
767 Removed: .calendar-picker select { flex: 1 1 auto; min-width: 0; }
768 Removed: .calendar-picker button { flex: 0 0 auto; }
769 Removed: .calendar-subhead {
770 Removed: margin: 0.35rem 0 0.5rem;
771 762 text-align: center;
772 Removed: }
773 Removed: .calendar-today-link {
774 763 color: var(--oxblood-dark);
775 Removed: font-size: var(--font-size-small);
776 764 font-weight: 700;
777 765 text-decoration: none;
778 766 }
lib/web/handlers_logbook.ml
index 711760a1..4e0166fc 100644..100644
@@ -39,21 +39,6 @@
39 39
40 40 (* {1 Calendar} *)
41 41
42 Removed: let month_name = function
43 Removed: | 1 -> "January"
44 Removed: | 2 -> "February"
45 Removed: | 3 -> "March"
46 Removed: | 4 -> "April"
47 Removed: | 5 -> "May"
48 Removed: | 6 -> "June"
49 Removed: | 7 -> "July"
50 Removed: | 8 -> "August"
51 Removed: | 9 -> "September"
52 Removed: | 10 -> "October"
53 Removed: | 11 -> "November"
54 Removed: | 12 -> "December"
55 Removed: | _ -> "?"
56 Removed:
57 42 let is_leap y = (y mod 4 = 0 && y mod 100 <> 0) || y mod 400 = 0
58 43
59 44 let days_in_month ~year ~month =
@@ -91,14 +76,6 @@
91 76 now_tm.Unix.tm_mday
92 77 else 0
93 78 in
94 Removed: let entry_year e =
95 Removed: (Unix.gmtime (float_of_int e.View_model.Logbook_entry.at_unix))
96 Removed: .Unix.tm_year + 1900
97 Removed: in
98 Removed: let earliest =
99 Removed: List.fold_left (fun acc e -> min acc (entry_year e)) this_year entries
100 Removed: in
101 Removed: let years = List.init (this_year - earliest + 1) (fun i -> earliest + i) in
102 79 let workout_days =
103 80 List.filter_map
104 81 (fun (e : View_model.Logbook_entry.t) ->
@@ -137,8 +114,6 @@
137 114 {
138 115 selected_year = year;
139 116 selected_month = month;
140 Removed: months = List.init 12 (fun i -> (i + 1, month_name (i + 1)));
141 Removed: years;
142 117 weekday_headings = [ "Mon"; "Tue"; "Wed"; "Thu"; "Fri"; "Sat"; "Sun" ];
143 118 weeks = weeks cells;
144 119 }
test/web/logbook.ml
index 3160342e..a438c474 100644..100644
@@ -767,10 +767,10 @@
767 767 "the calendar is present" true
768 768 (Option.is_some (index_from ~needle:"class=\"calendar\"" page 0));
769 769 Alcotest.(check bool)
770 Removed: "a month/year picker is present" true
771 Removed: (Option.is_some (index_from ~needle:"calendar-picker" page 0));
770 Added: "a Today link is present" true
771 Added: (Option.is_some (index_from ~needle:"calendar-today-link" page 0));
772 772 Alcotest.(check bool)
773 Removed: "prev/next/today navigation is present" true
773 Added: "prev/next navigation is present" true
774 774 (Option.is_some (index_from ~needle:"calendar-arrow" page 0));
775 775 Alcotest.(check bool)
776 776 "a workout day is highlighted" true
@@ -783,7 +783,8 @@
783 783 (Option.is_some
784 784 (index_from ~needle:"Nothing logged yet." other 0));
785 785 Alcotest.(check bool)
786 Removed: "the picker still shows" true
787 Removed: (Option.is_some (index_from ~needle:"calendar-picker" other 0)) );
786 Added: "the calendar still shows" true
787 Added: (Option.is_some
788 Added: (index_from ~needle:"calendar-today-link" other 0)) );
788 789 ] );
789 790 ]