initial second-pass at a selection flexbox

TrustTheVote-Project · Mar 5, 2024 · ca89170 · ca89170
1 parent e1f837d
commit ca89170
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git 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
@@ -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);
                     }
                 }
             }