jennex

commit 558f4b1d9acc439f6b4c200b4574fd426b2c8c27 (patch)
parent abe58a545392fa06b054ec12789ecd183c477bc7
Author: Alex Karle <alex@alexkarle.com>
Date:   Mon, 14 Nov 2022 20:57:28 -0500

rsvp: Change the styling of the guests form

Grouping each guest in their own <fieldset> instead of the questions
looks more natural with the Name: input!

Diffstat:
M
src/handler.scm
 | 
48
++++++++++++++++++++++++------------------------
M
style.css
 | 
8
++++++++

2 files changed, 32 insertions(+), 24 deletions(-)
diff --git a/src/handler.scm b/src/handler.scm
@@ -68,30 +68,29 @@
     `(name ,(conc (number->string (guest-id g)) "__" key)))
   (define (get-attrs key val)
     `(,(input-name key)
-      (value ,val)
-      (type "radio")
-      (required "true")
-      ,@(let ((getter (alist-ref key key-to-getter equal?)))
-          (if (and getter (equal? (getter g) val))
-	      '((checked))
-	      '()))))
+       (value ,val)
+       (type "radio")
+       (required "true")
+       ,@(let ((getter (alist-ref key key-to-getter equal?)))
+           (if (and getter (equal? (getter g) val))
+             '((checked))
+             '()))))
   ;; TODO: add notes section for allergies, etc
   `((div (@ (class "guest"))
-	 (h4 ,(guest-name g))
-         (label "Name: "
-                (input (@ ,(input-name "name") (required "true") (value ,(guest-name g)))))
-	 (fieldset
-	  (legend "Will You be Attending?")
-	  (label (input (@ ,@(get-attrs "going" 1))) "Yes!")
-	  (br)
-	  (label (input (@ ,@(get-attrs "going" 0))) "No :("))
-	 (fieldset
-	  (legend "Meal Choice")
-	  (label (input (@ ,@(get-attrs "meal-choice" "chicken"))) "Chicken")
-	  (br)
-	  (label (input (@ ,@(get-attrs "meal-choice" "beef"))) "Beef")
-	  (br)
-	  (label (input (@ ,@(get-attrs "meal-choice" "vegetarian"))) "Vegetarian")))))
+         (fieldset
+           (legend ,(guest-name g))
+           (label (strong "Name: ")
+                  (input (@ ,(input-name "name") (required "true") (value ,(guest-name g)))))
+           (p (strong "Will You be Attending?"))
+           (label (input (@ ,@(get-attrs "going" 1))) "Yes!")
+           (br)
+           (label (input (@ ,@(get-attrs "going" 0))) "No :(")
+           (p (strong "Meal Choice:"))
+           (label (input (@ ,@(get-attrs "meal-choice" "chicken"))) "Chicken")
+           (br)
+           (label (input (@ ,@(get-attrs "meal-choice" "beef"))) "Beef")
+           (br)
+           (label (input (@ ,@(get-attrs "meal-choice" "vegetarian"))) "Vegetarian")))))
 
 (define (route-get-rsvp c)
   (call/cc
@@ -122,8 +121,9 @@
                        "select whether you'll make it and your choice of meal.")
                     (form (@ (action "/rsvp") (method "POST"))
                           ,@(map guest-to-form (party-guests party))
-                          (h4 "Additional Information")
-                          (label (@ (for "notes")) "Anything else we should know? (Allergies, kids, ...)")
+                          (h3 "Additional Information")
+                          (label (@ (for "notes"))
+                                 "Anything else we should know? (Allergies, kids, ...)")
                           (textarea (@ (class "party-notes")
                                        (name ,(conc (party-id party) "__notes"))
                                        (rows 10))
diff --git a/style.css b/style.css
@@ -98,3 +98,11 @@ button.party-update {
   border-radius: 8px;
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
 }
+
+div.guest fieldset legend {
+  font-size: 1.4em;
+}
+
+div.guest fieldset {
+  margin-bottom: 16px;
+}