feat(web): implement responsive modal pattern for mobile-friendly NPC chat
- 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>
This commit is contained in:
@@ -1699,6 +1699,26 @@
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* HTMX Loading Indicator */
|
||||
.history-loading {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
padding: 1rem 0;
|
||||
font-style: italic;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show loading indicator when HTMX is making a request */
|
||||
.htmx-indicator.htmx-request .history-loading {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide other content while loading */
|
||||
.htmx-indicator.htmx-request > *:not(.history-loading) {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Responsive NPC Modal */
|
||||
@media (max-width: 700px) {
|
||||
.npc-modal-body {
|
||||
@@ -1805,3 +1825,152 @@
|
||||
.chat-history::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ===== NPC CHAT DEDICATED PAGE ===== */
|
||||
/* Mobile-friendly full page view for NPC conversations */
|
||||
|
||||
.npc-chat-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* Page Header with Back Button */
|
||||
.npc-chat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-primary);
|
||||
border-bottom: 2px solid var(--play-border);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.npc-chat-back-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--bg-input);
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--play-border);
|
||||
font-family: var(--font-heading);
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.npc-chat-back-btn:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--accent-gold);
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.npc-chat-back-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.npc-chat-title {
|
||||
flex: 1;
|
||||
margin: 0;
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.5rem;
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* Chat Container - Full Height Layout */
|
||||
.npc-chat-page .npc-chat-container {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 1rem;
|
||||
gap: 1rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Responsive Layout for NPC Chat Content */
|
||||
/* Desktop: 3-column grid */
|
||||
@media (min-width: 1025px) {
|
||||
.npc-chat-page .npc-chat-container {
|
||||
display: grid;
|
||||
grid-template-columns: 250px 1fr 300px;
|
||||
gap: 1.5rem;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: Stacked layout */
|
||||
@media (max-width: 1024px) {
|
||||
.npc-chat-page .npc-chat-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Compact profile on mobile */
|
||||
.npc-chat-page .npc-profile {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.npc-chat-page .npc-portrait {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.npc-chat-page .npc-profile-info {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.npc-chat-page .npc-relationship,
|
||||
.npc-chat-page .npc-profile-tags,
|
||||
.npc-chat-page .npc-interaction-stats {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Conversation takes most of the vertical space */
|
||||
.npc-chat-page .npc-conversation {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
/* History panel is collapsible on mobile */
|
||||
.npc-chat-page .npc-history-panel {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid var(--play-border);
|
||||
padding-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ensure chat history fills available space on page */
|
||||
.npc-chat-page .chat-history {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
/* Fix chat input to bottom on mobile */
|
||||
@media (max-width: 1024px) {
|
||||
.npc-chat-page .chat-input-form {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: var(--bg-secondary);
|
||||
padding: 0.75rem 0;
|
||||
border-top: 1px solid var(--play-border);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
81
public_web/static/js/responsive-modals.js
Normal file
81
public_web/static/js/responsive-modals.js
Normal file
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Responsive Modal Navigation
|
||||
*
|
||||
* Provides smart navigation that uses modals on desktop (>1024px)
|
||||
* and full page navigation on mobile (<=1024px) for better UX.
|
||||
*
|
||||
* Usage:
|
||||
* Instead of using hx-get directly on elements, use:
|
||||
* onclick="navigateResponsive(event, '/page/url', '/modal/url')"
|
||||
*/
|
||||
|
||||
// Breakpoint for mobile vs desktop (matches CSS @media query)
|
||||
const MOBILE_BREAKPOINT = 1024;
|
||||
|
||||
/**
|
||||
* Check if current viewport is mobile size
|
||||
*/
|
||||
function isMobile() {
|
||||
return window.innerWidth <= MOBILE_BREAKPOINT;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate responsively based on screen size
|
||||
*
|
||||
* @param {Event} event - Click event (will be prevented)
|
||||
* @param {string} pageUrl - Full page URL for mobile
|
||||
* @param {string} modalUrl - Modal content URL for desktop (HTMX)
|
||||
*/
|
||||
function navigateResponsive(event, pageUrl, modalUrl) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
if (isMobile()) {
|
||||
// Mobile: Navigate to full page
|
||||
window.location.href = pageUrl;
|
||||
} else {
|
||||
// Desktop: Load modal via HTMX
|
||||
const target = event.currentTarget;
|
||||
|
||||
// Trigger HTMX request programmatically
|
||||
htmx.ajax('GET', modalUrl, {
|
||||
target: '#modal-container',
|
||||
swap: 'innerHTML'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup responsive navigation for NPC items
|
||||
* Call this after NPCs are loaded
|
||||
*/
|
||||
function setupNPCResponsiveNav(sessionId) {
|
||||
document.querySelectorAll('.npc-item').forEach(item => {
|
||||
const npcId = item.getAttribute('data-npc-id');
|
||||
if (!npcId) return;
|
||||
|
||||
const pageUrl = `/game/session/${sessionId}/npc/${npcId}`;
|
||||
const modalUrl = `/game/session/${sessionId}/npc/${npcId}/chat`;
|
||||
|
||||
// Remove HTMX attributes and add responsive navigation
|
||||
item.removeAttribute('hx-get');
|
||||
item.removeAttribute('hx-target');
|
||||
item.removeAttribute('hx-swap');
|
||||
|
||||
item.style.cursor = 'pointer';
|
||||
item.onclick = (e) => navigateResponsive(e, pageUrl, modalUrl);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle window resize to adapt navigation behavior
|
||||
* Debounced to avoid excessive calls
|
||||
*/
|
||||
let resizeTimeout;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
// Re-setup navigation if needed
|
||||
console.log('Viewport resized:', isMobile() ? 'Mobile' : 'Desktop');
|
||||
}, 250);
|
||||
});
|
||||
Reference in New Issue
Block a user