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 | 17 Nablus Workshop Registration Form | Done |
|
||||||
| 17-1 | 17-1 Registration mailable and email template | Done |
|
| 17-1 | 17-1 Registration mailable and email template | Done |
|
||||||
| 17-2 | 17-2 Standalone registration page, form, and submit wiring | 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
|
<img
|
||||||
src="{{ asset('images/workshop-nablus-flyer.jpeg') }}"
|
src="{{ asset('images/workshop-nablus-flyer.jpeg') }}"
|
||||||
alt="ورشة متخصصة: القانون، التسويق الرقمي، وإدارة المتاجر الإلكترونية"
|
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)">
|
<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>
|
<h1 class="text-2xl font-bold mb-2" style="color: #2D322A">تسجيل في ورشة عمل ريادايات نابلس</h1>
|
||||||
<p class="mb-4" style="color: #2D322A">تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀</p>
|
<p class="mb-4" style="color: #2D322A">تخططين لإطلاق مشروعك الخاص أو تطوير تجارتك الإلكترونية؟ 🚀</p>
|
||||||
|
|||||||
Reference in New Issue
Block a user