danvics/pediatric-ai-scribe-v3
1
0
Fork 0
Code Issues Pull requests Projects Releases 14 Packages Wiki Activity Actions
pediatric-ai-scribe-v3/public/components/cms.html
Daniel Onyejesi ffacdcbedb Fix loading race condition, improve quiz UX, editor toolbar, settings page 
- Fix: component loader now fires tabChanged AFTER HTML is in DOM
  (fixes CMS/settings stuck at loading)
- CMS: separate "New Article", "New Quiz", "New Pearl" buttons
- CMS: editor toolbar with formatting buttons (bold, italic, headings,
  lists, links, tables, quotes, code, hr)
- CMS: quiz questions have numbered headers (Q1, Q2...), larger inputs,
  clear "check correct answer" labels
- CMS: validation prevents saving questions without correct answer marked
- Quiz UX: large card-style question boxes with gradient number badges,
  bigger option buttons with hover effects and selection feedback,
  checkmark/cross icons on results
- Settings: improved card spacing, input styling, section headers with
  bottom borders for visual hierarchy
- Settings: updated compliance section (removed HIPAA references, added
  BAA/institution guidelines language)
2026-03-23 20:37:35 -04:00

149 lines
8.7 KiB
HTML
Raw Blame History

<div class="module-header">
<h2><i class="fas fa-pen-to-square"></i> Content Manager</h2>
<p>Create and manage Learning Hub content, quizzes, and categories</p>
</div>
<!-- Stats bar -->
<div class="cms-stats-bar" id="lh-cms-stats-bar">
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-published">-</span><span class="cms-stat-label">Published</span></div>
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-drafts">-</span><span class="cms-stat-label">Drafts</span></div>
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-categories">-</span><span class="cms-stat-label">Categories</span></div>
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-quizzes">-</span><span class="cms-stat-label">Quizzes</span></div>
<div class="cms-stat"><span class="cms-stat-value" id="cms-stat-attempts">-</span><span class="cms-stat-label">Attempts</span></div>
</div>
<!-- CMS Layout: sidebar + main -->
<div class="cms-layout">
<!-- Sidebar: Categories + filters -->
<aside class="cms-sidebar">
<div class="cms-sidebar-section">
<h4><i class="fas fa-folder-tree"></i> Categories</h4>
<div id="lh-cms-categories" class="cms-cat-list"></div>
<div class="cms-add-cat">
<input type="text" id="lh-cms-cat-name" placeholder="New category..." class="cms-input-sm">
<button id="btn-lh-add-cat" class="cms-btn-add" title="Add category"><i class="fas fa-plus"></i></button>
</div>
</div>
<div class="cms-sidebar-section">
<h4><i class="fas fa-filter"></i> Filter</h4>
<select id="cms-filter-status" class="cms-input-sm" style="width:100%;margin-bottom:6px;">
<option value="all">All Status</option>
<option value="published">Published</option>
<option value="draft">Drafts</option>
</select>
<select id="cms-filter-category" class="cms-input-sm" style="width:100%;">
<option value="all">All Categories</option>
</select>
</div>
</aside>
<!-- Main: Content list / Editor -->
<div class="cms-main">
<!-- Content list view -->
<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>
</div>
<div class="cms-search">
<i class="fas fa-search"></i>
<input type="text" id="cms-search" placeholder="Search content..." class="cms-input-sm">
</div>
</div>
<div class="cms-content-table">
<div class="cms-table-header">
<span class="cms-col-title">Title</span>
<span class="cms-col-cat">Category</span>
<span class="cms-col-type">Type</span>
<span class="cms-col-status">Status</span>
<span class="cms-col-date">Updated</span>
<span class="cms-col-actions"></span>
</div>
<div id="lh-cms-content-list" class="cms-table-body">
<div style="text-align:center;padding:40px;color:var(--g400);">Loading...</div>
</div>
</div>
</div>
<!-- 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>
<div class="cms-editor-actions">
<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>
</div>
</div>
<input type="hidden" id="lh-cms-edit-id" value="">
<!-- Title -->
<input type="text" id="lh-cms-edit-title" class="cms-title-input" placeholder="Enter title...">
<!-- Meta row -->
<div class="cms-meta-row">
<div class="cms-meta-field">
<label>Category</label>
<select id="lh-cms-edit-category" class="cms-input-sm">
<option value="">Uncategorized</option>
</select>
</div>
<div class="cms-meta-field">
<label>Subject</label>
<input type="text" id="lh-cms-edit-subject" class="cms-input-sm" placeholder="e.g., Development">
</div>
<div class="cms-meta-field">
<label>Type</label>
<select id="lh-cms-edit-type" class="cms-input-sm">
<option value="article">Article</option>
<option value="quiz">Quiz Only</option>
<option value="pearl">Clinical Pearl</option>
</select>
</div>
</div>
<!-- Body editor with toolbar -->
<div class="cms-body-section">
<label class="cms-label">Body</label>
<div class="cms-editor-toolbar">
<button type="button" class="cms-tb-btn" data-insert="b" title="Bold"><i class="fas fa-bold"></i></button>
<button type="button" class="cms-tb-btn" data-insert="i" title="Italic"><i class="fas fa-italic"></i></button>
<button type="button" class="cms-tb-btn" data-insert="u" title="Underline"><i class="fas fa-underline"></i></button>
<span class="cms-tb-sep"></span>
<button type="button" class="cms-tb-btn" data-insert="h2" title="Heading 2">H2</button>
<button type="button" class="cms-tb-btn" data-insert="h3" title="Heading 3">H3</button>
<span class="cms-tb-sep"></span>
<button type="button" class="cms-tb-btn" data-insert="ul" title="Bullet List"><i class="fas fa-list-ul"></i></button>
<button type="button" class="cms-tb-btn" data-insert="ol" title="Numbered List"><i class="fas fa-list-ol"></i></button>
<button type="button" class="cms-tb-btn" data-insert="blockquote" title="Quote"><i class="fas fa-quote-left"></i></button>
<span class="cms-tb-sep"></span>
<button type="button" class="cms-tb-btn" data-insert="a" title="Link"><i class="fas fa-link"></i></button>
<button type="button" class="cms-tb-btn" data-insert="code" title="Code"><i class="fas fa-code"></i></button>
<button type="button" class="cms-tb-btn" data-insert="table" title="Table"><i class="fas fa-table"></i></button>
<button type="button" class="cms-tb-btn" data-insert="hr" title="Horizontal Rule"><i class="fas fa-minus"></i></button>
</div>
<textarea id="lh-cms-edit-body" class="cms-body-editor" rows="16" placeholder="Write your content here..."></textarea>
</div>
<!-- Quiz builder -->
<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>
</div>
<div id="lh-cms-questions" class="cms-questions-list"></div>
</div>
</div>
</div>
</div>
Reference in a new issue View git blame Copy permalink