grgr
/
the-parliament
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

messed up flexbox

Browse Source
master
grgr 3 years ago
parent 3146ec57fa
commit b0920162fa
3 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File

5
index.html
Unescape Escape View File

@ -9,15 +9,18 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<h1>The Parliament</h1> <h1>The Jingle-board Parliament</h1>
<div class="hemicycle"> <div class="hemicycle">
<div class="party"id="partyRef"> <div class="party"id="partyRef">
<h4 id="partyName"></h4>
<div class="seats">
<div class="seat" id="seatRef"> <div class="seat" id="seatRef">
<button class="mic">Loading...</button> <button class="mic">Loading...</button>
<div class="label">name</div> <div class="label">name</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html>l </html>l

6
script.js
Unescape Escape View File

@ -5,6 +5,7 @@ let hemicycle = document.getElementsByClassName("hemicycle")[0]
let row = 5 let row = 5
fetch("https://hub.xpub.nl/soupboat/the-parliament/") fetch("https://hub.xpub.nl/soupboat/the-parliament/")
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
@ -15,7 +16,10 @@ fetch("https://hub.xpub.nl/soupboat/the-parliament/")
function populateSeats(parliament) { function populateSeats(parliament) {
for (const group of Object.keys(parliament)){ //gets the parent's keys for (const group of Object.keys(parliament)){ //gets the parent's keys
let party = partyRef.cloneNode(true); let party = partyRef.cloneNode(true);
party.id = group let partyName = party.querySelector("h4")
party.id = group;
partyName.innerHTML = group;
for (representative of parliament[group]){ for (representative of parliament[group]){
let seat = seatRef.cloneNode(true); let seat = seatRef.cloneNode(true);
seat.querySelector(".label").innerHTML = representative.who; seat.querySelector(".label").innerHTML = representative.who;

26
style.css
Unescape Escape View File

@ -15,8 +15,10 @@ body, html{
.hemicycle{ .hemicycle{
display: flex; display: flex;
flex-wrap: wrap; flex-flow: column wrap;
width: 100vw; align-content: stretch;
justify-content: right;
/* width: 100vw; */
margin: 0 auto; margin: 0 auto;
} }
h1{ h1{
@ -29,20 +31,25 @@ h1{
display: none; display: none;
} }
.party{ .party{
border: solid 1px black; /* border: solid 1px black; */
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
align-content: flex-start; align-content: flex-start;
width: 20vw; justify-content: center;
margin: 8px 0;
}
h4{
width: 160px;
} }
.seat{
.seats{
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-content: center; align-content: center;
margin: 4px 1px; margin: 4px 4px;
width: 100px;
} }
.seat .mic{ .seat .mic{
@ -54,5 +61,6 @@ h1{
color: currentColor; color: currentColor;
} }
.label{ .label{
width: 80px; width: 90px;
overflow-wrap: break-word;
} }

Write Preview
Loading…
Cancel
Save