mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 03:51:09 -05:00
beac6ddfd8
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9ac4060c-9ba6-40b4-b325-c945a385dd39 Replit-Commit-Checkpoint-Type: full_checkpoint
119 lines
4.5 KiB
Plaintext
119 lines
4.5 KiB
Plaintext
# Enhanced ThrillWiki Header Icons Sizing Prompt
|
|
|
|
```xml
|
|
<instructions>
|
|
Increase the size of the theme toggle icon and user profile icon in ThrillWiki's header navigation. The icons should be more prominent and touch-friendly while maintaining visual harmony with the existing Django Cotton header component design. Update the CSS classes and ensure proper scaling across different screen sizes using ThrillWiki's responsive design patterns.
|
|
</instructions>
|
|
|
|
<thrillwiki_context>
|
|
ThrillWiki uses Django Cotton templating for the header component, likely located in a `header.html` template or Cotton component. The header contains navigation elements, theme toggle functionality (probably using AlpineJS for state management), and user authentication status indicators. The current icon sizing may be using utility classes or custom CSS within the Django project structure.
|
|
|
|
Technologies involved:
|
|
- Django Cotton for templating
|
|
- AlpineJS for theme toggle interactivity
|
|
- CSS/Tailwind for styling and responsive design
|
|
- Responsive design patterns for mobile usability
|
|
</thrillwiki_context>
|
|
|
|
<example>
|
|
Current header structure likely resembles:
|
|
```html
|
|
<!-- Django Cotton header component -->
|
|
<header class="header-container">
|
|
<nav class="nav-wrapper">
|
|
<!-- Theme toggle icon (current: small) -->
|
|
<button @click="toggleTheme()" class="theme-toggle">
|
|
<svg class="w-4 h-4"><!-- Theme icon --></svg>
|
|
</button>
|
|
|
|
<!-- User profile icon (current: small) -->
|
|
<div class="user-menu">
|
|
<svg class="w-4 h-4"><!-- User icon --></svg>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
```
|
|
|
|
Enhanced version should increase to:
|
|
```html
|
|
<!-- Updated with larger icons -->
|
|
<button @click="toggleTheme()" class="theme-toggle">
|
|
<svg class="w-6 h-6 md:w-7 md:h-7"><!-- Larger theme icon --></svg>
|
|
</button>
|
|
|
|
<div class="user-menu">
|
|
<svg class="w-6 h-6 md:w-7 md:h-7"><!-- Larger user icon --></svg>
|
|
</div>
|
|
```
|
|
</example>
|
|
|
|
<variables>
|
|
<current_icon_size>w-4 h-4 (16px)</current_icon_size>
|
|
<target_icon_size>w-6 h-6 (24px) mobile, w-7 h-7 (28px) desktop</target_icon_size>
|
|
<component_location>header.html, base.html, or dedicated Cotton component</component_location>
|
|
<styling_approach>Utility classes with responsive modifiers</styling_approach>
|
|
<interactivity>AlpineJS theme toggle, Django user authentication</interactivity>
|
|
</variables>
|
|
|
|
<thinking>
|
|
The header icons need to be enlarged while considering:
|
|
1. Touch accessibility (minimum 44px touch targets)
|
|
2. Visual balance with other header elements
|
|
3. Responsive behavior across devices
|
|
4. Consistency with ThrillWiki's design system
|
|
5. Proper spacing to avoid crowding
|
|
6. Potential impact on mobile header layout
|
|
|
|
Development approach should:
|
|
- Locate the header template/component
|
|
- Identify current icon sizing classes
|
|
- Update with responsive sizing utilities
|
|
- Test across breakpoints
|
|
- Ensure touch targets meet accessibility standards
|
|
</thinking>
|
|
|
|
<checkpoint_approach>
|
|
**Phase 1: Locate & Analyze**
|
|
- Find header template in Django Cotton components
|
|
- Identify current icon classes and sizing
|
|
- Document existing responsive behavior
|
|
|
|
**Phase 2: Update Sizing**
|
|
- Replace icon size classes with larger variants
|
|
- Add responsive modifiers for different screen sizes
|
|
- Maintain proper spacing and alignment
|
|
|
|
**Phase 3: Test & Refine**
|
|
- Test header layout on mobile, tablet, desktop
|
|
- Verify theme toggle functionality still works
|
|
- Check user menu interactions
|
|
- Ensure accessibility compliance (touch targets)
|
|
|
|
**Phase 4: Optimize**
|
|
- Adjust spacing if needed for visual balance
|
|
- Confirm consistency with ThrillWiki design patterns
|
|
- Test with different user states (logged in/out)
|
|
</checkpoint_approach>
|
|
|
|
<debugging_context>
|
|
Common issues to watch for:
|
|
- Icons becoming too large and breaking header layout
|
|
- Responsive breakpoints causing icon jumping
|
|
- AlpineJS theme toggle losing functionality after DOM changes
|
|
- User menu positioning issues with larger icons
|
|
- Touch target overlapping with adjacent elements
|
|
|
|
Django/HTMX considerations:
|
|
- Ensure icon changes don't break HTMX partial updates
|
|
- Verify Django Cotton component inheritance
|
|
- Check if icons are SVGs, icon fonts, or images
|
|
</debugging_context>
|
|
|
|
<testing_strategy>
|
|
1. **Visual Testing**: Check header appearance across screen sizes
|
|
2. **Functional Testing**: Verify theme toggle and user menu still work
|
|
3. **Accessibility Testing**: Confirm touch targets meet 44px minimum
|
|
4. **Cross-browser Testing**: Ensure consistent rendering
|
|
5. **Mobile Testing**: Test on actual mobile devices for usability
|
|
</testing_strategy>
|
|
``` |