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>
45 lines
1.4 KiB
HTML
45 lines
1.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ npc.name }} - Code of Conquest{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- Play screen styles for NPC chat -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/play.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="npc-chat-page">
|
|
{# Page Header with Back Button #}
|
|
<div class="npc-chat-header">
|
|
<a href="{{ url_for('game.play_session', session_id=session_id) }}" class="npc-chat-back-btn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M19 12H5M12 19l-7-7 7-7"/>
|
|
</svg>
|
|
Back
|
|
</a>
|
|
<h1 class="npc-chat-title">{{ npc.name }}</h1>
|
|
</div>
|
|
|
|
{# Include shared NPC chat content #}
|
|
{% include 'game/partials/npc_chat_content.html' %}
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Clear chat input after submission
|
|
document.body.addEventListener('htmx:afterSwap', function(e) {
|
|
if (e.target.closest('.chat-history')) {
|
|
const form = document.querySelector('.chat-input-form');
|
|
if (form) {
|
|
const input = form.querySelector('.chat-input');
|
|
if (input) {
|
|
input.value = '';
|
|
input.focus();
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|