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 @@

Collin and Lucy's Wedding

-

- Attending: - - - - -

-

+

+ Attending: +
+ + + + +
+
+
- -

+
+ +
+
- +
+
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