Instead of overlaying text on top of the image (hard to read),
restructure each gallery card to flex-column:
- Image section (.gallery-img-wrap) on top with aspect-ratio:4/3
- Before/After labels row (.ba-labels) below the image, full text visible
- Caption (.gallery-caption) below that, with padding and border
Labels now show full text 'قبل از درمان' / 'بعد از درمان' in a clean
row under the split image — never overlapping, always readable.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The .hidden class only covered .modal-overlay and .fm-overlay.
Without the rule, display:flex on .cropper-overlay overrode .hidden
and the modal showed immediately on every page load.
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Admin: all upload buttons now open a crop-before-upload modal
- Canvas-based cropper (no external library)
- Ratio presets: 1:1, 4:3, 16:9, 3:4, free
- Drag to move crop box, drag corners to resize
- Touch support for mobile
- Crops client-side then uploads the result
- Frontend gallery: ba-label (قبل/بعد) now:
- Centered horizontally (block + width 100%)
- Wraps to multiple lines (white-space:normal)
- Responsive — never overflows or gets clipped
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Gallery section now fetches /api/gallery and renders real items
instead of hardcoded placeholders
- Before+after pairs render as side-by-side split with قبل/بعد labels
- Single imageUrl items render as a standard gallery card
- Tab buttons now filter items by category via data-cat attribute
- CSS added for .before-after, .ba-half, .ba-divider, .ba-label, .gallery-caption
- Fixes applied to correct file (Index.cshtml Razor page, not root index.html)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Removed <br> between name parts and added white-space:nowrap.
Adjusted clamp min from 2.2rem to 1.6rem so it scales down on
small screens without wrapping.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
soroush.asadi