-
diff --git a/script.js b/script.js
index c432ab5..f89fa6d 100644
--- a/script.js
+++ b/script.js
@@ -5,6 +5,7 @@ let hemicycle = document.getElementsByClassName("hemicycle")[0]
let row = 5
+
fetch("https://hub.xpub.nl/soupboat/the-parliament/")
.then((response) => response.json())
.then((data) => {
@@ -15,7 +16,10 @@ fetch("https://hub.xpub.nl/soupboat/the-parliament/")
function populateSeats(parliament) {
for (const group of Object.keys(parliament)){ //gets the parent's keys
let party = partyRef.cloneNode(true);
- party.id = group
+ let partyName = party.querySelector("h4")
+ party.id = group;
+
+ partyName.innerHTML = group;
for (representative of parliament[group]){
let seat = seatRef.cloneNode(true);
seat.querySelector(".label").innerHTML = representative.who;
diff --git a/style.css b/style.css
index 43e8011..bc10fee 100644
--- a/style.css
+++ b/style.css
@@ -15,8 +15,10 @@ body, html{
.hemicycle{
display: flex;
- flex-wrap: wrap;
- width: 100vw;
+ flex-flow: column wrap;
+ align-content: stretch;
+ justify-content: right;
+ /* width: 100vw; */
margin: 0 auto;
}
h1{
@@ -29,20 +31,25 @@ h1{
display: none;
}
.party{
- border: solid 1px black;
+ /* border: solid 1px black; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: flex-start;
- width: 20vw;
+ justify-content: center;
+ margin: 8px 0;
+}
+
+h4{
+ width: 160px;
}
-.seat{
+
+.seats{
display: flex;
- flex-direction: column;
+ flex-direction: row;
align-content: center;
- margin: 4px 1px;
- width: 100px;
+ margin: 4px 4px;
}
.seat .mic{
@@ -54,5 +61,6 @@ h1{
color: currentColor;
}
.label{
- width: 80px;
+ width: 90px;
+ overflow-wrap: break-word;
}