Files
thrillwiki_laravel/memory-bank/design/DesignMigration.md

129 lines
3.7 KiB
Markdown

# Design Migration from Django to Laravel
## Overview
This document tracks the migration of design assets and templates from the original Django project to Laravel/Livewire implementation.
## 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
```
## 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
## Migration Plan
### 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
### Phase 2: Component Structure
1. Blade Components
- Convert Django templates to Blade components
- Implement Livewire components for interactive features
- Maintain consistent naming and structure
### 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
### 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
## Progress Tracking
- [x] Phase 1: Core Assets
- [x] Image assets migration
- [x] CSS setup and migration
- [x] JavaScript migration
- [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