From 8951e59f496eec78bb256d52f122326054c6e975 Mon Sep 17 00:00:00 2001 From: pacnpal <183241239+pacnpal@users.noreply.github.com> Date: Tue, 25 Feb 2025 16:49:45 -0500 Subject: [PATCH] Implement HomeController, update home route, and enhance menu components with close functionality --- app/Http/Controllers/HomeController.php | 18 ++ app/Livewire/AuthMenuComponent.php | 5 + app/Livewire/MobileMenuComponent.php | 5 + app/Livewire/UserMenuComponent.php | 5 + ...25_160100_add_type_to_park_areas_table.php | 28 +++ memory-bank/design/DesignMigration.md | 179 ++++++------------ memory-bank/design/MenuComponents.md | 125 ++++++++++++ resources/views/home.blade.php | 38 ++++ resources/views/layouts/app.blade.php | 47 +++-- .../livewire/auth-menu-component.blade.php | 55 +++--- .../livewire/mobile-menu-component.blade.php | 97 ++++++++-- .../livewire/theme-toggle-component.blade.php | 32 ++-- .../livewire/user-menu-component.blade.php | 106 +++++++---- routes/web.php | 4 +- 14 files changed, 511 insertions(+), 233 deletions(-) create mode 100644 app/Http/Controllers/HomeController.php create mode 100644 database/migrations/2024_02_25_160100_add_type_to_park_areas_table.php create mode 100644 memory-bank/design/MenuComponents.md create mode 100644 resources/views/home.blade.php diff --git a/app/Http/Controllers/HomeController.php b/app/Http/Controllers/HomeController.php new file mode 100644 index 0000000..85045ef --- /dev/null +++ b/app/Http/Controllers/HomeController.php @@ -0,0 +1,18 @@ + Park::count(), + 'total_attractions' => ParkArea::count(), + 'total_coasters' => ParkArea::where('type', 'roller_coaster')->count(), + ]); + } +} \ No newline at end of file diff --git a/app/Livewire/AuthMenuComponent.php b/app/Livewire/AuthMenuComponent.php index 541b272..b55d622 100644 --- a/app/Livewire/AuthMenuComponent.php +++ b/app/Livewire/AuthMenuComponent.php @@ -13,6 +13,11 @@ class AuthMenuComponent extends Component $this->isOpen = !$this->isOpen; } + public function close() + { + $this->isOpen = false; + } + public function render() { return view('livewire.auth-menu-component'); diff --git a/app/Livewire/MobileMenuComponent.php b/app/Livewire/MobileMenuComponent.php index 92d477c..774693d 100644 --- a/app/Livewire/MobileMenuComponent.php +++ b/app/Livewire/MobileMenuComponent.php @@ -13,6 +13,11 @@ class MobileMenuComponent extends Component $this->isOpen = !$this->isOpen; } + public function close() + { + $this->isOpen = false; + } + public function render() { return view('livewire.mobile-menu-component'); diff --git a/app/Livewire/UserMenuComponent.php b/app/Livewire/UserMenuComponent.php index f6d9c4c..204a285 100644 --- a/app/Livewire/UserMenuComponent.php +++ b/app/Livewire/UserMenuComponent.php @@ -13,6 +13,11 @@ class UserMenuComponent extends Component $this->isOpen = !$this->isOpen; } + public function close() + { + $this->isOpen = false; + } + public function render() { return view('livewire.user-menu-component'); diff --git a/database/migrations/2024_02_25_160100_add_type_to_park_areas_table.php b/database/migrations/2024_02_25_160100_add_type_to_park_areas_table.php new file mode 100644 index 0000000..be0c526 --- /dev/null +++ b/database/migrations/2024_02_25_160100_add_type_to_park_areas_table.php @@ -0,0 +1,28 @@ +string('type')->default('attraction')->after('name'); + }); + } + + /** + * Reverse the migrations. + */ + public function down(): void + { + Schema::table('park_areas', function (Blueprint $table) { + $table->dropColumn('type'); + }); + } +}; \ No newline at end of file diff --git a/memory-bank/design/DesignMigration.md b/memory-bank/design/DesignMigration.md index f4f9a30..9593345 100644 --- a/memory-bank/design/DesignMigration.md +++ b/memory-bank/design/DesignMigration.md @@ -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 \ No newline at end of file +## Accessibility +- Proper focus states +- Clear hover indicators +- Sufficient color contrast +- Proper ARIA labels +- Keyboard navigation support \ No newline at end of file diff --git a/memory-bank/design/MenuComponents.md b/memory-bank/design/MenuComponents.md new file mode 100644 index 0000000..a7bb56e --- /dev/null +++ b/memory-bank/design/MenuComponents.md @@ -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 + +``` + +Menu containers have proper ARIA roles: +```blade +