diff --git a/CHANGELOG.md b/CHANGELOG.md index 52a2295..f6512a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,7 +14,7 @@ each change under the current top section as you work. ## [1.2.2] ### Added -- The booking calendar now has a **lesson type** filter above it, so a student browsing open times can narrow them to the types they actually want. Because not every open time can be booked as every private-lesson type — some times are tied to a specific type, others only take types of a matching length — the filter shows just the times bookable as the ticked types, and re-anchors the week view on the earliest one so it never opens on an empty week. Picking one of those times narrows the **Lesson type** picker on the registration form to the same list, and when only one type is left it is chosen automatically with its questions loaded. Tick nothing (or use **Show all types**) to see every open time as before. The filter is hidden when the studio only offers one private-lesson type. +- The booking calendar now has a **Show Only** button beside the List/Week toggle that opens a lesson-type filter, so a student browsing open times can narrow them to the types they actually want. Because not every open time can be booked as every private-lesson type — some times are tied to a specific type, others only take types of a matching length — the filter shows just the times bookable as the ticked types, and re-anchors the week view on the earliest one so it never opens on an empty week. Picking one of those times narrows the **Lesson type** picker on the registration form to the same list, and when only one type is left it is chosen automatically with its questions loaded. The type list starts collapsed and can be tucked away again without losing the filter; the button shows how many types are ticked. Tick nothing (or use **Show all types**) to see every open time as before. The filter is hidden when the studio only offers one private-lesson type. - The **Group Classes** block can now be pinned to a single class, under **Classes shown → Class** in the block sidebar (shortcode: `[us_group_classes offering="…"]`). Pick a class and the block shows only that one, so it can be embedded on a page that describes the class. In this mode the class's own description is left out to avoid repeating the page copy — the card shows the schedule, instructor, price, enrolment deadline and the enrol/withdraw controls. Leaving it on **All classes** keeps the full browsable catalog with descriptions. - The **Student Registration** block can now send students onward to a page of your choosing once they finish registering. Its **After email confirmation** panel is now **After registration**: the page you pick there is where the link shown to a newly registered student points — the "Sign in to your account" link after they confirm their email, and a "Continue to your account" link for an invited student, who is signed in immediately. A new **Redirect automatically** option takes them straight there instead of showing the link. Registration errors are never skipped — a failed sign-up and an expired confirmation link still show their message on the page, as does the "check your email to confirm your address" step. The redirect needs a page to be chosen; with none set, students see the link (or, for invited students, just the confirmation) as before. diff --git a/assets/css/frontend.css b/assets/css/frontend.css index cdd288d..973b351 100644 --- a/assets/css/frontend.css +++ b/assets/css/frontend.css @@ -117,6 +117,29 @@ color: #8a6d1a; } +.us-calendar-controls { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 8px; + margin-bottom: 12px; +} + +.us-filter-toggle { + padding: 6px 16px; + border: 1px solid #ccc; + border-radius: 4px; + background: transparent; + cursor: pointer; +} + +.us-filter-toggle.us-active { + background: #333; + border-color: #333; + color: #fff; +} + .us-type-filter { display: flex; flex-wrap: wrap; @@ -150,7 +173,6 @@ .us-view-toggle { display: flex; gap: 8px; - margin-bottom: 12px; } .us-view-toggle button { diff --git a/assets/js/booking.js b/assets/js/booking.js index 35e4ee2..6c23612 100644 --- a/assets/js/booking.js +++ b/assets/js/booking.js @@ -85,8 +85,10 @@ let catalog = []; // Lesson types the student has filtered the calendar down to; empty means - // "no filter" — every open slot is shown. + // "no filter" — every open slot is shown. The list starts collapsed behind + // the "Show Only" button and stays open across re-renders once revealed. const selectedTypeIds = new Set(); + let filterOpen = false; // Whether an offering can be booked into a slot — the client-side mirror of // the rule `POST /bookings` enforces: a slot tied to an offering takes that @@ -135,14 +137,31 @@ return addDays(key, -((date.getDay() - startOfWeek + 7) % 7)); } - function toggleHtml() { + // The calendar's control row: the view toggle, and the button that reveals + // the lesson-type filter beneath it. + function controlsHtml() { return ` -