From b558db752e435cd1ae6512336d6583ce03c8ea40 Mon Sep 17 00:00:00 2001 From: "Jakob L. Kreuze" Date: Mon, 28 Aug 2023 19:26:29 -0400 Subject: [comment] Re-do comment form to make less intimidating --- haunt/jakob/builder/blog.scm | 7 +-- haunt/jakob/dynamic/capabilities/comment-form.scm | 33 ++++++-------- haunt/static/css/style.css | 52 ++++++++++------------- org/pages/changelog.org | 4 ++ 4 files changed, 44 insertions(+), 52 deletions(-) diff --git a/haunt/jakob/builder/blog.scm b/haunt/jakob/builder/blog.scm index c20eccc..0df5f50 100644 --- a/haunt/jakob/builder/blog.scm +++ b/haunt/jakob/builder/blog.scm @@ -86,9 +86,10 @@ (method "post")) (label "Or, if you've written about this " ,(hyperlink "https://indieweb.org/responses" "elsewhere") - ", you can send me a Webmention") - (input (@ (name "source") (type "url"))) - (input (@ (value "Send") (type "submit")))) + ", you can send me a Webmention:") + (div (@ (id "webmention-input-group")) + (input (@ (name "source") (type "url") (placeholder "https://..."))) + (input (@ (value "Send") (type "submit"))))) ,(script "section-folds.js") ,(script "comment-reaction.js"))))) diff --git a/haunt/jakob/dynamic/capabilities/comment-form.scm b/haunt/jakob/dynamic/capabilities/comment-form.scm index 9e6e81c..f7d0491 100644 --- a/haunt/jakob/dynamic/capabilities/comment-form.scm +++ b/haunt/jakob/dynamic/capabilities/comment-form.scm @@ -33,23 +33,20 @@ render-dynamic-comment-form get-comment-form)) -(define (render-commenter-info-field) - `(fieldset (@ (id "commenter-info")) - (legend "Commenter Info") - (label (@ (for "name")) "Name:") - (input (@ (type "text") (id "name") (name "name") (required #t) (size 24))) - (label (@ (for "email")) "Email (optional, used for Gravatar):") - (input (@ (type "text") (id "email") (name "email") (size 24))) - (label (@ (for "url")) "Webpage URL (optional):") - (input (@ (type "text") (id "url") (name "url") (size 24))))) - -(define (render-comment-content-field) +(define (render-comment-field) `(fieldset (@ (id "comment-content")) (legend "Comment") - (label (@ (for "subject")) "Subject (optional):") - (input (@ (type "text") (id "subject") (name "subject") (size 24))) - (label (@ (for "comment")) "Comment :") - (textarea (@ (id "coment") (name "comment") (rows 4) (cols 50))))) + (label (@ (for "name") (class "required")) "Name:") + (input (@ (type "text") (id "name") (name "name") (required #t))) + (label (@ (for "email")) "Email:") + (input (@ (type "text") (id "email") (name "email"))) + (label (@ (for "url")) "Webpage URL:") + (input (@ (type "text") (id "url") (name "url"))) + (label (@ (for "subject")) "Subject:") + (input (@ (type "text") (id "subject") (name "subject"))) + (label (@ (for "comment") (class "required")) "Comment :") + (textarea (@ (id "coment") (name "comment"))) + (p "(*) Indicates a required field."))) (define* (render-comment-captcha-field #:optional (captcha-id "") captcha-image #:key hidden) @@ -79,8 +76,7 @@ (h1 "Comment form") (form (@ (id "comment-input") (action "/api/comment") (method "post")) (input (@ (type "text") (name "slug") (hidden #t) (value ,slug))) - ,(render-commenter-info-field) - ,(render-comment-content-field) + ,(render-comment-field) ,(render-comment-captcha-field captcha-id captcha-image)) ,(script "proof-of-work.js"))) @@ -99,8 +95,7 @@ (id "reply-to") (hidden #t) (value ""))) - ,(render-commenter-info-field) - ,(render-comment-content-field) + ,(render-comment-field) (fieldset (@ (id "captcha-trigger-block")) (legend "Captcha") (label "You need to complete a captcha to write a comment.") diff --git a/haunt/static/css/style.css b/haunt/static/css/style.css index 0890fd0..1210f6c 100644 --- a/haunt/static/css/style.css +++ b/haunt/static/css/style.css @@ -163,11 +163,20 @@ figure > figcaption { /* Comments & Webmention. */ +textarea { + width: 100%; + height: 4rem; +} + +textarea, input[type=text], input[type=url] { + border: 1px solid #ccc; + box-shadow: inset 0 1px 1px rgba(0,0,0,.075); +} + #webmention p .author-name { margin: 4px; } - #webmention { border-top: 2px solid #d2d6dd; } @@ -256,45 +265,28 @@ form#webmention-form { padding-top: 1rem; } -form#webmention-form input { - margin-top: 1rem; -} - -form#webmention-form input[type=url] { - display: block; - width: 90%; - margin: auto; +#webmention-input-group { margin-top: 1rem; + display: grid; + grid-template-columns: 9fr 1fr; } /* Comment form. */ -#comment-form #commenter-info label, -#comment-form #comment-content label { - display: block; - width: 20em; - float: left; - clear: left; -} - -#comment-form #captcha-trigger-block label { - display: block; -} - -#comment-form label, -#comment-form input, -#comment-form button { - margin-top: 1em; +.required:after { + content:" *"; + color: red; } -#comment-form #commenter-info input, -#comment-form #comment-content input { - width: 20em; - float: left; +fieldset#comment-content { + display: grid; + grid-template-columns: 1fr 2fr; + grid-gap:5px; } -#comment-form #comment-captcha input { +#comment-form #captcha-trigger-block label { display: block; + margin-bottom: 16px; } #comment-form img { diff --git a/org/pages/changelog.org b/org/pages/changelog.org index d109eb8..e874a67 100644 --- a/org/pages/changelog.org +++ b/org/pages/changelog.org @@ -2,6 +2,10 @@ A record of any notable user-facing changes made to this website. For more detail, refer to the log of the [[https://git.sr.ht/~jakob/blog][Git repository]]. +** Monday, August 28, 2023 + +- Updated comment UI. + ** Sunday, August 27, 2023 - Fixed bug with comment reaction system where pressing the "react" button multiple times would lead to multiple selector widgets being created. -- cgit v1.3