From dbcf50e9fa2143a97ec4992eb5e691204ac92cbc Mon Sep 17 00:00:00 2001 From: Bobby Date: Mon, 11 Aug 2025 15:37:34 +0530 Subject: complete comment system in weblog --- static/css/_partials/post_comments.css | 302 +++++++++++++++++++++++++++++++++ static/css/blog/post.css | 99 ----------- static/css/miku_editor/miku.css | 2 +- static/js/blog/post.js | 10 -- static/js/miku_editor/tinymiku.js | 10 +- 5 files changed, 311 insertions(+), 112 deletions(-) create mode 100644 static/css/_partials/post_comments.css (limited to 'static') diff --git a/static/css/_partials/post_comments.css b/static/css/_partials/post_comments.css new file mode 100644 index 00000000..452f0d7e --- /dev/null +++ b/static/css/_partials/post_comments.css @@ -0,0 +1,302 @@ +.single-comment { + display: flex; + margin: 16px 0; + gap: 8px; + align-items: start; +} + +.voter { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; +} + +.voter span { + font-size: 14px; + color: #AD8CFF; + font-weight: bold; +} + +.voter form button[type="submit"] { + background: transparent; + padding: 0; +} + +.upvote-button { + position: relative; + top: 5px; +} + +.upvote-button.disabled, +.downvote-button.disabled { + opacity: 0.5; + filter: grayscale(100%) brightness(0.7); + cursor: not-allowed; +} + +.upvote-button.disabled:hover, +.downvote-button.disabled:hover { + opacity: 0.5; + transform: none; +} + +.upvote-button.voted, +.downvote-button.voted { + opacity: 0.6; + cursor: pointer; +} + +.upvote-button.voted img, +.downvote-button.voted img { + filter: grayscale(50%) brightness(0.8); +} + +.comment-avatar { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + width: 48px; +} + +.comment-area { + display: flex; + flex-direction: row; + align-items: start; + gap: 12px; + flex: 1; +} + +.comment-header { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + align-items: center; +} + +.comment-header-left { + display: flex; + align-items: center; + gap: 6px; +} + +.comment-header-left a { + color: #ff96c4; + font-weight: bold; + text-decoration: none; +} + +.comment-header-left a:hover { + text-decoration: underline; +} + +.anonymous-comment-user { + color: #54F2F2; + cursor: pointer; + font-weight: bold; +} + +.anonymous-comment-user:hover { + text-decoration: underline; +} + +.comment-header-right { + display: flex; + align-items: center; + gap: 8px; + font-size: 11px; +} + +.timesince { + color: #aaa; +} + +.comment-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; +} + +.comment-text p { + text-align: justify; + line-height: 1.5; + margin: 4px 0; +} + +.comment-replies { + margin-left: 36px; + border-left: 2px solid #AD8CFF; + padding-left: 12px; + margin-top: 12px; +} + +.comment-author-pill { + display: inline-block; + padding: 1px 5px; + font-size: 9px; + font-weight: bold; + text-transform: uppercase; + border-radius: 6px; + letter-spacing: 0.2px; + margin-left: 3px; + vertical-align: middle; +} + +.pill-registered { + background: linear-gradient(135deg, #e74c3c, #c0392b); + color: #fff; + border: 1px solid #e74c3c; + box-shadow: 0 0 2px rgba(231, 76, 60, 0.4); +} + +.pill-anonymous { + background: linear-gradient(135deg, #9b59b6, #8e44ad); + color: #fff; + border: 1px solid #9b59b6; + box-shadow: 0 0 2px rgba(155, 89, 182, 0.4); +} + +.miku-editor-container { + height: 256px; +} + +/* Override TinyMiku editor styles for word wrapping */ +.miku-editor-container .miku-editor-input { + white-space: pre-wrap !important; + word-wrap: break-word !important; + overflow-x: hidden !important; + overflow-y: auto !important; +} + +.miku-editor-container .miku-editor-syntax-highlight { + white-space: pre-wrap !important; + word-wrap: break-word !important; + overflow-x: hidden !important; + overflow-y: auto !important; +} + +.comment-edit-area { + display: none; +} + +.comment-reply-area { + display: none; + margin-top: 12px; + margin-left: 24px; + padding-left: 12px; + border-left: 2px solid rgba(173, 140, 255, 0.3); +} + +.comment-reply-actions { + margin-top: 8px; + display: flex; + flex-direction: row; + gap: 4px; +} + +.comment-action-bar { + display: flex; + flex-direction: row; + gap: 8px; + margin-top: 8px; +} + +.delete-comment-form { + display: inline; +} + +.delete-comment-form .delete-comment-button { + background: none; + border: none; + padding: 0; + font: inherit; + cursor: pointer; +} + +.comment-action-link-button { + font-weight: bold; + text-transform: capitalize; + cursor: pointer; +} + +.edit-comment-button { + color: #1fa88f; +} + +.edit-comment-button:hover { + color: #009980; + text-decoration: underline; +} + +.reply-comment-button { + color: #288ab1; +} + +.reply-comment-button:hover { + color: #0580a3; + text-decoration: underline; +} + +.delete-comment-button { + color: #c44061; +} + +.delete-comment-button:hover { + color: #e6265a; + text-decoration: underline; +} + +.comment-edit-actions { + margin-top: 8px; + display: flex; + flex-direction: row; + gap: 4px; +} + +.comment-edit-action-button { + padding: 6px 12px; + font-weight: bold; + text-transform: uppercase; + cursor: pointer; + border: none; + border-radius: 8px; + transition: all 0.15s ease; + font-size: 11px; +} + +.save-comment-button { + background: #2d5aa0; + border: 1px solid #000; +} + +.save-comment-button:hover { + background: #3d6bb0; +} + +.cancel-save-comment-button { + background: #5a3d99; + border: 1px solid #000; +} + +.cancel-save-comment-button:hover { + background: #6b4bb3; +} + +.new-comment-area { + display: flex; + flex-direction: column; + gap: 12px; + margin-top: 16px; +} + +.comment-submit-button { + background: #2d5aa0; + font-weight: bold; + cursor: pointer; + margin-top: 8px; +} \ No newline at end of file diff --git a/static/css/blog/post.css b/static/css/blog/post.css index a56055f8..ceb6b9a4 100644 --- a/static/css/blog/post.css +++ b/static/css/blog/post.css @@ -201,103 +201,4 @@ select[id="comment-sort"] { select[id="comment-sort"] option { background-color: rgba(255, 255, 255, 0.5); color: #4A0080; -} - -.single-comment { - display: flex; - margin: 16px 0; - gap: 8px; - align-items: start; -} - -.voter { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 8px; -} - -.voter span { - font-size: 14px; - color: #AD8CFF; - font-weight: bold; -} - -.voter form button[type="submit"] { - background: transparent; - padding: 0; -} - -.upvote-button { - position: relative; - top: 5px; -} - -.upvote-button.disabled, -.downvote-button.disabled { - opacity: 0.5; - filter: grayscale(100%) brightness(0.7); - cursor: not-allowed; -} - -.upvote-button.disabled:hover, -.downvote-button.disabled:hover { - opacity: 0.5; - transform: none; -} - -.upvote-button.voted, -.downvote-button.voted { - opacity: 0.6; - cursor: pointer; -} - -.upvote-button.voted img, -.downvote-button.voted img { - filter: grayscale(50%) brightness(0.8); -} - -.comment-area { - display: flex; - flex-direction: row; - align-items: start; - gap: 12px; - flex: 1; -} - -.comment-header { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; -} - -.comment-content { - flex: 1; - display: flex; - flex-direction: column; - gap: 4px; -} - -.anonymous-comment-user { - color: #54F2F2; - cursor: pointer; -} - -.anonymous-comment-user:hover { - text-decoration: underline; -} - -.comment-text p { - text-align: justify; - line-height: 1.5; - margin: 4px 0; -} - -.comment-replies { - margin-left: 36px; - border-left: 2px solid #AD8CFF; - padding-left: 12px; - margin-top: 12px; } \ No newline at end of file diff --git a/static/css/miku_editor/miku.css b/static/css/miku_editor/miku.css index d0a6b9f3..2eb57fbe 100644 --- a/static/css/miku_editor/miku.css +++ b/static/css/miku_editor/miku.css @@ -4,7 +4,7 @@ height: 500px; border: 2px solid #333; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; - font-size: 14px; + font-size: 13px; background: #0a0a0a; color: #e8e8e8; overflow: hidden; diff --git a/static/js/blog/post.js b/static/js/blog/post.js index ea353c0f..9b5e2d1a 100644 --- a/static/js/blog/post.js +++ b/static/js/blog/post.js @@ -148,13 +148,3 @@ function setupLightbox() { document.body.style.overflow = ''; // Re-enable scrolling } } - -function showReplyForm(commentId) { - const replyForm = document.getElementById(`reply-form-${commentId}`); - if (replyForm) replyForm.style.display = 'block'; -} - -function hideReplyForm(commentId) { - const replyForm = document.getElementById(`reply-form-${commentId}`); - if (replyForm) replyForm.style.display = 'none'; -} \ No newline at end of file diff --git a/static/js/miku_editor/tinymiku.js b/static/js/miku_editor/tinymiku.js index f35acbdc..60104864 100644 --- a/static/js/miku_editor/tinymiku.js +++ b/static/js/miku_editor/tinymiku.js @@ -197,6 +197,8 @@ } createEditor() { + const existingContent = this.container.textContent || this.container.innerText || ''; + this.container.className = 'miku-editor-container'; this.container.innerHTML = `
@@ -207,7 +209,7 @@ id="mikuEditor" placeholder="${this.options.placeholder}" spellcheck="false" - > + >${existingContent}
@@ -472,7 +474,7 @@ const quotePairs = { '"': '"', - "'": "'" + // "'": "'" }; const key = e.key; @@ -605,6 +607,10 @@ this.selectedIndex = -1; this.suggestions = []; } + + getContent() { + return this.editor.value; + } } window.TinyMiku = TinyMiku; -- cgit v1.2.3