[OCaml] High Intensity Training Online
fix Repair profile menu disclosure state
Fix the extra stylesheet brace that broke rules after the profile menu. Add a folded/unfolded triangle to the summary, and mark the drawer as a labelled menu with menu-item semantics for Profile, Settings, and Sign out.
Changed files
lib/web/assets/hito.css
@@ -181,6 +181,16 @@
181
181
}
182
182
.profile-menu > summary::-webkit-details-marker { display: none; }
183
183
.profile-menu > summary::marker { content: ""; }
184
Added:
.profile-menu > summary::after {
185
Added:
display: inline-block;
186
Added:
margin-left: 0.5rem;
187
Added:
content: "▸";
188
Added:
font-size: 0.75em;
189
Added:
transition: transform 150ms ease;
190
Added:
}
191
Added:
.profile-menu[open] > summary::after {
192
Added:
transform: rotate(90deg);
193
Added:
}
184
194
.profile-menu-drawer {
185
195
position: absolute;
186
196
right: 0;
@@ -230,7 +240,6 @@
230
240
}
231
241
.profile-menu .logout {
232
242
margin: 0;
233
Removed:
}
234
243
}
235
244
236
245
.page-home .bottom-nav > a[href="/"],
lib/web/pages.ml
@@ -62,6 +62,7 @@
62
62
| Some (viewer : View_model.Viewer.t), Some request ->
63
63
let menu_link page path label =
64
64
let attrs = [ class_ "profile-menu-item"; href path ] in
65
Added:
let attrs = Dream_html.string_attr "role" "menuitem" :: attrs in
65
66
let attrs =
66
67
if spa_client then Dream_html.attr "data-hito-app-link" :: attrs
67
68
else attrs
@@ -95,8 +96,12 @@
95
96
tag "summary" summary_attrs
96
97
[ txt "%s" viewer.View_model.Viewer.username ];
97
98
tag "div"
98
Removed:
[ class_ "profile-menu-drawer" ]
99
99
[
100
Added:
class_ "profile-menu-drawer";
101
Added:
Dream_html.string_attr "role" "menu";
102
Added:
Dream_html.string_attr "aria-label" "Profile menu";
103
Added:
]
104
Added:
[
100
105
menu_link "profile" Routes.profile "Profile";
101
106
menu_link "profile" Routes.profile "Settings";
102
107
tag "form"
@@ -112,6 +117,7 @@
112
117
[
113
118
type_ "submit";
114
119
class_ "profile-menu-item";
120
Added:
Dream_html.string_attr "role" "menuitem";
115
121
value "Sign out";
116
122
];
117
123
];