diff --git a/client/rsvp.html b/client/rsvp.html
index 3aa8896..df6d2e0 100644
--- a/client/rsvp.html
+++ b/client/rsvp.html
@@ -7,26 +7,31 @@
diff --git a/client/rsvp.js b/client/rsvp.js
index d66f6d0..711fb87 100644
--- a/client/rsvp.js
+++ b/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);
}
diff --git a/client/style.css b/client/style.css
index b4403d0..6049385 100644
--- a/client/style.css
+++ b/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 */
\ No newline at end of file