From ca89170494e1c3931ac13099257b76030cc778c6 Mon Sep 17 00:00:00 2001
From: Sandy Currier <windoverwater@users.noreply.github.com>
Date: Tue, 5 Mar 2024 00:34:54 -0500
Subject: [PATCH] initial second-pass at a selection flexbox

---
 stylesheets/voting.css | 26 ++++++++++++++++++++++++++
 voting.html            | 28 ++++++++++++++++++++++++----
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/stylesheets/voting.css b/stylesheets/voting.css
index be277ab..22322ec 100644
--- a/stylesheets/voting.css
+++ b/stylesheets/voting.css
@@ -13,6 +13,14 @@
     text-align: center;
 }
 
+/* colors for completely voted and undervoted and novoted */
+.novoted {
+}
+.undervoted {
+}
+.voted {
+}
+
 /* Each section (class) gets an individual black border */
 .progSection {
     flex: 1; /* Equal distribution of space */
@@ -67,4 +75,22 @@
     list-style-type: none;
 }
 
+/* flexbox for the checkout page selection box */
+.selectionFlexContainer {
+    display: flex;
+    justify-content: space-between; /* items will be spaced evenly */
+    align-items: center; /* vertically cnter items */
+}
+.leftItem {
+    margin: 0 5px;
+    padding: 0 5px;
+}
+.leftItems {
+    display: flex;
+    flex-direction: column;
+}
+.rightItems {
+    margin-left: auto; /* Push this item to the right */
+}
+
 </style>
diff --git a/voting.html b/voting.html
index e116de9..61120e5 100644
--- a/voting.html
+++ b/voting.html
@@ -510,12 +510,28 @@ <h2>Your RCV selection:</h2>
                 if (blankBallot.contests[ggo]) {
                     for (const contest of blankBallot.contests[ggo]) {
                         const newItem = document.createElement("li");
+                        // a flexbox container
+                        newItem.classList.add("selectionFlexContainer");
+                        // flexboxes
+                        const leftSide = document.createElement("div");
+                        leftSide.classList.add("leftItems");
+                        const box1 = document.createElement("div");
+                        box1.classList.add("leftItem");
+                        const box2 = document.createElement("div");
+                        box2.classList.add("leftItem");
+                        const box3 = document.createElement("div");
+                        box3.classList.add("rightItems");
                         const contestName = Object.keys(contest)[0];
                         const selections = Object.values(contest)[0].selection;
                         index += 1;
-                        console.log("contest " + index + ", selection = " + selections);
-                        newItem.innerHTML = "Contest " + index + ":&nbsp&nbsp" + contestName;
-                        newItem.innerHTML += "<br><br>" + selections.join("&nbsp<br>");
+                        console.log("contest " + index + " (" + contestName + "), selection = " + selections);
+                        box1.innerHTML = "Contest " + index + ":&nbsp&nbsp" + contestName;
+                        if (selections.length == 0) {
+                            box2.innerHTML = "no selection - skipped";
+                            box2.classList.add("novoted");
+                        } else {
+                            box2.innerHTML = selections.join("<br>");
+                        }
                         // Create the goto button
                         const gotoButton = document.createElement("button");
                         gotoButton.innerText = "Edit Contest " + index;
@@ -531,9 +547,13 @@ <h2>Your RCV selection:</h2>
                             const buttonIdString = Number(this.id.match(/\d+$/)) - 1;
                             setupNewContest(buttonIdString);
                         });
+                        box3.appendChild(gotoButton);
                         // add the above to lowerSection.choiceList
+                        leftSide.appendChild(box1);
+                        leftSide.appendChild(box2);
+                        newItem.appendChild(leftSide);
+                        newItem.appendChild(box3);
                         rootElement.appendChild(newItem);
-                        rootElement.appendChild(gotoButton);
                     }
                 }
             }