diff --git a/stylesheets/voting.css b/stylesheets/voting.css
index 30e76e9..4b2c67d 100644
--- a/stylesheets/voting.css
+++ b/stylesheets/voting.css
@@ -93,19 +93,10 @@
/* 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 */
+.tableStyle {
+ width: 100%;
+ padding: 0;
+ margin: 0;
}
-
diff --git a/voting.html b/voting.html
index d643831..0784e8f 100644
--- a/voting.html
+++ b/voting.html
@@ -200,7 +200,7 @@
` + innerStr + `
Your RCV selection:
-`;
+ `;
newItem.innerHTML = innerText;
}
const newList = document.createElement("ul");
@@ -513,6 +513,16 @@ Your RCV selection:
bottomElement.appendChild(newList);
}
+ // Helper function for pretty printing selections
+ function smartenSelections(selections, tally) {
+ const arr = [...selections];
+ if (tally == "plurality") {
+ return arr.map((str) => str.replace(/^\d+:\s+/, ""));
+ } else {
+ return arr.map((str) => str.replace(/^\d+/, (match) => parseInt(match, 10) + 1));
+ }
+ }
+
// Setup the checkout page
// Called from newButton event listener, which means that the 'previous'
// page contents are still being displayed
@@ -538,17 +548,15 @@ Your RCV selection:
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");
+ // just ake a table for now
+ newItem.classList.add("tableflexContainer");
+ // td's
+ const box1 = document.createElement("td");
+ box1.style.textAlign = "center";
+ const box2 = document.createElement("td");
+ box2.style.textAlign = "left";
+ const box3 = document.createElement("td");
+ box3.style.textAlign = "right";
const contestName = Object.keys(contest)[0];
const selections = Object.values(contest)[0].selection;
index += 1;
@@ -558,7 +566,7 @@ Your RCV selection:
box2.innerHTML = "no selection - skipped";
box2.classList.add("novotedText");
} else {
- box2.innerHTML = selections.join("
");
+ box2.innerHTML = smartenSelections(selections, Object.values(contest)[0].tally).join("
");
}
// Create the goto button
const gotoButton = document.createElement("button");
@@ -576,11 +584,20 @@ Your RCV selection:
setupNewContest(buttonIdString);
});
box3.appendChild(gotoButton);
- // add the above to lowerSection.choiceList
- leftSide.appendChild(box1);
- leftSide.appendChild(box2);
- newItem.appendChild(leftSide);
- newItem.appendChild(box3);
+ // Create the table and add it
+ const table1 = document.createElement("table");
+ table1.classList.add("tableStyle");
+ const table2 = document.createElement("table");
+ table2.classList.add("tableStyle");
+ const row1 = document.createElement("tr");
+ const row2 = document.createElement("tr");
+ row1.appendChild(box1);
+ row2.appendChild(box2);
+ row2.appendChild(box3);
+ table1.appendChild(row1);
+ table2.appendChild(row2);
+ newItem.appendChild(table1);
+ newItem.appendChild(table2);
rootElement.appendChild(newItem);
}
}