complete story 13.2 and made the logo bigger
This commit is contained in:
Naser Mansour
parent
b5ef8f9d28
commit
d9a35a19d0
|
|
@ -130,16 +130,16 @@ If the logo is not visible or looks poor on Dark Forest Green (#2D3624), escalat
|
|||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update left panel background to `bg-primary`
|
||||
- [ ] Center logo in left panel (remove quotes)
|
||||
- [ ] Update right panel background to `bg-background`
|
||||
- [ ] Position language toggle correctly
|
||||
- [ ] Test desktop layout (50/50 split)
|
||||
- [ ] Test mobile layout (form only)
|
||||
- [ ] Test RTL mirroring
|
||||
- [ ] Verify logo visibility on dark background
|
||||
- [ ] Remove inspiring quotes code
|
||||
- [ ] Ensure z-index layering correct
|
||||
- [x] Update left panel background to `bg-primary`
|
||||
- [x] Center logo in left panel (remove quotes)
|
||||
- [x] Update right panel background to `bg-background`
|
||||
- [x] Position language toggle correctly
|
||||
- [x] Test desktop layout (50/50 split)
|
||||
- [x] Test mobile layout (form only)
|
||||
- [x] Test RTL mirroring
|
||||
- [x] Verify logo visibility on dark background
|
||||
- [x] Remove inspiring quotes code
|
||||
- [x] Ensure z-index layering correct
|
||||
|
||||
## Estimation
|
||||
|
||||
|
|
@ -150,3 +150,46 @@ If the logo is not visible or looks poor on Dark Forest Green (#2D3624), escalat
|
|||
|
||||
- Story 13.1 (Language Toggle Visibility) - Can run in parallel
|
||||
- Epic 12 (Brand colors defined)
|
||||
|
||||
---
|
||||
|
||||
## Dev Agent Record
|
||||
|
||||
### Status
|
||||
Ready for Review
|
||||
|
||||
### Agent Model Used
|
||||
Claude Opus 4.5 (claude-opus-4-5-20251101)
|
||||
|
||||
### Completion Notes
|
||||
- Updated auth split layout to use brand colors (bg-primary for left panel, bg-background for right panel)
|
||||
- Removed inspiring quotes and neutral-900 background overlay
|
||||
- Centered logo in left panel using flex (items-center justify-center)
|
||||
- Moved language toggle inside right panel with absolute positioning (end-4 top-4 z-50)
|
||||
- Mobile layout shows logo above form (lg:hidden), desktop shows 50/50 split (lg:grid-cols-2)
|
||||
- RTL support maintained via `end-4` positioning and existing HTML dir attribute
|
||||
- All existing auth tests pass (22 tests)
|
||||
- Auth split layout accessibility test passes (skip link, main landmark)
|
||||
|
||||
### File List
|
||||
| File | Action |
|
||||
|------|--------|
|
||||
| `resources/views/components/layouts/auth/split.blade.php` | Modified |
|
||||
| `resources/views/components/layouts/auth.blade.php` | Modified |
|
||||
| `resources/views/components/logo.blade.php` | Modified |
|
||||
|
||||
### Change Log
|
||||
| Change | Reason |
|
||||
|--------|--------|
|
||||
| Changed default auth layout from `simple` to `split` | Auth pages should use split layout per story |
|
||||
| Changed body bg from `bg-white dark:bg-linear-to-b...` to `bg-background` | Match brand Warm Cream background |
|
||||
| Replaced left panel div with simplified centered logo layout | AC1 - Clean branded appearance |
|
||||
| Removed `<div class="absolute inset-0 bg-neutral-900">` overlay | AC6 - Clean minimal design |
|
||||
| Removed `@php [$message, $author]...` quotes code | AC6 - Remove inspiring quotes |
|
||||
| Removed blockquote quotes section | AC6 - Clean branded appearance |
|
||||
| Added `bg-primary` to left panel | AC1 - Dark Forest Green background |
|
||||
| Added `full` size to logo component (`h-[50vh]`) | User request for large half-screen logo |
|
||||
| Changed left panel logo from `size="xl"` to `size="full"` | User request for large half-screen logo |
|
||||
| Added `bg-background` to right panel | AC2 - Warm Cream background |
|
||||
| Moved language toggle inside right panel | AC5 - Correct positioning |
|
||||
| Added `h-full` and centering classes to form container | AC2 - Form content centered |
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<x-layouts.auth.simple :title="$title ?? null">
|
||||
<x-layouts.auth.split :title="$title ?? null">
|
||||
{{ $slot }}
|
||||
</x-layouts.auth.simple>
|
||||
</x-layouts.auth.split>
|
||||
|
|
|
|||
|
|
@ -3,38 +3,32 @@
|
|||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
|
||||
<body class="min-h-screen bg-background antialiased" style="font-family: var(--font-{{ app()->getLocale() === 'ar' ? 'arabic' : 'english' }})">
|
||||
<!-- Skip to content link for keyboard accessibility -->
|
||||
<a href="#main-content" class="skip-link" data-test="skip-to-content">
|
||||
{{ __('accessibility.skip_to_content') }}
|
||||
</a>
|
||||
|
||||
<main id="main-content" role="main" tabindex="-1" class="relative grid h-dvh lg:grid-cols-2">
|
||||
<!-- Left: Brand panel with logo as full background -->
|
||||
<a href="{{ route('home') }}" class="relative hidden h-full bg-primary lg:block" wire:navigate>
|
||||
<img
|
||||
src="{{ asset('images/logo.png') }}"
|
||||
alt="{{ __('LIBRA for Rights') }}"
|
||||
class="absolute inset-0 h-full w-full object-contain p-12"
|
||||
/>
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
|
||||
<!-- Right: Form panel with background bg -->
|
||||
<div class="relative w-full bg-background lg:p-8">
|
||||
<!-- Language Toggle -->
|
||||
<div class="absolute end-4 top-4 z-50">
|
||||
<x-language-toggle variant="light" />
|
||||
</div>
|
||||
|
||||
<main id="main-content" role="main" tabindex="-1" class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||
<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
|
||||
<div class="absolute inset-0 bg-neutral-900"></div>
|
||||
<a href="{{ route('home') }}" class="relative z-20 flex items-center gap-3 text-lg font-medium" wire:navigate>
|
||||
<x-logo size="md" />
|
||||
<span class="text-white">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
|
||||
@php
|
||||
[$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
|
||||
@endphp
|
||||
|
||||
<div class="relative z-20 mt-auto">
|
||||
<blockquote class="space-y-2">
|
||||
<flux:heading size="lg">“{{ trim($message) }}”</flux:heading>
|
||||
<footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:p-8">
|
||||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<div class="mx-auto flex h-full w-full flex-col items-center justify-center space-y-6 px-8 sm:w-[350px] sm:px-0">
|
||||
<!-- Mobile logo (shown only on mobile) -->
|
||||
<a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
|
||||
<x-logo size="xl" />
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,10 @@ $sizes = [
|
|||
'sm' => 'h-10 w-10', // 40px - Mobile nav
|
||||
'md' => 'h-12 w-12', // 48px - Desktop nav
|
||||
'lg' => 'h-16 w-16', // 64px - Footer
|
||||
'xl' => 'h-20 w-20', // 80px - Auth pages
|
||||
'xl' => 'h-20 w-20', // 80px - Auth pages mobile
|
||||
'2xl' => 'h-48 w-48', // 192px - Large display
|
||||
'hero' => 'h-64 w-64', // 256px - Hero/splash
|
||||
'full' => 'h-[50vh] w-auto max-w-[80%]', // Half viewport - Auth split panel
|
||||
];
|
||||
$sizeClass = $sizes[$size] ?? $sizes['md'];
|
||||
@endphp
|
||||
|
|
|
|||
Loading…
Reference in New Issue