[comment] Re-do comment form to make less intimidating

3 files changed, 40 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 {