Shrink oversized flyer image and logo on Nablus workshop form
Flyer capped to max-h-64 (was w-full, ~640x853px dominating the page); logo reduced to h-10 (was h-16), matching the site's own sm-logo convention. Pure styling change, no logic — 7/7 existing tests unchanged and passing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: 18
|
||||
title: 18 Nablus Workshop Form - Image Sizing Fix
|
||||
status: Done
|
||||
date: 2026-09-27
|
||||
parent: null
|
||||
---
|
||||
|
||||
## Description
|
||||
|
||||
Naser reviewed the Nablus workshop registration page (task 17, shipped in commit `690c223`) and
|
||||
found the flyer image and the logo render far too large. Fix the sizing in
|
||||
`resources/views/livewire/pages/forms/nablus-workshop.blade.php` — a pure styling change, no
|
||||
logic involved.
|
||||
|
||||
**File to modify:** `resources/views/livewire/pages/forms/nablus-workshop.blade.php`
|
||||
|
||||
Current flyer image markup (around line 39-43):
|
||||
|
||||
```blade
|
||||
<img
|
||||
src="{{ asset('images/workshop-nablus-flyer.jpeg') }}"
|
||||
alt="ورشة متخصصة: القانون، التسويق الرقمي، وإدارة المتاجر الإلكترونية"
|
||||
class="w-full rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
|
||||
/>
|
||||
```
|
||||
|
||||
The image is 1086x1448px (portrait). `w-full` inside the page's `max-w-[640px]` container
|
||||
scales it to roughly 640x853px, which dominates the page above the fold on both desktop and
|
||||
mobile. The full workshop agenda text is already duplicated in the paragraph immediately below
|
||||
this image (same file, further down), so the image is decorative here, not the only source of
|
||||
that information — it can be shown at a much smaller, capped size without losing information.
|
||||
|
||||
Change the class to cap its height and center it as a modest banner rather than a full-width
|
||||
hero:
|
||||
|
||||
```blade
|
||||
class="max-h-64 w-auto mx-auto rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
|
||||
```
|
||||
|
||||
Current logo markup (around line 46):
|
||||
|
||||
```blade
|
||||
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-16 w-auto object-contain mb-4" />
|
||||
```
|
||||
|
||||
`h-16` (64px) is larger than this project's own logo-size convention for a compact card header —
|
||||
`resources/views/components/logo.blade.php` defines `sm` as `h-10 w-10` (40px, its own comment
|
||||
says "Mobile nav") and `md` as `h-12 w-12` (48px, "Desktop nav"). Change the class to match the
|
||||
`sm` convention:
|
||||
|
||||
```blade
|
||||
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-10 w-auto object-contain mb-4" />
|
||||
```
|
||||
|
||||
No other part of the file changes. No route, layout, mailable, or validation logic is affected.
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
- [ ] `resources/views/livewire/pages/forms/nablus-workshop.blade.php`'s flyer `<img>` tag's
|
||||
class attribute contains `max-h-64` and does not contain `w-full`
|
||||
- [ ] The same file's logo `<img>` tag's class attribute contains `h-10` and does not contain
|
||||
`h-16`
|
||||
- [ ] Visiting `/forms/nablus-workshop` still returns HTTP 200 (no markup breakage introduced)
|
||||
- [ ] The existing test suite for this page (`tests/Feature/Public/NablusWorkshopRegistrationTest.php`)
|
||||
still passes unchanged — this is a styling-only change, it must not alter any of that
|
||||
test's assertions
|
||||
|
||||
## Sub-tasks
|
||||
|
||||
None.
|
||||
@@ -126,3 +126,4 @@
|
||||
| 17 | 17 Nablus Workshop Registration Form | Done |
|
||||
| 17-1 | 17-1 Registration mailable and email template | Done |
|
||||
| 17-2 | 17-2 Standalone registration page, form, and submit wiring | Done |
|
||||
| 18 | 18 Nablus Workshop Form - Image Sizing Fix | Done |
|
||||
|
||||
@@ -39,11 +39,11 @@ new #[Layout('components.layouts.standalone')] class extends Component
|
||||
<img
|
||||
src="{{ asset('images/workshop-nablus-flyer.jpeg') }}"
|
||||
alt="ورشة متخصصة: القانون، التسويق الرقمي، وإدارة المتاجر الإلكترونية"
|
||||
class="w-full rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
|
||||
class="max-h-64 w-auto mx-auto rounded-lg shadow-[0_2px_8px_rgba(0,0,0,0.1)]"
|
||||
/>
|
||||
|
||||
<div class="bg-white rounded-lg p-6" style="box-shadow: 0 2px 8px rgba(0,0,0,0.1)">
|
||||
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-16 w-auto object-contain mb-4" />
|
||||
<img src="{{ asset('images/logo.png') }}" alt="LIBRA for Rights" class="h-10 w-auto object-contain mb-4" />
|
||||
|
||||
<h1 class="text-2xl font-bold mb-2" style="color: #2D322A">تسجيل في ورشة عمل ريادايات نابلس</h1>
|
||||
<p class="mb-4" style="color: #2D322A">تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀</p>
|
||||
|
||||
Reference in New Issue
Block a user