mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 12:11:14 -05:00
Implement HomeController, update home route, and enhance menu components with close functionality
This commit is contained in:
pacnpal
@@ -1,129 +1,72 @@
|
||||
# Design Migration from Django to Laravel
|
||||
# Design Migration
|
||||
|
||||
## Overview
|
||||
This document tracks the migration of design assets and templates from the original Django project to Laravel/Livewire implementation.
|
||||
## Header Design
|
||||
- Solid background with subtle transparency (bg-gray-900)
|
||||
- Increased height for better visibility (h-20)
|
||||
- Consistent spacing with px-6
|
||||
- Logo uses text gradient effect
|
||||
- Navigation links properly spaced with hover effects
|
||||
- Search bar integrated into header with proper styling
|
||||
|
||||
## Static Assets Structure (Django)
|
||||
```
|
||||
static/
|
||||
├── css/
|
||||
│ ├── alerts.css
|
||||
│ ├── tailwind.css
|
||||
│ └── src/
|
||||
│ └── input.css
|
||||
├── images/
|
||||
│ ├── default-avatar.png
|
||||
│ ├── discord-icon.svg
|
||||
│ ├── favicon.png
|
||||
│ ├── google-icon.svg
|
||||
│ └── placeholders/
|
||||
│ ├── dark-ride.jpg
|
||||
│ ├── default-park.jpg
|
||||
│ ├── default-ride.jpg
|
||||
│ ├── flat-ride.jpg
|
||||
│ ├── other-ride.jpg
|
||||
│ ├── roller-coaster.jpg
|
||||
│ ├── transport.jpg
|
||||
│ └── water-ride.jpg
|
||||
└── js/
|
||||
├── alerts.js
|
||||
├── alpine.min.js
|
||||
├── cdn.min.js
|
||||
├── location-autocomplete.js
|
||||
├── main.js
|
||||
├── park-map.js
|
||||
├── photo-gallery.js
|
||||
└── search.js
|
||||
```
|
||||
## Menu Components
|
||||
|
||||
## Primary Templates (Django)
|
||||
1. Base Templates
|
||||
- base/base.html (Main layout template)
|
||||
|
||||
2. Feature-specific Templates
|
||||
- accounts/ - User authentication and profile templates
|
||||
- rides/ - Ride-related templates including listings and details
|
||||
- parks/ - Park management templates
|
||||
- companies/ - Company and manufacturer templates
|
||||
- location/ - Location-related templates
|
||||
- moderation/ - Content moderation templates
|
||||
- media/ - Media management templates
|
||||
### Common Features
|
||||
- Consistent backdrop blur effect
|
||||
- Semi-transparent backgrounds (bg-gray-900/95)
|
||||
- Subtle border effects (border-gray-800/50)
|
||||
- Smooth transitions and animations
|
||||
- Click-away behavior for all dropdowns
|
||||
- Proper z-indexing and positioning
|
||||
|
||||
## Migration Plan
|
||||
### User Menu
|
||||
- Larger profile picture (w-10 h-10)
|
||||
- Username display in dropdown
|
||||
- Sectioned menu items with borders
|
||||
- Consistent hover states
|
||||
- Clear visual hierarchy
|
||||
|
||||
### Phase 1: Core Assets
|
||||
1. Static Assets Migration
|
||||
- Copy and organize images in Laravel public directory
|
||||
- Set up Tailwind CSS with proper configuration
|
||||
- Migrate JavaScript assets to Laravel Vite setup
|
||||
### Mobile Menu
|
||||
- Full-width design
|
||||
- Proper spacing (p-6)
|
||||
- Enhanced search bar visibility
|
||||
- Smooth slide-in animation
|
||||
- Semi-transparent backdrop
|
||||
- Proper touch targets
|
||||
|
||||
### Phase 2: Component Structure
|
||||
1. Blade Components
|
||||
- Convert Django templates to Blade components
|
||||
- Implement Livewire components for interactive features
|
||||
- Maintain consistent naming and structure
|
||||
### Auth Menu
|
||||
- Wider dropdown (w-56)
|
||||
- Clear login/register options
|
||||
- Consistent styling with other menus
|
||||
- Proper icon alignment
|
||||
|
||||
### Phase 3: Layout & Design
|
||||
1. Base Layout
|
||||
- Implement base.blade.php mirroring Django base template
|
||||
- Set up layout components and partials
|
||||
- Configure asset compilation and delivery
|
||||
### Theme Toggle
|
||||
- Improved button states
|
||||
- Proper focus indicators
|
||||
- Smooth transition effects
|
||||
- Clear light/dark mode icons
|
||||
|
||||
### Phase 4: Feature Templates
|
||||
1. Systematic migration of feature-specific templates:
|
||||
- Auth & Profile views
|
||||
- Park management views
|
||||
- Ride management views
|
||||
- Company management views
|
||||
- Location components
|
||||
- Moderation interface
|
||||
- Media management views
|
||||
## Responsive Design
|
||||
- Mobile-first approach
|
||||
- Proper breakpoints for navigation
|
||||
- Search bar visibility management
|
||||
- Menu adaptations for different screen sizes
|
||||
|
||||
## Progress Tracking
|
||||
## Color System
|
||||
- Primary: Indigo-based gradient
|
||||
- Secondary: Gray scale for UI elements
|
||||
- Proper dark mode support
|
||||
- Consistent hover states
|
||||
- Semi-transparent overlays
|
||||
|
||||
- [x] Phase 1: Core Assets
|
||||
- [x] Image assets migration
|
||||
- [x] CSS setup and migration
|
||||
- [x] JavaScript migration
|
||||
## Typography
|
||||
- Poppins font family
|
||||
- Clear hierarchy in text sizes
|
||||
- Proper line heights
|
||||
- Consistent font weights
|
||||
|
||||
- [x] Phase 2: Component Structure
|
||||
- [x] Base components
|
||||
- [x] Interactive components
|
||||
- [x] Form components
|
||||
|
||||
- [x] Phase 3: Layout & Design
|
||||
- [x] Base layout
|
||||
- [x] Navigation
|
||||
- [x] Common elements
|
||||
|
||||
- [x] Phase 4: Feature Templates
|
||||
- [x] Auth templates
|
||||
- [x] Park templates
|
||||
- [x] Ride templates
|
||||
- [x] Company templates
|
||||
- [x] Location templates
|
||||
- [x] Moderation templates
|
||||
- [x] Media templates
|
||||
|
||||
## Technical Decisions
|
||||
|
||||
### CSS Strategy
|
||||
- Using Tailwind CSS for styling consistency
|
||||
- Maintaining utility-first approach from Django project
|
||||
- Reusing existing Tailwind configuration where possible
|
||||
|
||||
### JavaScript Strategy
|
||||
- Leveraging Laravel's Vite for asset compilation
|
||||
- Using Alpine.js for interactive features (matches Django implementation)
|
||||
- Maintaining modular structure for JS components
|
||||
|
||||
### Component Strategy
|
||||
- Converting Django template partials to Blade components
|
||||
- Using Livewire for dynamic features
|
||||
- Maintaining consistent naming conventions
|
||||
|
||||
## Next Steps
|
||||
1. Begin Phase 1 with static asset migration
|
||||
2. Set up base layout structure
|
||||
3. Implement core components
|
||||
4. Migrate feature-specific templates systematically
|
||||
## Accessibility
|
||||
- Proper focus states
|
||||
- Clear hover indicators
|
||||
- Sufficient color contrast
|
||||
- Proper ARIA labels
|
||||
- Keyboard navigation support
|
||||
125
memory-bank/design/MenuComponents.md
Normal file
125
memory-bank/design/MenuComponents.md
Normal file
@@ -0,0 +1,125 @@
|
||||
# Menu Components
|
||||
|
||||
## Menu Behavior (Auth, User, and Mobile)
|
||||
|
||||
All menu components implement consistent behavior for opening and closing using pure Livewire functionality:
|
||||
|
||||
1. **Click Outside to Close**
|
||||
- Uses `wire:click.away="close"` to close menu when clicking outside
|
||||
- Calls the Livewire `close()` method directly
|
||||
|
||||
2. **Toggle on Button Click**
|
||||
- Uses `wire:click.stop="toggle"` on the trigger button/image
|
||||
- Prevents event bubbling with wire:click.stop
|
||||
- Toggle method directly flips the boolean state
|
||||
- Simple and efficient state management
|
||||
|
||||
3. **Menu Styling and Behavior**
|
||||
- Uses z-index to ensure proper stacking
|
||||
- Full-width menu items for better clickability
|
||||
- Consistent hover and focus states
|
||||
- Left-aligned text in buttons for consistency
|
||||
|
||||
4. **Accessibility Features**
|
||||
- Proper ARIA roles and attributes
|
||||
- Focus management for keyboard navigation
|
||||
- Clear visual feedback on focus
|
||||
- Semantic HTML structure
|
||||
|
||||
## Mobile Menu Specific Features
|
||||
|
||||
1. **Backdrop Handling**
|
||||
- Semi-transparent backdrop when menu is open
|
||||
- Clicking backdrop closes menu
|
||||
- Smooth opacity transitions
|
||||
|
||||
2. **Responsive Behavior**
|
||||
- Hidden on larger screens (lg:hidden)
|
||||
- Full-width menu on mobile
|
||||
- Smooth slide and fade transitions
|
||||
|
||||
3. **Navigation Links**
|
||||
- Full-width clickable areas
|
||||
- Consistent spacing and padding
|
||||
- Clear visual feedback on hover/focus
|
||||
- Proper role attributes
|
||||
|
||||
### Implementation Details
|
||||
|
||||
All components share identical state management and methods:
|
||||
|
||||
```php
|
||||
class MenuComponent extends Component
|
||||
{
|
||||
public bool $isOpen = false;
|
||||
|
||||
public function toggle()
|
||||
{
|
||||
$this->isOpen = !$this->isOpen;
|
||||
}
|
||||
|
||||
public function close()
|
||||
{
|
||||
$this->isOpen = false;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Menu buttons include proper accessibility attributes:
|
||||
```blade
|
||||
<button
|
||||
wire:click.stop="toggle"
|
||||
type="button"
|
||||
role="button"
|
||||
aria-expanded="{{ $isOpen }}"
|
||||
aria-label="Menu name"
|
||||
id="menu-button"
|
||||
>
|
||||
<!-- Button content -->
|
||||
</button>
|
||||
```
|
||||
|
||||
Menu containers have proper ARIA roles:
|
||||
```blade
|
||||
<div
|
||||
wire:key="menu-name"
|
||||
wire:click.away="close"
|
||||
role="menu"
|
||||
aria-orientation="vertical"
|
||||
aria-labelledby="menu-button"
|
||||
class="... {{ $isOpen ? 'visible-state' : 'hidden-state' }}"
|
||||
>
|
||||
```
|
||||
|
||||
Menu items have consistent styling and accessibility:
|
||||
```blade
|
||||
<a
|
||||
href="{{ route('item.route') }}"
|
||||
role="menuitem"
|
||||
class="flex items-center w-full gap-3 px-4 py-3 text-gray-300 transition-colors hover:text-white hover:bg-gray-800/50 focus:outline-none focus:text-white focus:bg-gray-800/50"
|
||||
>
|
||||
<i class="w-5 fas fa-icon"></i>
|
||||
<span>Menu Item</span>
|
||||
</a>
|
||||
```
|
||||
|
||||
Mobile menu backdrop:
|
||||
```blade
|
||||
<div
|
||||
class="fixed inset-0 bg-black/50 transition-opacity duration-300 lg:hidden {{ $isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none' }}"
|
||||
wire:click="close"
|
||||
></div>
|
||||
```
|
||||
|
||||
This implementation:
|
||||
- Uses pure Livewire without Alpine.js dependencies
|
||||
- Maintains smooth transitions through CSS classes
|
||||
- Ensures consistent behavior across all menu components
|
||||
- Properly handles both click-outside and toggle functionality
|
||||
- Prevents event bubbling with wire:click.stop
|
||||
- Ensures proper re-rendering with wire:key
|
||||
- Uses simplified toggle logic for better reliability
|
||||
- Provides consistent styling and behavior for all menu items
|
||||
- Implements proper accessibility features throughout
|
||||
- Supports both mouse and keyboard interactions
|
||||
- Handles mobile-specific requirements elegantly
|
||||
Reference in New Issue
Block a user