mirror of
https://github.com/pacnpal/thrillwiki_laravel.git
synced 2025-12-20 14:11:10 -05:00
219 lines
4.8 KiB
Markdown
219 lines
4.8 KiB
Markdown
# ThrillWiki Design System
|
|
|
|
## Overview
|
|
This document details the design system implementation for the Laravel/Livewire version of ThrillWiki, ensuring visual and functional parity with the Django version.
|
|
|
|
## Core Design Elements
|
|
|
|
### Colors
|
|
- Primary: Indigo-500 (#6366f1)
|
|
- Secondary: Violet-500 (#8b5cf6)
|
|
- Full color scale defined in `tailwind.config.js`
|
|
|
|
### Typography
|
|
- Primary Font: Poppins (400, 500, 600, 700)
|
|
- System applied via Tailwind configuration
|
|
|
|
### Components
|
|
|
|
#### Navigation
|
|
- `.nav-link`: Primary navigation links
|
|
- `.site-logo`: Site logo styling
|
|
- `.menu-item`: Dropdown menu items
|
|
|
|
#### Forms
|
|
- `.form-input`: Standard form inputs
|
|
- Button variants:
|
|
- `.btn`: Primary button
|
|
- `.btn-secondary`: Secondary button
|
|
|
|
#### Alerts
|
|
- `.alert`: Base alert styling
|
|
- Variants:
|
|
- `.alert-success`
|
|
- `.alert-error`
|
|
- `.alert-warning`
|
|
- `.alert-info`
|
|
|
|
### Theme System
|
|
|
|
#### Dark Mode Implementation
|
|
1. System detection:
|
|
```javascript
|
|
window.matchMedia("(prefers-color-scheme: dark)")
|
|
```
|
|
|
|
2. User preference storage:
|
|
```javascript
|
|
localStorage.getItem("theme")
|
|
```
|
|
|
|
3. Class toggle:
|
|
```javascript
|
|
document.documentElement.classList.toggle("dark")
|
|
```
|
|
|
|
### Asset Organization
|
|
|
|
#### Directory Structure
|
|
```
|
|
public/
|
|
├── 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
|
|
resources/
|
|
├── css/
|
|
│ ├── app.css
|
|
│ ├── alerts.css
|
|
│ └── src/
|
|
│ └── input.css
|
|
└── js/
|
|
├── app.js
|
|
└── modules/
|
|
├── alerts.js
|
|
├── location-autocomplete.js
|
|
├── main.js
|
|
├── park-map.js
|
|
├── photo-gallery.js
|
|
└── search.js
|
|
```
|
|
|
|
### Build System Configuration
|
|
|
|
#### Vite Setup
|
|
- Entry points configured in `vite.config.js`
|
|
- Source maps enabled for development
|
|
- Vendor chunk splitting for optimal caching
|
|
|
|
#### Tailwind Configuration
|
|
- JIT mode enabled
|
|
- Custom color palette
|
|
- Extended theme configuration
|
|
- Plugins:
|
|
- @tailwindcss/forms
|
|
- @tailwindcss/typography
|
|
- @tailwindcss/aspect-ratio
|
|
|
|
### CSS Architecture
|
|
|
|
#### Layer Organization
|
|
1. Base (`@tailwind base`)
|
|
- HTML element defaults
|
|
- Font settings
|
|
- Scroll behavior
|
|
|
|
2. Components (`@tailwind components`)
|
|
- Navigation elements
|
|
- Form elements
|
|
- Buttons
|
|
- Alerts
|
|
|
|
3. Utilities (`@tailwind utilities`)
|
|
- Custom utilities
|
|
- Text gradient helpers
|
|
|
|
### Responsive Design
|
|
|
|
#### Breakpoints
|
|
- sm: 640px
|
|
- md: 768px
|
|
- lg: 1024px
|
|
- xl: 1280px
|
|
- 2xl: 1536px
|
|
|
|
#### Container Padding
|
|
```javascript
|
|
{
|
|
DEFAULT: '1rem',
|
|
sm: '2rem',
|
|
lg: '4rem',
|
|
xl: '5rem',
|
|
'2xl': '6rem',
|
|
}
|
|
```
|
|
|
|
### Animation System
|
|
|
|
#### Keyframes
|
|
```javascript
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
fadeOut: {
|
|
'0%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
}
|
|
```
|
|
|
|
#### Utilities
|
|
- `animate-fade-in`
|
|
- `animate-fade-out`
|
|
|
|
## Implementation Progress
|
|
|
|
### Completed
|
|
- [x] Base layout template
|
|
- [x] Color system migration
|
|
- [x] Typography setup
|
|
- [x] Core component classes
|
|
- [x] Dark mode implementation
|
|
- [x] Asset organization
|
|
- [x] Build system configuration
|
|
|
|
### Verified Against Django
|
|
- [x] Component templates migration (matches Django implementation)
|
|
- [x] Interactive features (maintains feature parity)
|
|
- [x] Form implementations (preserves Django patterns)
|
|
- [x] Navigation system (identical structure)
|
|
- [x] Alert system (same functionality)
|
|
|
|
### Framework-specific Adaptations
|
|
- [x] Template syntax conversion (Django → Blade)
|
|
- [x] Asset compilation (static → Vite)
|
|
- [x] Authentication directives (Django auth → Laravel auth)
|
|
- [x] Route naming (Django URLs → Laravel routes)
|
|
|
|
### Pending
|
|
- [ ] Modal system (in development)
|
|
- [ ] Photo gallery (planned)
|
|
- [ ] Map integration (planned)
|
|
- [ ] Search interface (planned)
|
|
- [ ] User profile components (planned)
|
|
|
|
## Next Steps
|
|
1. Implement remaining features:
|
|
- Modal system
|
|
- Photo gallery
|
|
- Map integration
|
|
- Search interface
|
|
- User profile components
|
|
|
|
2. Quality Assurance:
|
|
- Cross-browser testing
|
|
- Performance benchmarking
|
|
- Accessibility audit
|
|
- Mobile responsiveness verification
|
|
|
|
3. Documentation:
|
|
- Update component usage guides
|
|
- Document Laravel-specific adaptations
|
|
- Create migration guides for future components
|
|
- Maintain feature parity tracking
|
|
|
|
4. Optimization:
|
|
- Asset loading optimization
|
|
- JavaScript bundle size reduction
|
|
- Image optimization pipeline
|
|
- Caching strategy implementation |