Phillip Tarrant
2419dbeb34
- Add hybrid modal/page navigation based on screen size (1024px breakpoint) - Desktop (>1024px): Uses modal overlays for quick interactions - Mobile (≤1024px): Navigates to dedicated full pages for better UX - Extract shared NPC chat content into reusable partial template - Add responsive navigation JavaScript (responsive-modals.js) - Create dedicated NPC chat page route with back button navigation - Add mobile-optimized CSS with sticky header and chat input - Fix HTMX indicator errors by using htmx-indicator class pattern - Document responsive modal pattern for future features Addresses mobile UX issues: cramped space, nested scrolling, keyboard conflicts, and lack of native back button support in modals. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
31 lines
1011 B
HTML
31 lines
1011 B
HTML
{#
|
|
NPCs Accordion Content
|
|
Shows NPCs at current location with click to chat
|
|
Uses responsive navigation: modals on desktop, full pages on mobile
|
|
#}
|
|
{% if npcs %}
|
|
<div class="npc-list">
|
|
{% for npc in npcs %}
|
|
<div class="npc-item"
|
|
data-npc-id="{{ npc.npc_id }}"
|
|
onclick="navigateResponsive(event, '{{ url_for('game.npc_chat_page', session_id=session_id, npc_id=npc.npc_id) }}', '{{ url_for('game.npc_chat_modal', session_id=session_id, npc_id=npc.npc_id) }}')"
|
|
style="cursor: pointer;">
|
|
<div class="npc-name">{{ npc.name }}</div>
|
|
<div class="npc-role">{{ npc.role }}</div>
|
|
<div class="npc-appearance">{{ npc.appearance }}</div>
|
|
{% if npc.tags %}
|
|
<div class="npc-tags">
|
|
{% for tag in npc.tags %}
|
|
<span class="npc-tag">{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="quest-empty">
|
|
No NPCs at this location.
|
|
</div>
|
|
{% endif %}
|