Reported: on the session edit page, the photo preview rendered larger
than the rest of the form and overlapped the upload button below it.
Cause: transform:scale(zoom) only affects paint, not layout — the
preview's wrapper (.photo-preview-wrap, .novena-hero-photo-wrap) never
had overflow:hidden, so a zoomed-in crop visually spilled outside its
intended max-height/max-width box instead of being clipped to it. Cards
elsewhere were already fine (.rosary-card already has overflow:hidden).
Also: photo-crop.js/css had no cache-busting query string on any of their
three <script>/<link> tags, so a browser that loaded a page before this
feature's most recent update could easily keep serving a stale cached
copy indefinitely — added ?v=2 to force a refetch of this round's fix.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Every photo upload (session setup, novena group, Rosary Builder title
photo) gets shown two ways: full-size on the presentation cover slide
(unaffected, stays untouched), and cropped to a fixed box everywhere else
— home page cards, profile cards, the novena day-picker's circular hero
photo, and each admin form's own preview thumbnail. All of those crops
used to just take the image's dead center, with no way to control what
part of the photo that was — cropping out people's heads on portrait
photos.
- New sessions/novena_groups columns: photo_focal_x, photo_focal_y (0-100%),
photo_zoom (1-3x), defaulting to 50/50/1 — today's exact centered/
unzoomed behavior, so this is fully backward compatible until someone
actively repositions a photo.
- New assets/js/photo-crop.js: a reusable drag-to-pan + zoom modal editor.
The crop frame renders with the *exact* CSS recipe used at final render
time (object-position + transform:scale/transform-origin), so the editor
is a truthful live preview, not an approximation. A reference thumbnail
shows the full photo dimmed outside a rectangle marking the current crop.
All math reads actual rendered box dimensions rather than assuming fixed
pixel sizes, so it holds up responsively at any viewport width — caught
and fixed a real mismatch bug here by testing the widget standalone in a
browser before wiring it into any PHP form.
- New includes/photo.php: photo_crop_style() builds the inline style="..."
from a session/group row, used everywhere a crop is displayed.
- Wired into all three upload locations (admin/setup.php,
admin/novena_group.php, admin/builder.php) with a "Reposition" button,
and persisted through api/save_session.php, admin/novena_group.php's
save handler, and api/builder_session.php.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Each prayer in the library has an optional default_bead_type (small/large/
crucifix). Standard prayers get sensible defaults: Our Father=large,
Hail Mary=small, Sign of Cross=crucifix, Divine Mercy beads accordingly.
In the sequence, each step card shows a bead selector (—/○/●/✝) so users
can override the default per step. Adding a prayer pre-fills its default.
Bead library icon hints (○●✝) appear on prayer cards in the library.
Modal now includes a Bead selector for creating/editing prayers.
Remove the separate Bead Markers library section — beads live on prayers.
build_slides: prayer steps with bead_type now get a real bead_index so
the ring advances correctly during presentation.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Bead Markers section in library panel with Small, Large, Crucifix cards
- Bead steps render as amber-tinted cards in the sequence (no attribution)
- migrate_v5.php: adds step_type/bead_type columns, makes prayer_id nullable
- Bead steps produce slides with proper bead+bead_index so the ring advances
during presentation — allows participants to follow along on physical beads
- Prayer steps between beads still show bead_index=null (ring stays on last bead)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Replace hidden attribute + [hidden] CSS selector with a .modal-open
class toggle. The hidden attribute approach was unreliable because
CSS display:flex was winning the specificity battle. Class-based
show/hide is explicit and not subject to attribute/cascade conflicts.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
CSS display:flex on .modal-overlay overrides the HTML hidden attribute.
Add [hidden] selector to restore display:none when the attribute is present,
so the modal is correctly hidden on load and closeable via Cancel.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Layout: replace admin-container wrapper with #builder-page flex column;
add min-height:0 to builder-wrap, builder-body, both panels so the
inner scroll areas actually shrink correctly in a flex column.
Loading...: scripts at end of body mean DOMContentLoaded may have
already fired by the time the listener is registered. Check
document.readyState first and call init() directly if DOM is ready.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Superuser+ can now build a custom prayer sequence from scratch:
- Two-panel builder UI: step sequence (left) + searchable prayer library (right)
- 16 standard prayers seeded globally; users can create private custom prayers
- Admin can promote private prayers to global and manage the library
- Four attribution modes per step: Leader/All, Leader only, All together, None
- Optional subject name/pronoun for variable substitution in prayers
- Custom sessions fully presented via the existing presenter (auto-split works)
- migrate_v4.php creates custom_prayers + builder_steps tables
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Full source for loveandrosary.com: slide-based Rosary/novena/Divine Mercy
Chaplet presentation tool with multi-user roles, SVG bead ring, audio uploads,
donate strip, and public session profiles.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
pguzman