Updating styling of RSVP page to work better with multiple members and in general be more legible

client/rsvp.html

@@ -7,15 +7,18 @@
         <h1 class="title fontXL textCenter backgroundLightGreen colorWhite">Collin and Lucy's Wedding</h1>
         <div class="contents fontM">
             <form id="rsvps" action="/api/rsvps" method="post">
-                <p>
-                    Attending:
+                <div>
+                    <span>Attending:</span>
+                    <div class="fill-right">
                         <label for="attending-yes">Yes</label>
                         <input type="radio" id="attending-yes" name="attending" value="true" required/>
                         <label for="attending-no">No</label>
                         <input type="radio" id="attending-no" name="attending" value="false" required/>
-                </p>
-                <p>
+                    </div>
+                </div>
+                <div>
                     <label for="party-size">Party Size:</label>
+                    <div class="fill-right">
                         <select name="party-size" name="party-size" id="party-size" >
                             <option value="1">1</option>
                             <option value="2">2</option>
@@ -23,10 +26,12 @@
                             <option value="4">4</option>
                             <option value="5">5</option>
                         </select>
-                </p>
+                    </div>
+                </div>
                 <div class="members">
                 </div>
-                <button>RSVP</button>
+                <br style="margin-top:10px"/>
+                <button class="backgroundLightGreen colorWhite">RSVP</button>
             </form>
         </div>
         <script src="/rsvp.js"></script>

client/rsvp.js

@@ -4,9 +4,7 @@ function createNewMember(id) {
   const memberDiv = document.createElement("div");
   memberDiv.classList.add("member");
 
-  const innerDiv = document.createElement("div");
-
-  const nameP = document.createElement("p");
+  const nameDiv = document.createElement("div");
 
   const nameLabel = document.createElement("label");
   nameLabel.htmlFor = `name-${id}`;
@@ -17,11 +15,12 @@ function createNewMember(id) {
   nameInput.id = `name-${id}`;
   nameInput.name = `name-${id}`;
   nameInput.required = true;
+  nameInput.style = "width:0;flex:1;";
 
-  nameP.appendChild(nameLabel);
-  nameP.appendChild(nameInput);
+  nameDiv.appendChild(nameLabel);
+  nameDiv.appendChild(nameInput);
 
-  const childP = document.createElement("p");
+  const childDiv = document.createElement("div");
 
   const childLabel = document.createElement("label");
   childLabel.htmlFor = `child-${id}`;
@@ -31,14 +30,17 @@ function createNewMember(id) {
   childInput.type = "checkbox";
   childInput.id = `child-${id}`;
   childInput.name = `child-${id}`;
+  childInput.style = 'font-size: 1rem';
 
-  childP.appendChild(childLabel);
-  childP.appendChild(childInput);
+  const childInputDiv = document.createElement("div");
+  childInputDiv.classList.add("fill-right");
 
-  innerDiv.appendChild(nameP);
-  innerDiv.appendChild(childP);
+  childInputDiv.appendChild(childInput);
 
-  const dietP = document.createElement("p");
+  childDiv.appendChild(childLabel);
+  childDiv.appendChild(childInputDiv);
+
+  const dietDiv = document.createElement("p");
 
   const dietLabel = document.createElement("label");
   dietLabel.htmlFor = `diet-${id}`;
@@ -48,11 +50,16 @@ function createNewMember(id) {
   dietInput.id = `diet-${id}`;
   dietInput.name = `dietaryPreferences-${id}`;
 
-  dietP.appendChild(dietLabel);
-  dietP.appendChild(dietInput);
+  dietDiv.appendChild(dietLabel);
+  dietDiv.appendChild(dietInput);
 
-  memberDiv.appendChild(innerDiv);
-  memberDiv.appendChild(dietP);
+  const separatorDiv = document.createElement("div");
+  separatorDiv.classList.add("separator");
+
+  memberDiv.appendChild(separatorDiv);
+  memberDiv.appendChild(nameDiv);
+  memberDiv.appendChild(childDiv)
+  memberDiv.appendChild(dietDiv);
 
   document.querySelector("div.members").appendChild(memberDiv);
 }

client/style.css

@@ -27,6 +27,44 @@ body {
     box-sizing: border-box;
 }
 
+select {
+    background-color: transparent;
+    border: none;
+    font-family: inherit;
+    font-size: inherit;
+    cursor: pointer;
+    line-height: inherit;
+}
+
+input {
+    font-family: inherit;
+    font-size: inherit;
+    background-color: transparent;
+    border: 1px solid grey;
+}
+
+input[type='radio'] {
+    margin: 5px;
+}
+
+input[type='radio'] + label {
+    margin-left: 10px;
+}
+
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+}
+
+button {
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+    background-color: inherit;
+    border: none;
+    cursor: pointer;
+}
+
 /* #region reusable */
 .hidden {
     visibility: hidden;
@@ -166,12 +204,22 @@ form#rsvps {
     flex-direction: column;
 }
 
-form#rsvps div#members {
+form#rsvps div {
+    display: flex;
+    flex-direction: row;
+}
+
+form#rsvps *.fill-right {
+    flex: 1;
+    justify-content: flex-end;
+}
+
+form#rsvps div.members {
     display: flex;
     flex-direction: column;
 }
 
-form#rsvps div.members {
+form#rsvps div.members div.member {
     display: flex;
     flex-direction: column;
 }
@@ -181,4 +229,10 @@ form#rsvps div.members div.member div {
     flex-direction: row;
 }
 
+form#rsvps div.members div.member div.separator {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    border-top: 1px solid #8cad87;
+}
+
 /* #endregion */