Change candidates from list to tile view

_layouts/default.html

@@ -14,6 +14,7 @@
 
     {% include footer.html %}
     <script src="{{site.baseurl}}/assets/js/bundle.js" charset="utf-8"></script>
+    <script src="{{site.baseurl}}/assets/js/shuffle_candidates.js" charset="utf-8"></script>
   </body>
 
 </html>

_layouts/office_election.html

@@ -16,7 +16,7 @@
   <header class="office-election__header">
     <h2>{{ office_election.title }}</h2>
   </header>
-  <main>
+  <main class="office-election__container">
     {% for candidate_id in office_election.candidates %}
       {% assign candidate = ballot_candidates | where: "slug", candidate_id | first %}
       {% assign finance = site.data.candidates[locality.slug][election_day][candidate.slug] %}

_sass/module/_office-election.scss

@@ -1,3 +1,9 @@
+.office-election__container {
+  display: none; 
+  grid-template-columns: repeat(auto-fill, 250px);
+  grid-gap: 0 30px;
+}
+
 .office-election__header {
   border-bottom: 2px $color-gold solid;
 }

assets/js/shuffle_candidates.js

@@ -0,0 +1,34 @@
+// Makes use of Fisher-Yates algorithm
+// Found in: https://stackoverflow.com/a/2450976/1293256
+var shuffle = function (array) {
+	var currentIndex = array.length;
+	var temporaryValue, randomIndex;
+
+	// While there remain elements to shuffle...
+	while (0 !== currentIndex) {
+		// Pick a remaining element...
+		randomIndex = Math.floor(Math.random() * currentIndex);
+		currentIndex -= 1;
+
+		// And swap it with the current element.
+		temporaryValue = array[currentIndex];
+		array[currentIndex] = array[randomIndex];
+		array[randomIndex] = temporaryValue;
+	}
+
+	return array;
+};
+
+let container = document.querySelector(".office-election__container")
+let candidates = document.getElementsByClassName("office-election__candidate");
+let shuffled = shuffle([...candidates]);
+
+// Need an independent counter to call code after all items appended
+let items = 0;
+shuffled.forEach((c) => {
+	items++;
+	container.appendChild(c)
+	if (items === shuffled.length) {
+		container.style.display = 'grid';
+	}
+});