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

Jul 28 - Update text-editor to allow image resize

Browse Source
This commit is contained in:
nngo
2026-07-28 14:55:12 -04:00
parent ea9458395d
commit 4bb345da39
7 changed files with 622 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/css/admin.css
+59
View File
@@ -279,3 +279,62 @@ body.quill-on #body_src{display:none} /* hide raw textarea on
/* Images fit the editor width; table styling is owned by quill-table-better. */
#editor .ql-editor img{max-width:100%;height:auto;border-radius:6px}
#editor .ql-editor img:hover{outline:2px solid rgba(23,176,166,.35);outline-offset:2px;cursor:pointer}
/* Image resize overlay (static/js/image-resize.js). Fixed-positioned over the
selected image, so it never affects the editor's own layout or content. */
.jqc-imgres{
position:fixed;display:none;z-index:60;pointer-events:none;
border:1.5px solid var(--aqua);border-radius:4px;
}
.jqc-imgres.is-active{display:block}
.jqc-imgres.is-clipped{display:none} /* image scrolled out of the editor */
.jqc-imgres__handle{
position:absolute;width:11px;height:11px;background:var(--aqua);
border:2px solid #fff;border-radius:50%;pointer-events:auto;
box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.jqc-imgres__handle--nw{top:-6px;left:-6px;cursor:nwse-resize}
.jqc-imgres__handle--ne{top:-6px;right:-6px;cursor:nesw-resize}
.jqc-imgres__handle--sw{bottom:-6px;left:-6px;cursor:nesw-resize}
.jqc-imgres__handle--se{bottom:-6px;right:-6px;cursor:nwse-resize}
/* top/left are set by the script (kept inside the viewport); these are just the
pre-measurement defaults. */
.jqc-imgres__bar{
position:absolute;top:calc(100% + 8px);left:0;display:flex;align-items:center;gap:4px;
padding:4px 6px;background:var(--ink);border-radius:8px;pointer-events:auto;
box-shadow:0 6px 18px -8px rgba(0,0,0,.55);white-space:nowrap;
}
.jqc-imgres__btn{
font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.04em;
color:var(--paper);background:transparent;border:1px solid rgba(247,245,240,.25);
border-radius:6px;padding:3px 9px;cursor:pointer;
}
.jqc-imgres__btn:hover{background:var(--aqua);border-color:var(--aqua);color:#04201E}
.jqc-imgres__size{
font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:rgba(247,245,240,.6);
padding-left:4px;
}
/* Keep the cursor consistent and stop text selection mid-drag. */
body.jqc-imgres-dragging{cursor:ew-resize;user-select:none}
/* Upload feedback for pasted/dropped images (static/js/image-upload.js).
Non-blocking on purpose: an alert() mid-paste would interrupt typing. */
.jqc-toast{
position:fixed;right:20px;bottom:20px;z-index:70;max-width:min(420px,calc(100vw - 40px));
padding:11px 16px;border-radius:10px;background:var(--ink);color:var(--paper);
font-size:.86rem;line-height:1.4;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);
opacity:0;transform:translateY(8px);pointer-events:none;
transition:opacity .2s ease,transform .2s ease;
}
.jqc-toast.is-visible{opacity:1;transform:none}
.jqc-toast--error{background:var(--danger)}
.jqc-toast--busy::before{
content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;
background:var(--aqua);animation:jqc-toast-pulse 1s ease-in-out infinite;
}
@keyframes jqc-toast-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){
.jqc-toast{transition:none}
.jqc-toast--busy::before{animation:none}
}