From b0920162fa2652c9eb17599415d4538406b320c4 Mon Sep 17 00:00:00 2001 From: grgr Date: Mon, 16 May 2022 21:03:09 +0200 Subject: [PATCH] messed up flexbox --- index.html | 13 ++++++++----- script.js | 6 +++++- style.css | 26 +++++++++++++++++--------- 3 files changed, 30 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 3a8f6a6..18f2630 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,15 @@ -

The Parliament

+

The Jingle-board Parliament

-
-
- -
name
+
+

+
+
+ +
name
+
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; }