View a policy version's content, and make policy text readable

The Policies admin page listed versions but never showed what any of them said, so revising a policy meant retyping it blind into an empty draft box. Each version row now has a View action that renders that version's text on the page, editable in place. A draft is saved back to itself; editing a published or archived version branches a new draft and leaves the original alone, because acceptances are recorded against policy_version_id and text a student agreed to must stay exactly as they saw it. That viewer also exposed why a studio reported the acceptance box as unreadable — one squashed line, overlapping words, a horizontal scrollbar. Bodies are typed into a bare textarea, so most carry no markup, and the raw text was emitted with its blank lines intact but nothing to turn them into paragraphs. PolicyVersion::bodyHtml() now renders every body the way WordPress renders post content (kses, then wpautop) and feeds all three consumers: the booking/enrolment JSON, the signup form, and the new viewer. Bodies written with markup are unaffected. The other half was that .us-policy-body had no CSS whatsoever and inherited whatever the theme did with an unstyled block in a form. It is now a bounded reading box that scrolls vertically and breaks long tokens, so a pasted URL cannot force the page sideways and a long policy cannot push the accept checkbox out of view. RegistrationPage was also never enqueueing the plugin stylesheet, which is why the signup gate looked worst of all. Closes #126 Closes #127 Co-Authored-By: Claude Opus 5 <[email protected]>
2026-07-28 17:05:00 -03:00
parent 907f665876
commit 3a954bac57
14 changed files with 533 additions and 12 deletions
@@ -282,6 +282,61 @@
    font-weight: 600;
 }

+/* Policy acceptance — booking, enrolment, and signup all render this markup. */
+.us-policy {
+    margin: 16px 0;
+}
+
+.us-policy h4 {
+    margin: 0 0 6px;
+}
+
+/*
+ * The body is admin-authored HTML sitting inside whatever layout the theme
+ * provides, so it gets an explicit reading box rather than inheriting one.
+ * `overflow-wrap` breaks pasted URLs instead of letting one long token force
+ * the horizontal scrollbar, and the bounded height keeps a long policy from
+ * pushing the accept checkbox off the screen.
+ */
+.us-policy-body {
+    box-sizing: border-box;
+    max-width: 100%;
+    max-height: 260px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 12px 14px;
+    margin-bottom: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fafafa;
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: break-word;
+    line-height: 1.5;
+    text-align: left;
+}
+
+.us-policy-body p,
+.us-policy-body ul,
+.us-policy-body ol {
+    margin: 0 0 0.75em;
+    max-width: 100%;
+}
+
+.us-policy-body ul,
+.us-policy-body ol {
+    padding-left: 1.5em;
+}
+
+.us-policy-body > :last-child {
+    margin-bottom: 0;
+}
+
+.us-policy-accept,
+.us-policies input[type="checkbox"] {
+    margin-right: 6px;
+}
+
@media (max-width: 640px) {
    .us-week-grid {
        grid-template-columns: 1fr;