wip: start mobile-first hermes modal redesign

This commit is contained in:
Russell Ballestrini 2025-07-02 06:51:16 -04:00
parent 24c696638c
commit e972cbfd0a

View file

@ -479,18 +479,35 @@ export async function toggleHermesModal() {
}
}
// Function to open Hermes modal
// Function to open Hermes modal - Mobile-first design
export async function openHermesModal() {
// Create modal using dialog element like TTS modal
const modal = document.createElement("dialog");
modal.id = "hermes-modal";
modal.style.position = "fixed";
modal.style.zIndex = "2000";
if (USE_CUSTOM_STYLING) {
modal.style.cssText += `
width: 95vw;
max-height: 95vh;
// Mobile-first: full screen on mobile, centered on desktop
const isMobile = window.innerWidth <= 768;
if (isMobile) {
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
border: none;
border-radius: 0;
background: white;
margin: 0;
padding: 0;
z-index: 2000;
overflow: hidden;
`;
} else {
modal.style.cssText = `
position: fixed;
width: 90vw;
max-width: 800px;
height: 90vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@ -499,19 +516,9 @@ export async function openHermesModal() {
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
background: white;
margin: 0;
padding: 0;
z-index: 2000;
overflow: hidden;
box-sizing: border-box;
`;
} else {
modal.style.cssText += `
width: 95vw;
max-height: 95vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
overflow: hidden;
box-sizing: border-box;
`;
}