nngo/JQC_features
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Jul 22 - Update - add Rich-text editor, draft/publish, drag-to-reorder

Browse Source
This commit is contained in:
nngo
2026-07-22 17:13:26 -04:00
parent a39fa091fa
commit 69b97d51fe
15 changed files with 1295 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/admin.css
+43
View File
@@ -220,3 +220,46 @@ form{display:inline}
font-family:"IBM Plex Mono",monospace;font-size:.8rem;color:var(--muted);
}
.btn.is-disabled{opacity:.4;cursor:default;pointer-events:none}
/* drag-to-reorder */
.drag-handle{
border:0;background:none;cursor:grab;color:var(--muted);
font-size:1.1rem;line-height:1;padding:2px 4px;border-radius:6px;
touch-action:none;transition:color .15s,background .15s;
}
.drag-handle:hover{color:var(--ink);background:var(--hair-2)}
.drag-handle:active{cursor:grabbing}
.sec-drag{margin-right:2px}
.sortable-ghost{opacity:.45}
.sortable-chosen{background:var(--hair-2)}
.sec-card.sortable-ghost{outline:2px dashed var(--aqua);outline-offset:-2px}
/* draft state */
.topic-row.is-draft{background:repeating-linear-gradient(
-45deg,transparent,transparent 8px,rgba(232,150,58,.05) 8px,rgba(232,150,58,.05) 16px)}
.topic-row.is-draft .topic-row__title{color:var(--muted)}
.chip--draft{color:#8A5A12;border-color:#F0D9B3;background:#FBF0E1}
/* publish checkbox on the form */
.field--check{flex-direction:row;align-items:center;gap:10px}
.field--check input[type=checkbox]{width:18px;height:18px;accent-color:var(--aqua);flex:none;margin:0}
.field--check>span{font-weight:600;font-size:.9rem}
/* Quill rich-text editor (progressive enhancement over #body_src textarea) */
#editor-toolbar.ql-tools, #editor{display:none} /* hidden until Quill loads */
body.quill-on #editor-toolbar.ql-tools,
body.quill-on #editor{display:block}
body.quill-on #body_src{display:none} /* hide raw textarea once enhanced */
#editor-toolbar.ql-toolbar{
border:1px solid var(--hair);border-bottom:0;border-radius:9px 9px 0 0;background:#fff;
}
#editor.ql-container{
border:1px solid var(--hair);border-radius:0 0 9px 9px;background:#fff;
font-family:"IBM Plex Sans",sans-serif;font-size:.98rem;min-height:180px;
}
#editor .ql-editor{min-height:180px}
.ql-editor:focus{outline:none}
#editor-toolbar.ql-toolbar .ql-stroke{stroke:var(--ink-soft)}
#editor-toolbar.ql-toolbar button:hover .ql-stroke{stroke:var(--aqua-deep)}
#editor-toolbar.ql-toolbar button.ql-active .ql-stroke{stroke:var(--aqua-deep)}