fix(ui): remove unwanted model dropdowns and standardize hermes modal
- Remove automatic model dropdown creation that was breaking blog layout - Update Hermes modal to use 95vw sizing like other modals - Add showModal() and backdrop click handling for consistency - Use transform-based centering for proper mobile positioning - All modals now have consistent sizing and behavior
This commit is contained in:
parent
525a4317b8
commit
ec9853be45
2 changed files with 30 additions and 24 deletions
52
src/ui.js
52
src/ui.js
|
|
@ -484,38 +484,34 @@ export async function openHermesModal() {
|
|||
// Create modal using dialog element like TTS modal
|
||||
const modal = document.createElement("dialog");
|
||||
modal.id = "hermes-modal";
|
||||
modal.open = true;
|
||||
modal.style.position = "fixed";
|
||||
modal.style.zIndex = "2000";
|
||||
|
||||
if (USE_CUSTOM_STYLING) {
|
||||
modal.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 90%;
|
||||
modal.style.cssText += `
|
||||
width: 95vw;
|
||||
max-width: 800px;
|
||||
height: 90%;
|
||||
max-height: 700px;
|
||||
max-height: 95vh;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||||
background: white;
|
||||
z-index: 2000;
|
||||
margin: auto;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
`;
|
||||
} else {
|
||||
modal.style.cssText = `
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
z-index: 2000;
|
||||
modal.style.cssText += `
|
||||
width: 95vw;
|
||||
max-width: 800px;
|
||||
max-height: 95vh;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
`;
|
||||
}
|
||||
|
||||
|
|
@ -1172,6 +1168,18 @@ Format: Start with "Greetings! I'm Hermes..." and make it sound natural and enga
|
|||
|
||||
// Show the modal first, then load intro asynchronously
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Use showModal() for proper mobile support and backdrop
|
||||
modal.showModal();
|
||||
|
||||
// Close modal when clicking backdrop
|
||||
modal.addEventListener('click', (e) => {
|
||||
if (e.target === modal) {
|
||||
modal.close();
|
||||
document.body.removeChild(modal);
|
||||
hermesModalOpen = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Load Hermes introduction asynchronously after modal is shown
|
||||
addHermesIntroduction().catch((error) => {
|
||||
|
|
|
|||
|
|
@ -132,8 +132,6 @@ window.addEventListener("load", () => {
|
|||
}
|
||||
|
||||
UI.initializeSystem();
|
||||
Models.createModelSelectionDropdown();
|
||||
Models.addRefreshModelsButton();
|
||||
});
|
||||
|
||||
// Export helper functions for class-based integrations
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue