danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 14 Packages Wiki Activity Actions

Fix CMS button clickability, replace AI topic input with context box

Browse source 
- Add type="button" to all CMS action buttons to prevent default submit
- Change overflow:hidden to overflow:visible on .cms-main to prevent clipping
- Add z-index to .cms-editor-actions for reliable click targeting
- Replace AI "Topic" text input with a descriptive textarea context box
  so users can tell AI what to generate (AI creates its own title)
- Rename AI tab from "By Topic" to "Describe Content"
This commit is contained in:
Daniel Onyejesi 2026-03-24 11:52:02 -04:00
parent 3863a9c8d1
commit 114bc4e7cd
3 changed files with 21 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
public/components/cms.html
View file

@ -46,10 +46,10 @@
<div id="cms-list-view">
<div class="cms-toolbar">
<div style="display:flex;gap:8px;">
<button id="btn-lh-new-content" class="btn-sm btn-primary" data-type="article"><i class="fas fa-file-alt"></i> New Article</button>
<button id="btn-lh-new-quiz" class="btn-sm" style="background:var(--amber-light);color:#92400e;border:1px solid var(--amber);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-clipboard-question"></i> New Quiz</button>
<button id="btn-lh-new-pearl" class="btn-sm" style="background:var(--purple-light);color:var(--purple);border:1px solid var(--purple);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-gem"></i> New Pearl</button>
<button id="btn-lh-new-presentation" class="btn-sm" style="background:#ecfdf5;color:#065f46;border:1px solid #6ee7b7;border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-presentation-screen"></i> New Presentation</button>
<button type="button" id="btn-lh-new-content" class="btn-sm btn-primary" data-type="article"><i class="fas fa-file-alt"></i> New Article</button>
<button type="button" id="btn-lh-new-quiz" class="btn-sm" style="background:var(--amber-light);color:#92400e;border:1px solid var(--amber);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-clipboard-question"></i> New Quiz</button>
<button type="button" id="btn-lh-new-pearl" class="btn-sm" style="background:var(--purple-light);color:var(--purple);border:1px solid var(--purple);border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-gem"></i> New Pearl</button>
<button type="button" id="btn-lh-new-presentation" class="btn-sm" style="background:#ecfdf5;color:#065f46;border:1px solid #6ee7b7;border-radius:6px;padding:6px 12px;font-size:13px;cursor:pointer;"><i class="fas fa-presentation-screen"></i> New Presentation</button>
</div>
<div class="cms-search">
<i class="fas fa-search"></i>
@ -75,15 +75,15 @@
<!-- Editor view (hidden until edit/new) -->
<div id="lh-cms-editor" class="cms-editor hidden">
<div class="cms-editor-header">
<button id="btn-lh-close-editor" class="btn-sm btn-ghost"><i class="fas fa-arrow-left"></i> Back to List</button>
<button type="button" id="btn-lh-close-editor" class="btn-sm btn-ghost"><i class="fas fa-arrow-left"></i> Back to List</button>
<div class="cms-editor-actions">
<button id="btn-lh-ai-open" class="btn-sm" style="background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;border:none;"><i class="fas fa-wand-magic-sparkles"></i> AI Generate</button>
<button id="btn-lh-delete-content" class="btn-sm hidden" style="background:var(--red-light);color:var(--red);"><i class="fas fa-trash"></i> Delete</button>
<button type="button" id="btn-lh-ai-open" class="btn-sm" style="background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;border:none;"><i class="fas fa-wand-magic-sparkles"></i> AI Generate</button>
<button type="button" id="btn-lh-delete-content" class="btn-sm hidden" style="background:var(--red-light);color:var(--red);"><i class="fas fa-trash"></i> Delete</button>
<select id="lh-cms-edit-published" class="cms-input-sm">
<option value="false">Draft</option>
<option value="true">Published</option>
</select>
<button id="btn-lh-save-content" class="btn-sm btn-primary"><i class="fas fa-save"></i> Save</button>
<button type="button" id="btn-lh-save-content" class="btn-sm btn-primary"><i class="fas fa-save"></i> Save</button>
</div>
</div>
<!-- Inline delete confirmation bar — message built dynamically in JS -->
@ -91,8 +91,8 @@
<i class="fas fa-triangle-exclamation"></i>
<span id="lh-delete-confirm-msg"></span>
<div style="display:flex;gap:8px;margin-left:auto;flex-shrink:0;">
<button id="btn-lh-delete-cancel" class="btn-sm btn-ghost">Cancel</button>
<button id="btn-lh-delete-yes" class="btn-sm" style="background:var(--red);color:white;">Yes, Delete</button>
<button type="button" id="btn-lh-delete-cancel" class="btn-sm btn-ghost">Cancel</button>
<button type="button" id="btn-lh-delete-yes" class="btn-sm" style="background:var(--red);color:white;">Yes, Delete</button>
</div>
</div>
@ -136,7 +136,7 @@
<!-- Source tabs -->
<div class="lh-ai-tabs">
<button class="lh-ai-tab active" data-aitab="topic"><i class="fas fa-lightbulb"></i> By Topic</button>
<button class="lh-ai-tab active" data-aitab="topic"><i class="fas fa-lightbulb"></i> Describe Content</button>
<button class="lh-ai-tab" data-aitab="upload"><i class="fas fa-file-upload"></i> Upload File</button>
<button class="lh-ai-tab" data-aitab="webdav" id="lh-ai-tab-webdav"><i class="fas fa-cloud"></i> Nextcloud</button>
</div>
@ -144,8 +144,8 @@
<!-- Topic tab -->
<div class="lh-ai-tabpanel" id="lh-ai-tp-topic">
<div class="form-group" style="margin:0;">
<label style="font-size:12px;font-weight:600;color:var(--g600);">Topic</label>
<input type="text" id="lh-ai-topic" class="cms-input-sm" style="width:100%;" placeholder="e.g., Febrile seizures in children, ADHD management, Asthma exacerbation">
<label style="font-size:12px;font-weight:600;color:var(--g600);">Tell AI what to create</label>
<textarea id="lh-ai-topic" class="cms-input-sm" style="width:100%;min-height:72px;resize:vertical;font-family:inherit;line-height:1.5;" placeholder="Describe the content you want AI to generate, e.g.:&#10;&#10;Write an article on febrile seizures in children covering causes, evaluation, and management.&#10;&#10;Create a clinical pearl on neonatal jaundice with key decision points.&#10;&#10;Build a quiz on pediatric asthma classification and treatment ladder."></textarea>
</div>
</div>
@ -246,10 +246,10 @@
</div>
<div style="display:flex;gap:8px;align-items:center;">
<button id="btn-lh-ai-generate" class="btn-sm btn-primary" style="flex:1;padding:10px;">
<button type="button" id="btn-lh-ai-generate" class="btn-sm btn-primary" style="flex:1;padding:10px;">
<i class="fas fa-wand-magic-sparkles"></i> Generate Content
</button>
<button id="btn-lh-ai-refine-body" class="btn-sm btn-ghost" style="padding:10px;">
<button type="button" id="btn-lh-ai-refine-body" class="btn-sm btn-ghost" style="padding:10px;">
<i class="fas fa-pen-to-square"></i> Refine Body
</button>
</div>
@ -272,8 +272,8 @@
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">
<label class="cms-label" style="margin:0;">Slides <span style="font-size:11px;color:var(--g400);font-weight:400;">(Marp markdown — separate slides with <code>---</code>)</span></label>
<div style="display:flex;gap:6px;">
<button id="btn-lh-preview-slides" class="btn-sm btn-ghost" style="font-size:12px;"><i class="fas fa-eye"></i> Preview</button>
<button id="btn-lh-download-pptx" class="btn-sm" style="background:#065f46;color:white;font-size:12px;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;"><i class="fas fa-file-powerpoint"></i> Download PPTX</button>
<button type="button" id="btn-lh-preview-slides" class="btn-sm btn-ghost" style="font-size:12px;"><i class="fas fa-eye"></i> Preview</button>
<button type="button" id="btn-lh-download-pptx" class="btn-sm" style="background:#065f46;color:white;font-size:12px;border:none;border-radius:6px;padding:5px 12px;cursor:pointer;"><i class="fas fa-file-powerpoint"></i> Download PPTX</button>
</div>
</div>
<textarea id="lh-marp-editor" class="lh-marp-textarea" placeholder="✨ Click 'AI Generate' above to create your slides automatically.
@ -294,7 +294,7 @@ Subtitle here
<div class="cms-quiz-section">
<div class="cms-quiz-header">
<h3><i class="fas fa-clipboard-question"></i> Quiz Questions</h3>
<button id="btn-lh-add-question" class="btn-sm btn-ghost"><i class="fas fa-plus"></i> Add Question</button>
<button type="button" id="btn-lh-add-question" class="btn-sm btn-ghost"><i class="fas fa-plus"></i> Add Question</button>
</div>
<div id="lh-cms-questions" class="cms-questions-list"></div>
</div>

4
public/css/styles.css
View file

@ -577,7 +577,7 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
.cms-sidebar{display:flex;flex-direction:column;gap:12px;}
.cms-sidebar-section{background:white;border:1px solid var(--g200);border-radius:10px;padding:14px;}
.cms-sidebar-section h4{margin:0 0 10px;font-size:13px;color:var(--g600);display:flex;align-items:center;gap:6px;}
.cms-main{background:white;border:1px solid var(--g200);border-radius:10px;overflow:hidden;}
.cms-main{background:white;border:1px solid var(--g200);border-radius:10px;overflow:visible;}
/* Category list in sidebar */
.cms-cat-list{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
@ -616,7 +616,7 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
/* Editor */
.cms-editor{padding:16px 20px;}
.cms-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.cms-editor-actions{display:flex;gap:8px;align-items:center;}
.cms-editor-actions{display:flex;gap:8px;align-items:center;position:relative;z-index:2;}
.cms-title-input{width:100%;font-size:22px;font-weight:600;padding:10px 0;border:none;border-bottom:2px solid var(--g200);outline:none;font-family:inherit;color:var(--g800);margin-bottom:12px;}
.cms-title-input:focus{border-bottom-color:var(--blue);}
.cms-meta-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px;}

2
public/js/learningHub.js
View file

@ -795,7 +795,7 @@
if (tabName === 'topic') {
var topic = document.getElementById('lh-ai-topic') ? document.getElementById('lh-ai-topic').value.trim() : '';
if (!topic) { showToast('Enter a topic', 'error'); return; }
if (!topic) { showToast('Describe what you want AI to create', 'error'); return; }
formData.append('topic', topic);
} else if (tabName === 'upload') {
var fileInput = document.getElementById('lh-ai-file');