wip: start mobile-first hermes modal redesign
This commit is contained in:
parent
24c696638c
commit
e972cbfd0a
1 changed files with 28 additions and 21 deletions
49
src/ui.js
49
src/ui.js
|
|
@ -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;
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue