diff --git a/public/src/toggle.js b/public/src/toggle.js
new file mode 100644
index 0000000..5289c14
--- /dev/null
+++ b/public/src/toggle.js
@@ -0,0 +1,3 @@
+export async function initToggle() {
+ document.getElementById
+}
\ No newline at end of file
From 79a7d8e06a749dfbdb7a8f2d7cd582fd41bb78d7 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 17:27:44 +0000
Subject: [PATCH 02/23] Commit
---
public/index.html | 3 ---
1 file changed, 3 deletions(-)
diff --git a/public/index.html b/public/index.html
index c5300ec..6cf4dbd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -31,8 +31,6 @@
-<<<<<<< Updated upstream
-=======
->>>>>>> Stashed changes
From e479d449fa6703cc57131a00a04893c0f2ddfc9d Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 17:37:01 +0000
Subject: [PATCH 03/23] commit
---
public/index.html | 2 +-
public/src/toggle.js | 8 +++++++-
2 files changed, 8 insertions(+), 2 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6cf4dbd..7680b55 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,7 +37,7 @@
-
Predictions
+
Actual
diff --git a/public/src/toggle.js b/public/src/toggle.js
index 5289c14..ce73ffe 100644
--- a/public/src/toggle.js
+++ b/public/src/toggle.js
@@ -1,3 +1,9 @@
export async function initToggle() {
- document.getElementById
+
+ document.getElementById('checkbox').addEventListener('click', function() {
+ document.getElementById('Prediction-Label').innerHTML = 'Predicted';
+
+ })
+
+
}
\ No newline at end of file
From ff92e5c7d48c7f8e0bc77ea84ae476375cb4c97d Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 18:09:39 +0000
Subject: [PATCH 04/23] commit
---
public/src/main.js | 2 ++
public/src/toggle.js | 9 +++++++--
2 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/public/src/main.js b/public/src/main.js
index 5011d01..c472e25 100644
--- a/public/src/main.js
+++ b/public/src/main.js
@@ -4,6 +4,7 @@ import { initGraph } from './graph.js';
import { initSearch, initSort } from './list.js';
import { initMap } from './map.js';
import { getOptions, newYear } from './requests.js';
+import { initToggle } from './toggle';
// Leave this blank, value injected during build (see contributing guidelines)
const MAPBOX_KEY = '';
@@ -16,6 +17,7 @@ function initPage() {
initSearch();
initGraph();
initCandidate();
+ initToggle();
}
document.addEventListener('DOMContentLoaded', initPage);
diff --git a/public/src/toggle.js b/public/src/toggle.js
index ce73ffe..195fec3 100644
--- a/public/src/toggle.js
+++ b/public/src/toggle.js
@@ -1,8 +1,13 @@
export async function initToggle() {
document.getElementById('checkbox').addEventListener('click', function() {
- document.getElementById('Prediction-Label').innerHTML = 'Predicted';
-
+ let reults;
+ const lab = document.getElementById('Prediction-Label');
+ if (lab === "Actual") {
+ document.getElementById('Prediction-Label').innerHTML = "Predicted";
+ } else {
+ document.getElementById('Prediction-Label').innerHTML = "Actual"
+ };
})
From 1dc1359f0657f2b380b60d913284fef0d19752f9 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 18:32:15 +0000
Subject: [PATCH 05/23] Created Checkbox
---
public/index.html | 9 ++++-----
public/src/toggle.js | 11 ++++-------
2 files changed, 8 insertions(+), 12 deletions(-)
diff --git a/public/index.html b/public/index.html
index 3b2465d..cd5ccf4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,6 +11,7 @@
+
@@ -33,14 +34,12 @@
+
diff --git a/public/src/toggle.js b/public/src/toggle.js
index 195fec3..ae519dc 100644
--- a/public/src/toggle.js
+++ b/public/src/toggle.js
@@ -1,14 +1,11 @@
export async function initToggle() {
- document.getElementById('checkbox').addEventListener('click', function() {
- let reults;
- const lab = document.getElementById('Prediction-Label');
- if (lab === "Actual") {
- document.getElementById('Prediction-Label').innerHTML = "Predicted";
+ document.getElementById('check-box').addEventListener('change', function() {
+ if (!this.checked) {
+ document.getElementById('predictionLabel').innerHTML = "Predicted";
} else {
- document.getElementById('Prediction-Label').innerHTML = "Actual"
+ document.getElementById('predictionLabel').innerHTML = "Actual"
};
})
-
}
\ No newline at end of file
From 7bab6ffcaca416daa1128ae9a40764e34be325f7 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 18:32:26 +0000
Subject: [PATCH 06/23] Delete toggle.css
---
public/css/toggle.css | 66 -------------------------------------------
1 file changed, 66 deletions(-)
delete mode 100644 public/css/toggle.css
diff --git a/public/css/toggle.css b/public/css/toggle.css
deleted file mode 100644
index e1ac031..0000000
--- a/public/css/toggle.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.toggle {
- display: block;
-}
-
-/* The switch - the box around the slider */
-.switch {
- position: relative;
- display: inline-block;
- width: 60px;
- height: 34px;
-}
-
-/* Hide default HTML checkbox */
-.switch input {
- opacity: 0;
- width: 0;
- height: 0;
-}
-
-/* The slider */
-.slider {
- position: absolute;
- cursor: pointer;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #ccc;
- -webkit-transition: .4s;
- transition: .4s;
-}
-
-.slider:before {
- position: absolute;
- content: "";
- height: 26px;
- width: 26px;
- left: 4px;
- bottom: 4px;
- background-color: white;
- -webkit-transition: .4s;
- transition: .4s;
-}
-
-input:checked + .slider {
- background-color: #2196F3;
-}
-
-input:focus + .slider {
- box-shadow: 0 0 1px #2196F3;
-}
-
-input:checked + .slider:before {
- -webkit-transform: translateX(26px);
- -ms-transform: translateX(26px);
- transform: translateX(26px);
-}
-
-/* Rounded sliders */
-.slider.round {
- border-radius: 34px;
-}
-
-.slider.round:before {
- border-radius: 50%;
-}
\ No newline at end of file
From 0f87526bc76ccad6e9753e7e01f8f60d434a5531 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 18:53:23 +0000
Subject: [PATCH 07/23] Update map.js
---
public/src/map.js | 15 ++++++++++++---
1 file changed, 12 insertions(+), 3 deletions(-)
diff --git a/public/src/map.js b/public/src/map.js
index 0e27f94..48354cb 100644
--- a/public/src/map.js
+++ b/public/src/map.js
@@ -1,6 +1,6 @@
/* global mapboxgl, MapboxGeocoder */ // Defined by Mapbox GL JS
-import { getData } from "./data";
+import { curSource, getData } from "./data";
import { updateList } from './list.js';
import { updateGraph } from "./graph";
@@ -194,7 +194,7 @@ export async function initMap(apiKey) {
});
}
-function updateColours() {
+function updateColours(boolean) {
// Do nothing if the layers don't exist yet
if (!mapbox.getLayer('constituency-fill')) return;
@@ -206,7 +206,16 @@ function updateColours() {
data.constituencies.forEach(c => {
// Find party colour of candidate with most votes in the constituency
// (candidates sorted by votes by default)
- const winner = data.candidates.filter(ca => ca.gss_code === c.gss_code)[0];
+ if (boolean == true) {
+ const winner = data.candidates.filter(ca => ca.gss_code === c.gss_code)[0];
+ return winner;
+ } else {
+ const winnerArray = data.candidates.filter(ca => ca.gss_code === c.gss_code);
+ const winnerSort = winnerArray.sort((a,b) => parseFloat(a.predictions[curSource]) - parseFloat(b.predictions[curSource]));
+ const winner = winnerSort[0];
+ return winner;
+ };
+
const colour = data.parties.find(p => p.party_ec_id === winner.party_ec_id).colour;
// Skip over parties with no colour
From ba7539d80fd33eb003b3dc98b27089187a77e47a Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 19:13:59 +0000
Subject: [PATCH 08/23] Update map.js
---
public/src/map.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/public/src/map.js b/public/src/map.js
index 48354cb..3f392de 100644
--- a/public/src/map.js
+++ b/public/src/map.js
@@ -206,7 +206,8 @@ function updateColours(boolean) {
data.constituencies.forEach(c => {
// Find party colour of candidate with most votes in the constituency
// (candidates sorted by votes by default)
- if (boolean == true) {
+ const winner = [];
+ if (boolean === true) {
const winner = data.candidates.filter(ca => ca.gss_code === c.gss_code)[0];
return winner;
} else {
From dc168ee854d5c9660e36536041a02eb76fb74b1c Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 19:47:47 +0000
Subject: [PATCH 09/23] nonb working commit
---
public/src/map.js | 11 +++++------
1 file changed, 5 insertions(+), 6 deletions(-)
diff --git a/public/src/map.js b/public/src/map.js
index 3f392de..19f5001 100644
--- a/public/src/map.js
+++ b/public/src/map.js
@@ -120,7 +120,7 @@ export async function initMap(apiKey) {
);
// Set layer styling after they exist
- updateColours();
+ updateColours(true);
mapbox.on('mousemove', 'constituency-fill', function (e) {
// Change the cursor style as a UI indicator.
@@ -207,14 +207,13 @@ function updateColours(boolean) {
// Find party colour of candidate with most votes in the constituency
// (candidates sorted by votes by default)
const winner = [];
+
if (boolean === true) {
- const winner = data.candidates.filter(ca => ca.gss_code === c.gss_code)[0];
- return winner;
+ winner.push(data.candidates.filter(ca => ca.gss_code === c.gss_code)[0]);
} else {
const winnerArray = data.candidates.filter(ca => ca.gss_code === c.gss_code);
const winnerSort = winnerArray.sort((a,b) => parseFloat(a.predictions[curSource]) - parseFloat(b.predictions[curSource]));
- const winner = winnerSort[0];
- return winner;
+ winner.push(winnerSort[0]);
};
const colour = data.parties.find(p => p.party_ec_id === winner.party_ec_id).colour;
@@ -247,5 +246,5 @@ function updateColours(boolean) {
}
export function updateMap() {
- updateColours();
+ updateColours(true);
}
\ No newline at end of file
From ac30ed46b5ff0d61eb8fc479ceffb5590e037437 Mon Sep 17 00:00:00 2001
From: Kyle Mckay <5459452+kymckay@users.noreply.github.com>
Date: Wed, 24 Mar 2021 19:47:17 +0000
Subject: [PATCH 10/23] Correct logical errors in colouring code
---
public/src/map.js | 18 ++++++++----------
1 file changed, 8 insertions(+), 10 deletions(-)
diff --git a/public/src/map.js b/public/src/map.js
index 19f5001..75a96af 100644
--- a/public/src/map.js
+++ b/public/src/map.js
@@ -194,7 +194,7 @@ export async function initMap(apiKey) {
});
}
-function updateColours(boolean) {
+function updateColours(useReal) {
// Do nothing if the layers don't exist yet
if (!mapbox.getLayer('constituency-fill')) return;
@@ -206,16 +206,14 @@ function updateColours(boolean) {
data.constituencies.forEach(c => {
// Find party colour of candidate with most votes in the constituency
// (candidates sorted by votes by default)
- const winner = [];
-
- if (boolean === true) {
- winner.push(data.candidates.filter(ca => ca.gss_code === c.gss_code)[0]);
+ let winner;
+ const cands = data.candidates.filter(ca => ca.gss_code === c.gss_code);
+ if (useReal) {
+ winner = cands[0];
} else {
- const winnerArray = data.candidates.filter(ca => ca.gss_code === c.gss_code);
- const winnerSort = winnerArray.sort((a,b) => parseFloat(a.predictions[curSource]) - parseFloat(b.predictions[curSource]));
- winner.push(winnerSort[0]);
- };
-
+ winner = cands.sort((a, b) => b.predictions[curSource] - a.predictions[curSource])[0];
+ }
+
const colour = data.parties.find(p => p.party_ec_id === winner.party_ec_id).colour;
// Skip over parties with no colour
From ff26e5f78310e7ba16dc1a7d975aad85372b1c49 Mon Sep 17 00:00:00 2001
From: Kyle Mckay <5459452+kymckay@users.noreply.github.com>
Date: Wed, 24 Mar 2021 19:52:33 +0000
Subject: [PATCH 11/23] Respect toggle state whenever colours change
Relevant because they may be changed from various places (year change,
source change, toggle change)
---
public/src/map.js | 5 ++++-
public/src/toggle.js | 23 +++++++++++++++--------
2 files changed, 19 insertions(+), 9 deletions(-)
diff --git a/public/src/map.js b/public/src/map.js
index 75a96af..f44ef54 100644
--- a/public/src/map.js
+++ b/public/src/map.js
@@ -3,6 +3,7 @@
import { curSource, getData } from "./data";
import { updateList } from './list.js';
import { updateGraph } from "./graph";
+import { state as toggleState } from "./toggle";
let mapbox;
@@ -194,10 +195,12 @@ export async function initMap(apiKey) {
});
}
-function updateColours(useReal) {
+function updateColours() {
// Do nothing if the layers don't exist yet
if (!mapbox.getLayer('constituency-fill')) return;
+ // Always respect the toggle state when coulouring map
+ const useReal = !toggleState;
const data = getData();
const colourMap = {};
diff --git a/public/src/toggle.js b/public/src/toggle.js
index ae519dc..4662f7e 100644
--- a/public/src/toggle.js
+++ b/public/src/toggle.js
@@ -1,11 +1,18 @@
+import { updateMap } from "./map";
+
+export let state;
+
export async function initToggle() {
-
- document.getElementById('check-box').addEventListener('change', function() {
- if (!this.checked) {
- document.getElementById('predictionLabel').innerHTML = "Predicted";
- } else {
- document.getElementById('predictionLabel').innerHTML = "Actual"
- };
- })
+ document.getElementById('check-box').addEventListener('change', function() {
+ state = this.checked;
+
+ if (this.checked) {
+ document.getElementById('predictionLabel').innerHTML = "Predicted";
+ } else {
+ document.getElementById('predictionLabel').innerHTML = "Actual"
+ }
+
+ updateMap();
+ })
}
\ No newline at end of file
From 09363dcbd0a39a622cd828834538b189ab9938a8 Mon Sep 17 00:00:00 2001
From: Kyle Mckay <5459452+kymckay@users.noreply.github.com>
Date: Wed, 24 Mar 2021 19:57:51 +0000
Subject: [PATCH 12/23] Update map colouring when source changes
---
public/src/dropdowns.js | 8 +++++++-
public/src/graph.js | 10 ++++------
2 files changed, 11 insertions(+), 7 deletions(-)
diff --git a/public/src/dropdowns.js b/public/src/dropdowns.js
index 8572963..11b8026 100644
--- a/public/src/dropdowns.js
+++ b/public/src/dropdowns.js
@@ -1,5 +1,7 @@
import { updatePredictions } from './graph.js';
+import { updateMap } from './map.js';
import { newYear } from './requests.js';
+import { setSource } from './data.js';
// Populates a dropdown (identified by ID in HTML) with array of values
async function populateDropdown(id, options, index = false) {
@@ -29,5 +31,9 @@ export async function initDropdowns() {
document.getElementById("dropdown-year").addEventListener("change", e => newYear(e.target.value));
// Handle updates on source change
- document.getElementById("dropdown-data").addEventListener("change", e => updatePredictions(e.target.value))
+ document.getElementById("dropdown-data").addEventListener("change", e => {
+ setSource(e.target.value); // Source should be respected by other events
+ updatePredictions(); // Graph predictions will change
+ updateMap(); // Colours may change if toggle active
+ });
}
\ No newline at end of file
diff --git a/public/src/graph.js b/public/src/graph.js
index f462a1d..4d3cdb0 100644
--- a/public/src/graph.js
+++ b/public/src/graph.js
@@ -83,7 +83,7 @@ export async function populateGraph() {
};
// Update displayed predictions, preserving current index
- updatePredictions(curSource);
+ updatePredictions();
}
export async function updateGraph(gss) {
@@ -124,19 +124,17 @@ export async function updateGraph(gss) {
};
// Update displayed predictions, preserving current index
- updatePredictions(curSource);
+ updatePredictions();
}
-export async function updatePredictions(index) {
- setSource(index);
-
+export async function updatePredictions() {
// Show prediction data as an outline only bar to differentiate
chart.data.datasets[1] = {
label: 'Prediction',
backgroundColor: '#FFF',
borderWidth: 1,
borderColor: "#3C4750",
- data: predictions[index]
+ data: predictions[curSource]
};
chart.update();
From 743102a2120fe7df4063874826d836f544c48400 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 20:26:16 +0000
Subject: [PATCH 13/23] Fix test error
---
public/src/map.js | 2 +-
public/src/toggle.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/public/src/map.js b/public/src/map.js
index f44ef54..f81384f 100644
--- a/public/src/map.js
+++ b/public/src/map.js
@@ -212,7 +212,7 @@ function updateColours() {
let winner;
const cands = data.candidates.filter(ca => ca.gss_code === c.gss_code);
if (useReal) {
- winner = cands[0];
+ winner = cands[0]
} else {
winner = cands.sort((a, b) => b.predictions[curSource] - a.predictions[curSource])[0];
}
diff --git a/public/src/toggle.js b/public/src/toggle.js
index 4662f7e..7d607e0 100644
--- a/public/src/toggle.js
+++ b/public/src/toggle.js
@@ -7,7 +7,7 @@ export async function initToggle() {
state = this.checked;
if (this.checked) {
- document.getElementById('predictionLabel').innerHTML = "Predicted";
+ document.getElementById('predictionLabel').innerHTML = "Predicted"
} else {
document.getElementById('predictionLabel').innerHTML = "Actual"
}
From db814947df6032b5499621b293911fa109463216 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 20:35:56 +0000
Subject: [PATCH 14/23] Starts with actual
---
public/index.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/public/index.html b/public/index.html
index ea70181..20cd361 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,7 +38,7 @@
-
+
From 68b621cfef46275e17e064fceaef1dabd68b58a9 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 20:36:28 +0000
Subject: [PATCH 15/23] remove error
---
public/src/graph.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/public/src/graph.js b/public/src/graph.js
index 86514b2..a29836d 100644
--- a/public/src/graph.js
+++ b/public/src/graph.js
@@ -1,6 +1,6 @@
/* global Chart */ // Defined by Chart.js
-import { curSource, getData, setSource } from "./data";
+import { curSource, getData } from "./data";
// Chart will be updated later
let chart;
From 96ab93a94a920814336e1695f1cc8f8543c30419 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 21:22:26 +0000
Subject: [PATCH 16/23] Update index.html
---
public/index.html | 17 ++++++++++++-----
1 file changed, 12 insertions(+), 5 deletions(-)
diff --git a/public/index.html b/public/index.html
index 20cd361..f3e9cf4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -35,12 +35,10 @@
+
-
-
-
-
+
@@ -57,7 +55,16 @@
-
+
+
From d1605a86ec4b4fc76d671a21a2f9e54f37730ba1 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 21:22:43 +0000
Subject: [PATCH 17/23] Create toggle.css
---
public/css/toggle.css | 65 +++++++++++++++++++++++++++++++++++++++++++
1 file changed, 65 insertions(+)
create mode 100644 public/css/toggle.css
diff --git a/public/css/toggle.css b/public/css/toggle.css
new file mode 100644
index 0000000..c272b0d
--- /dev/null
+++ b/public/css/toggle.css
@@ -0,0 +1,65 @@
+/* The switch - the box around the slider */
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+ z-index: 5;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+
+ z-index: 5;
+}
+
+.slider:before {
+position: absolute;
+content: "";
+height: 26px;
+width: 26px;
+left: 4px;
+bottom: 4px;
+background-color: white;
+-webkit-transition: .4s;
+transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #2196F3;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
From bdb3ed9becf8ab1d9139425f314ff01bbaa016d6 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 21:22:50 +0000
Subject: [PATCH 18/23] Update toggle.css
---
public/css/toggle.css | 17 +++++++++++++++++
1 file changed, 17 insertions(+)
diff --git a/public/css/toggle.css b/public/css/toggle.css
index c272b0d..61dc5a6 100644
--- a/public/css/toggle.css
+++ b/public/css/toggle.css
@@ -63,3 +63,20 @@ input:checked + .slider:before {
.slider.round:before {
border-radius: 50%;
}
+
+.toggle {
+ position: relative;
+ align-self: right;
+ z-index: 5;
+}
+
+#check-box {
+ position: right;
+}
+
+#predictionLabel {
+ position: absolute;
+ padding-left: 5pt;
+ padding-top: 5pt;
+ font-weight: bold;
+}
\ No newline at end of file
From f87708c69019dcabd8b5bdb2b70c23f1bb7d9521 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 21:22:59 +0000
Subject: [PATCH 19/23] Add "Data"
---
public/src/toggle.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/public/src/toggle.js b/public/src/toggle.js
index 7d607e0..fc601e5 100644
--- a/public/src/toggle.js
+++ b/public/src/toggle.js
@@ -7,9 +7,9 @@ export async function initToggle() {
state = this.checked;
if (this.checked) {
- document.getElementById('predictionLabel').innerHTML = "Predicted"
+ document.getElementById('predictionLabel').innerHTML = "Predicted Data"
} else {
- document.getElementById('predictionLabel').innerHTML = "Actual"
+ document.getElementById('predictionLabel').innerHTML = "Actual Data"
}
updateMap();
From 25a0f06fa81c800d37de686c4a919735831ba39d Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 21:36:46 +0000
Subject: [PATCH 20/23] Update index.html
---
public/index.html | 7 +------
1 file changed, 1 insertion(+), 6 deletions(-)
diff --git a/public/index.html b/public/index.html
index f3e9cf4..a3508ea 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,12 +33,7 @@
-
-
-
-
-
-
+
From 6006122ed57e8b94f2f53838f35c1fd35e845d24 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 22:15:47 +0000
Subject: [PATCH 21/23] toggle beside sources
---
public/css/main.css | 3 +++
public/css/toggle.css | 30 ++++++++++++++++--------------
public/index.html | 15 ++++++++-------
3 files changed, 27 insertions(+), 21 deletions(-)
diff --git a/public/css/main.css b/public/css/main.css
index d2fdc13..f9630ff 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -95,6 +95,9 @@ main {
align-self: center;
max-width: 450px;
}
+#middle-low {
+ display: inline-block;
+}
/* prediction data dropdown menu section formatting */
#dropdown-section {
diff --git a/public/css/toggle.css b/public/css/toggle.css
index 61dc5a6..1ff372a 100644
--- a/public/css/toggle.css
+++ b/public/css/toggle.css
@@ -2,8 +2,8 @@
.switch {
position: relative;
display: inline-block;
- width: 60px;
- height: 34px;
+ width: 30px;
+ height: 17px;
z-index: 5;
}
@@ -32,10 +32,10 @@
.slider:before {
position: absolute;
content: "";
-height: 26px;
-width: 26px;
-left: 4px;
-bottom: 4px;
+height: 13px;
+width: 13px;
+left: 2px;
+bottom: 2px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
@@ -50,14 +50,14 @@ input:focus + .slider {
}
input:checked + .slider:before {
- -webkit-transform: translateX(26px);
- -ms-transform: translateX(26px);
- transform: translateX(26px);
+ -webkit-transform: translateX(13px);
+ -ms-transform: translateX(13px);
+ transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
- border-radius: 34px;
+ border-radius: 17px;
}
.slider.round:before {
@@ -66,8 +66,9 @@ input:checked + .slider:before {
.toggle {
position: relative;
- align-self: right;
+ align-self: center;
z-index: 5;
+ padding-bottom: 5pt;
}
#check-box {
@@ -75,8 +76,9 @@ input:checked + .slider:before {
}
#predictionLabel {
- position: absolute;
+ position: relative;
padding-left: 5pt;
- padding-top: 5pt;
- font-weight: bold;
+ /* padding-top: 5pt; */
+ align-self: right;
+ font-size: small;
}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index a3508ea..83ca678 100644
--- a/public/index.html
+++ b/public/index.html
@@ -51,13 +51,6 @@
@@ -71,9 +64,17 @@
+
+
+
+
+
From 87ef5e20221b91426200e8c63c24bcaef2149d14 Mon Sep 17 00:00:00 2001
From: Jonathan Lee <65177718+jonleesy@users.noreply.github.com>
Date: Wed, 24 Mar 2021 22:27:27 +0000
Subject: [PATCH 22/23] oops. Pushed
---
public/css/toggle.css | 3 +--
public/index.html | 2 +-
2 files changed, 2 insertions(+), 3 deletions(-)
diff --git a/public/css/toggle.css b/public/css/toggle.css
index 1ff372a..06449ec 100644
--- a/public/css/toggle.css
+++ b/public/css/toggle.css
@@ -76,9 +76,8 @@ input:checked + .slider:before {
}
#predictionLabel {
- position: relative;
+ position: absolute;
padding-left: 5pt;
- /* padding-top: 5pt; */
align-self: right;
font-size: small;
}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 83ca678..b14f022 100644
--- a/public/index.html
+++ b/public/index.html
@@ -69,7 +69,7 @@
-
+
From 151a48f4518006fca10f738da0f5d6191e9ab335 Mon Sep 17 00:00:00 2001
From: Kyle Mckay <5459452+kymckay@users.noreply.github.com>
Date: Wed, 24 Mar 2021 22:48:24 +0000
Subject: [PATCH 23/23] Improve affordance of map toggle
Clearly label the toggle as relating to the map
---
public/css/toggle.css | 54 +++++++++++++++++++------------------------
public/index.html | 12 ++++++----
public/src/toggle.js | 9 ++------
3 files changed, 33 insertions(+), 42 deletions(-)
diff --git a/public/css/toggle.css b/public/css/toggle.css
index 06449ec..a6e891c 100644
--- a/public/css/toggle.css
+++ b/public/css/toggle.css
@@ -4,7 +4,6 @@
display: inline-block;
width: 30px;
height: 17px;
- z-index: 5;
}
/* Hide default HTML checkbox */
@@ -25,59 +24,54 @@
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
-
- z-index: 5;
}
.slider:before {
-position: absolute;
-content: "";
-height: 13px;
-width: 13px;
-left: 2px;
-bottom: 2px;
-background-color: white;
--webkit-transition: .4s;
-transition: .4s;
+ position: absolute;
+ content: "";
+ height: 13px;
+ width: 13px;
+ left: 2px;
+ bottom: 2px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
}
input:checked + .slider {
- background-color: #2196F3;
+ background-color: #2196F3;
}
input:focus + .slider {
- box-shadow: 0 0 1px #2196F3;
+ box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
- -webkit-transform: translateX(13px);
- -ms-transform: translateX(13px);
- transform: translateX(13px);
+ -webkit-transform: translateX(13px);
+ -ms-transform: translateX(13px);
+ transform: translateX(13px);
}
/* Rounded sliders */
.slider.round {
- border-radius: 17px;
+ border-radius: 17px;
}
.slider.round:before {
- border-radius: 50%;
+ border-radius: 50%;
}
.toggle {
- position: relative;
- align-self: center;
- z-index: 5;
- padding-bottom: 5pt;
+ position: relative;
+ align-self: center;
+ padding-bottom: 5pt;
}
-
+
#check-box {
- position: right;
+ position: right;
}
-
+
#predictionLabel {
- position: absolute;
- padding-left: 5pt;
- align-self: right;
- font-size: small;
+ padding-left: 5pt;
+ font-size: small;
}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index b14f022..63d7943 100644
--- a/public/index.html
+++ b/public/index.html
@@ -33,7 +33,7 @@
-
+
@@ -52,7 +52,7 @@
-
+
@@ -63,18 +63,20 @@
-
+
-
+
+
+
-
+
diff --git a/public/src/toggle.js b/public/src/toggle.js
index fc601e5..fe761f0 100644
--- a/public/src/toggle.js
+++ b/public/src/toggle.js
@@ -6,13 +6,8 @@ export async function initToggle() {
document.getElementById('check-box').addEventListener('change', function() {
state = this.checked;
- if (this.checked) {
- document.getElementById('predictionLabel').innerHTML = "Predicted Data"
- } else {
- document.getElementById('predictionLabel').innerHTML = "Actual Data"
- }
+ document.getElementById('predictionLabel').innerHTML = this.checked ? "Colour Map: Predicted" : "Colour Map: Actual";
updateMap();
- })
-
+ });
}
\ No newline at end of file