diff --git a/mockserver/update_state.py b/mockserver/update_state.py
index a121712224..af2be3db22 100644
--- a/mockserver/update_state.py
+++ b/mockserver/update_state.py
@@ -112,7 +112,7 @@
# Update production
production['datetime'] = arrow.get(production['datetime']).isoformat()
# Set random co2 value
- production['co2intensity'] = random() * 500
+ production['co2intensity'] = random() * 800
# Set aggregates
production['maxProduction'] = max([x or 0 for x in production['production'].values()])
production['totalProduction'] = sum([x or 0 for x in production['production'].values()])
diff --git a/web/generate-arrows.js b/web/generate-arrows.js
index 7c601cbd27..9e0f625fc6 100644
--- a/web/generate-arrows.js
+++ b/web/generate-arrows.js
@@ -1,18 +1,27 @@
// Requires `brew install imagemagick`
+// import themes from './helpers/themes'
const child_process = require('child_process');
const fs = require('fs');
-const d3 = require('d3');
+const d3 = Object.assign(
+ {},
+ require('d3-array'),
+ require('d3-collection'),
+ require('d3-scale'),
+);
+
+const { themes } = require('./src/helpers/themes');
const numTicks = 11;
const co2color = d3.scaleLinear()
- .domain([0, 375, 725, 800])
- .range(['green', 'orange', 'rgb(26,13,0)']);
+ .domain(themes.dark.co2Scale.steps)
+ .range(themes.dark.co2Scale.colors);
const keys = d3.range(0, 800 + 80, 80);
const colors = {};
keys.forEach((k) => { colors[k] = co2color(k) });
+colors['nan'] = '#A9A9A9';
-for(let co2value in colors) {
+for (let co2value in colors) {
// generate specific color
console.log([
'public/images/arrow-template.png',
@@ -29,29 +38,29 @@ for(let co2value in colors) {
return;
}
- // make an outline
- const outlineSize = 2;
- const whiteArrowAfterCo2Intensity = 640;
- child_process.spawn('convert', [
- `public/images/arrow-${co2value}.png`,
- '-bordercolor', 'none',
- '-border', outlineSize,
- '\(', '-clone', '0', '-alpha', 'off', '-fill', co2value >= whiteArrowAfterCo2Intensity ? 'white' : 'black', '-colorize', '100%', '\)',
- '\(', '-clone', '0', '-alpha', 'extract', '-morphology', 'edgeout', 'octagon:'+outlineSize, '\)',
- '-compose', 'over',
- '-composite', `public/images/arrow-${co2value}-outline.png`
- ]).on('close', code => {
- if(code !== 0) {
- console.log('child exited with code', code);
- return;
- }
+ // make an outline (NOT being currently used with new arrow shape)
+ // const outlineSize = 2;
+ // const whiteArrowAfterCo2Intensity = 640;
+ // child_process.spawn('convert', [
+ // `public/images/arrow-${co2value}.png`,
+ // '-bordercolor', 'none',
+ // '-border', outlineSize,
+ // '\(', '-clone', '0', '-alpha', 'off', '-fill', co2value >= whiteArrowAfterCo2Intensity ? 'white' : 'black', '-colorize', '100%', '\)',
+ // '\(', '-clone', '0', '-alpha', 'extract', '-morphology', 'edgeout', 'octagon:'+outlineSize, '\)',
+ // '-compose', 'over',
+ // '-composite', `public/images/arrow-${co2value}-outline.png`
+ // ]).on('close', code => {
+ // if(code !== 0) {
+ // console.log('child exited with code', code);
+ // return;
+ // }
// Apply highlight and generate GIF
[10, 6, 2].forEach((speed, index) => {
const args = [
'-dispose', 'none',
'-delay', '0',
- `public/images/arrow-${co2value}-outline.png`,
+ `public/images/arrow-${co2value}.png`,
'-dispose', 'previous',
'-delay', `${speed}`,
'-loop', '0',
@@ -70,14 +79,14 @@ for(let co2value in colors) {
fs.unlink(`public/images/arrow-${co2value}.png`, () => {});
fs.unlink(`public/images/arrow-${co2value}-outline.png`, () => {});
- })
+ });
child.stderr.on('data', (data) => {
console.log('stderr:', data);
});
});
- })
- });
+ });
+ // });
}
// echo $color;
// #convert demo-arrow.png +level-colors transparent,"$color" mod-arrow.png
diff --git a/web/locales/de.json b/web/locales/de.json
index 754a410848..2634cba9f6 100644
--- a/web/locales/de.json
+++ b/web/locales/de.json
@@ -13,7 +13,6 @@
},
"onboarding-modal": {
"view1": {
- "header": "Electricity Map",
"subtitle": "Visualisierung der klimarelevanten Emissionen der Stromerzeugung"
},
"view2": {
diff --git a/web/locales/en.json b/web/locales/en.json
index 56894e8854..b30a5a0176 100644
--- a/web/locales/en.json
+++ b/web/locales/en.json
@@ -8,7 +8,6 @@
},
"onboarding-modal": {
"view1": {
- "header": "The Electricity Map",
"subtitle": "Mapping the climate impact of electricity"
},
"view2": {
diff --git a/web/locales/pl.json b/web/locales/pl.json
index 2323956b9d..e41ed03203 100644
--- a/web/locales/pl.json
+++ b/web/locales/pl.json
@@ -8,7 +8,6 @@
},
"onboarding-modal": {
"view1": {
- "header": "Electricity Map",
"subtitle": "Obrazujemy wpływ produkcji energii elektrycznej na klimat"
},
"view2": {
diff --git a/web/locales/sv.json b/web/locales/sv.json
index a23ecbf8b4..d350357800 100644
--- a/web/locales/sv.json
+++ b/web/locales/sv.json
@@ -8,7 +8,6 @@
},
"onboarding-modal": {
"view1": {
- "header": "Electricity Map",
"subtitle": "Kartlägger klimatpåverkan från elkonsumtion"
},
"view2": {
diff --git a/web/public/css/CatamaranFont.css b/web/public/css/CatamaranFont.css
deleted file mode 100644
index 8f8d9f689e..0000000000
--- a/web/public/css/CatamaranFont.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@font-face {
- font-family: 'Catamaran';
- src: local('Catamaran'),
- local('Catamaran-Regular'),
- url(../fonts/Catamaran-Regular.ttf) format('truetype');
-}
\ No newline at end of file
diff --git a/web/public/css/OpenSansFont.css b/web/public/css/OpenSansFont.css
new file mode 100644
index 0000000000..e08818e265
--- /dev/null
+++ b/web/public/css/OpenSansFont.css
@@ -0,0 +1,17 @@
+@font-face {
+ font-family: 'Open Sans';
+ src: local('OpenSans'),
+ local('Open Sans'),
+ local('OpenSans-Regular'),
+ url(../fonts/OpenSans-Regular.ttf) format('truetype');
+ font-weight: normal;
+}
+
+@font-face {
+ font-family: 'Open Sans';
+ src: local('OpenSans Bold'),
+ local('Open Sans Bold'),
+ local('OpenSans-Bold'),
+ url(../fonts/OpenSans-Bold.ttf) format('truetype');
+ font-weight: bold;
+}
diff --git a/web/public/fonts/Catamaran-Regular.ttf b/web/public/fonts/Catamaran-Regular.ttf
deleted file mode 100755
index 328e253362..0000000000
Binary files a/web/public/fonts/Catamaran-Regular.ttf and /dev/null differ
diff --git a/web/public/fonts/OpenSans-Bold.ttf b/web/public/fonts/OpenSans-Bold.ttf
new file mode 100755
index 0000000000..7b52945603
Binary files /dev/null and b/web/public/fonts/OpenSans-Bold.ttf differ
diff --git a/web/public/fonts/OpenSans-Regular.ttf b/web/public/fonts/OpenSans-Regular.ttf
new file mode 100755
index 0000000000..2e31d02424
Binary files /dev/null and b/web/public/fonts/OpenSans-Regular.ttf differ
diff --git a/web/public/images/arrow-0-animated-0.gif b/web/public/images/arrow-0-animated-0.gif
index f705b026ab..c78641a6f6 100644
Binary files a/web/public/images/arrow-0-animated-0.gif and b/web/public/images/arrow-0-animated-0.gif differ
diff --git a/web/public/images/arrow-0-animated-1.gif b/web/public/images/arrow-0-animated-1.gif
index 2b48f82322..d518f7f004 100644
Binary files a/web/public/images/arrow-0-animated-1.gif and b/web/public/images/arrow-0-animated-1.gif differ
diff --git a/web/public/images/arrow-0-animated-2.gif b/web/public/images/arrow-0-animated-2.gif
index 51ff84fcb5..4f0284c4dd 100644
Binary files a/web/public/images/arrow-0-animated-2.gif and b/web/public/images/arrow-0-animated-2.gif differ
diff --git a/web/public/images/arrow-160-animated-0.gif b/web/public/images/arrow-160-animated-0.gif
index 74650cb8c6..908b5ca801 100644
Binary files a/web/public/images/arrow-160-animated-0.gif and b/web/public/images/arrow-160-animated-0.gif differ
diff --git a/web/public/images/arrow-160-animated-1.gif b/web/public/images/arrow-160-animated-1.gif
index 1f86e2127d..babe9588d2 100644
Binary files a/web/public/images/arrow-160-animated-1.gif and b/web/public/images/arrow-160-animated-1.gif differ
diff --git a/web/public/images/arrow-160-animated-2.gif b/web/public/images/arrow-160-animated-2.gif
index e55efa4212..54930edf9b 100644
Binary files a/web/public/images/arrow-160-animated-2.gif and b/web/public/images/arrow-160-animated-2.gif differ
diff --git a/web/public/images/arrow-240-animated-0.gif b/web/public/images/arrow-240-animated-0.gif
index 21eed67d24..fa37a1ac25 100644
Binary files a/web/public/images/arrow-240-animated-0.gif and b/web/public/images/arrow-240-animated-0.gif differ
diff --git a/web/public/images/arrow-240-animated-1.gif b/web/public/images/arrow-240-animated-1.gif
index 469dd27df0..b941346f43 100644
Binary files a/web/public/images/arrow-240-animated-1.gif and b/web/public/images/arrow-240-animated-1.gif differ
diff --git a/web/public/images/arrow-240-animated-2.gif b/web/public/images/arrow-240-animated-2.gif
index c4d2521413..aad73c4075 100644
Binary files a/web/public/images/arrow-240-animated-2.gif and b/web/public/images/arrow-240-animated-2.gif differ
diff --git a/web/public/images/arrow-320-animated-0.gif b/web/public/images/arrow-320-animated-0.gif
index 79047f5e82..958d8b9b7d 100644
Binary files a/web/public/images/arrow-320-animated-0.gif and b/web/public/images/arrow-320-animated-0.gif differ
diff --git a/web/public/images/arrow-320-animated-1.gif b/web/public/images/arrow-320-animated-1.gif
index 2f90165d30..af8ef11eab 100644
Binary files a/web/public/images/arrow-320-animated-1.gif and b/web/public/images/arrow-320-animated-1.gif differ
diff --git a/web/public/images/arrow-320-animated-2.gif b/web/public/images/arrow-320-animated-2.gif
index 603d84f337..1db5fcd972 100644
Binary files a/web/public/images/arrow-320-animated-2.gif and b/web/public/images/arrow-320-animated-2.gif differ
diff --git a/web/public/images/arrow-400-animated-0.gif b/web/public/images/arrow-400-animated-0.gif
index 1962ff6915..b2de08c6fb 100644
Binary files a/web/public/images/arrow-400-animated-0.gif and b/web/public/images/arrow-400-animated-0.gif differ
diff --git a/web/public/images/arrow-400-animated-1.gif b/web/public/images/arrow-400-animated-1.gif
index 6ea709913d..21dcf8b3c1 100644
Binary files a/web/public/images/arrow-400-animated-1.gif and b/web/public/images/arrow-400-animated-1.gif differ
diff --git a/web/public/images/arrow-400-animated-2.gif b/web/public/images/arrow-400-animated-2.gif
index 0bc0849b78..ea27b43011 100644
Binary files a/web/public/images/arrow-400-animated-2.gif and b/web/public/images/arrow-400-animated-2.gif differ
diff --git a/web/public/images/arrow-480-animated-0.gif b/web/public/images/arrow-480-animated-0.gif
index a3f027cd6f..2aec781a14 100644
Binary files a/web/public/images/arrow-480-animated-0.gif and b/web/public/images/arrow-480-animated-0.gif differ
diff --git a/web/public/images/arrow-480-animated-1.gif b/web/public/images/arrow-480-animated-1.gif
index 6dd3fe64ea..44879ec30e 100644
Binary files a/web/public/images/arrow-480-animated-1.gif and b/web/public/images/arrow-480-animated-1.gif differ
diff --git a/web/public/images/arrow-480-animated-2.gif b/web/public/images/arrow-480-animated-2.gif
index 34b6faf5f4..2a7dd24d3f 100644
Binary files a/web/public/images/arrow-480-animated-2.gif and b/web/public/images/arrow-480-animated-2.gif differ
diff --git a/web/public/images/arrow-560-animated-0.gif b/web/public/images/arrow-560-animated-0.gif
index d2d6e125d2..4b32f14bf0 100644
Binary files a/web/public/images/arrow-560-animated-0.gif and b/web/public/images/arrow-560-animated-0.gif differ
diff --git a/web/public/images/arrow-560-animated-1.gif b/web/public/images/arrow-560-animated-1.gif
index ae7eda0d99..98848af215 100644
Binary files a/web/public/images/arrow-560-animated-1.gif and b/web/public/images/arrow-560-animated-1.gif differ
diff --git a/web/public/images/arrow-560-animated-2.gif b/web/public/images/arrow-560-animated-2.gif
index 2574f59410..e3525b270e 100644
Binary files a/web/public/images/arrow-560-animated-2.gif and b/web/public/images/arrow-560-animated-2.gif differ
diff --git a/web/public/images/arrow-640-animated-0.gif b/web/public/images/arrow-640-animated-0.gif
index 0bdab658c2..c6e68b0c9d 100644
Binary files a/web/public/images/arrow-640-animated-0.gif and b/web/public/images/arrow-640-animated-0.gif differ
diff --git a/web/public/images/arrow-640-animated-1.gif b/web/public/images/arrow-640-animated-1.gif
index d2b6017052..1c07be08d0 100644
Binary files a/web/public/images/arrow-640-animated-1.gif and b/web/public/images/arrow-640-animated-1.gif differ
diff --git a/web/public/images/arrow-640-animated-2.gif b/web/public/images/arrow-640-animated-2.gif
index 6059a8045a..a199560c07 100644
Binary files a/web/public/images/arrow-640-animated-2.gif and b/web/public/images/arrow-640-animated-2.gif differ
diff --git a/web/public/images/arrow-720-animated-0.gif b/web/public/images/arrow-720-animated-0.gif
index c5874a393b..09661a63be 100644
Binary files a/web/public/images/arrow-720-animated-0.gif and b/web/public/images/arrow-720-animated-0.gif differ
diff --git a/web/public/images/arrow-720-animated-1.gif b/web/public/images/arrow-720-animated-1.gif
index fe4646c77f..71ca4cda27 100644
Binary files a/web/public/images/arrow-720-animated-1.gif and b/web/public/images/arrow-720-animated-1.gif differ
diff --git a/web/public/images/arrow-720-animated-2.gif b/web/public/images/arrow-720-animated-2.gif
index 5dfd3688db..9fd40c71be 100644
Binary files a/web/public/images/arrow-720-animated-2.gif and b/web/public/images/arrow-720-animated-2.gif differ
diff --git a/web/public/images/arrow-80-animated-0.gif b/web/public/images/arrow-80-animated-0.gif
index 4bd161cf82..adf01e1d64 100644
Binary files a/web/public/images/arrow-80-animated-0.gif and b/web/public/images/arrow-80-animated-0.gif differ
diff --git a/web/public/images/arrow-80-animated-1.gif b/web/public/images/arrow-80-animated-1.gif
index 4b51a8f9b2..a76f883645 100644
Binary files a/web/public/images/arrow-80-animated-1.gif and b/web/public/images/arrow-80-animated-1.gif differ
diff --git a/web/public/images/arrow-80-animated-2.gif b/web/public/images/arrow-80-animated-2.gif
index 6fc0bb7dbc..58a914fe7f 100644
Binary files a/web/public/images/arrow-80-animated-2.gif and b/web/public/images/arrow-80-animated-2.gif differ
diff --git a/web/public/images/arrow-800-animated-0.gif b/web/public/images/arrow-800-animated-0.gif
index 2618a118ae..f62f459712 100644
Binary files a/web/public/images/arrow-800-animated-0.gif and b/web/public/images/arrow-800-animated-0.gif differ
diff --git a/web/public/images/arrow-800-animated-1.gif b/web/public/images/arrow-800-animated-1.gif
index f3d5aea064..8c4f5c86dc 100644
Binary files a/web/public/images/arrow-800-animated-1.gif and b/web/public/images/arrow-800-animated-1.gif differ
diff --git a/web/public/images/arrow-800-animated-2.gif b/web/public/images/arrow-800-animated-2.gif
index 29410b7270..154b07e606 100644
Binary files a/web/public/images/arrow-800-animated-2.gif and b/web/public/images/arrow-800-animated-2.gif differ
diff --git a/web/public/images/arrow-highlights/10.png b/web/public/images/arrow-highlights/10.png
index c6c19709a5..9eea8c7a71 100644
Binary files a/web/public/images/arrow-highlights/10.png and b/web/public/images/arrow-highlights/10.png differ
diff --git a/web/public/images/arrow-highlights/15.png b/web/public/images/arrow-highlights/15.png
index dc751ac665..b2a2a959b4 100644
Binary files a/web/public/images/arrow-highlights/15.png and b/web/public/images/arrow-highlights/15.png differ
diff --git a/web/public/images/arrow-highlights/20.png b/web/public/images/arrow-highlights/20.png
index 6e400f8e5e..7c9d0825a2 100644
Binary files a/web/public/images/arrow-highlights/20.png and b/web/public/images/arrow-highlights/20.png differ
diff --git a/web/public/images/arrow-highlights/25.png b/web/public/images/arrow-highlights/25.png
index 6beb09e3e5..3b36b48a74 100644
Binary files a/web/public/images/arrow-highlights/25.png and b/web/public/images/arrow-highlights/25.png differ
diff --git a/web/public/images/arrow-highlights/27.png b/web/public/images/arrow-highlights/27.png
index e9f06f8f1e..d0e0e4992c 100644
Binary files a/web/public/images/arrow-highlights/27.png and b/web/public/images/arrow-highlights/27.png differ
diff --git a/web/public/images/arrow-highlights/30.png b/web/public/images/arrow-highlights/30.png
index 394ad00288..f049a4d33e 100644
Binary files a/web/public/images/arrow-highlights/30.png and b/web/public/images/arrow-highlights/30.png differ
diff --git a/web/public/images/arrow-highlights/35.png b/web/public/images/arrow-highlights/35.png
index a5946b8b2d..0408b79dc0 100644
Binary files a/web/public/images/arrow-highlights/35.png and b/web/public/images/arrow-highlights/35.png differ
diff --git a/web/public/images/arrow-highlights/40.png b/web/public/images/arrow-highlights/40.png
index d4d2dcdb56..125709d429 100644
Binary files a/web/public/images/arrow-highlights/40.png and b/web/public/images/arrow-highlights/40.png differ
diff --git a/web/public/images/arrow-highlights/45.png b/web/public/images/arrow-highlights/45.png
index c8a3838ef2..aa8e3be3ec 100644
Binary files a/web/public/images/arrow-highlights/45.png and b/web/public/images/arrow-highlights/45.png differ
diff --git a/web/public/images/arrow-highlights/50.png b/web/public/images/arrow-highlights/50.png
index 377607eec1..26214dbec6 100644
Binary files a/web/public/images/arrow-highlights/50.png and b/web/public/images/arrow-highlights/50.png differ
diff --git a/web/public/images/arrow-highlights/55.png b/web/public/images/arrow-highlights/55.png
index e523966cb9..10d6edf02f 100644
Binary files a/web/public/images/arrow-highlights/55.png and b/web/public/images/arrow-highlights/55.png differ
diff --git a/web/public/images/arrow-highlights/60.png b/web/public/images/arrow-highlights/60.png
index 604952e346..3989c8dba3 100644
Binary files a/web/public/images/arrow-highlights/60.png and b/web/public/images/arrow-highlights/60.png differ
diff --git a/web/public/images/arrow-highlights/65.png b/web/public/images/arrow-highlights/65.png
index dfe3c655ba..fd1c8a70b6 100644
Binary files a/web/public/images/arrow-highlights/65.png and b/web/public/images/arrow-highlights/65.png differ
diff --git a/web/public/images/arrow-highlights/70.png b/web/public/images/arrow-highlights/70.png
index f496a98507..4deecc8974 100644
Binary files a/web/public/images/arrow-highlights/70.png and b/web/public/images/arrow-highlights/70.png differ
diff --git a/web/public/images/arrow-highlights/75.png b/web/public/images/arrow-highlights/75.png
index 057036b008..02c6e6725e 100644
Binary files a/web/public/images/arrow-highlights/75.png and b/web/public/images/arrow-highlights/75.png differ
diff --git a/web/public/images/arrow-highlights/80.png b/web/public/images/arrow-highlights/80.png
index a1259ce7f5..3822a77430 100644
Binary files a/web/public/images/arrow-highlights/80.png and b/web/public/images/arrow-highlights/80.png differ
diff --git a/web/public/images/arrow-highlights/85.png b/web/public/images/arrow-highlights/85.png
index 456f33cb4e..7aeb4bacce 100644
Binary files a/web/public/images/arrow-highlights/85.png and b/web/public/images/arrow-highlights/85.png differ
diff --git a/web/public/images/arrow-highlights/90.png b/web/public/images/arrow-highlights/90.png
index d38ef94e71..7654589822 100644
Binary files a/web/public/images/arrow-highlights/90.png and b/web/public/images/arrow-highlights/90.png differ
diff --git a/web/public/images/arrow-highlights/95.png b/web/public/images/arrow-highlights/95.png
index 79cff95c63..3f886fa4f9 100644
Binary files a/web/public/images/arrow-highlights/95.png and b/web/public/images/arrow-highlights/95.png differ
diff --git a/web/public/images/arrow-highlights/97.png b/web/public/images/arrow-highlights/97.png
index 693608b509..676ea09647 100644
Binary files a/web/public/images/arrow-highlights/97.png and b/web/public/images/arrow-highlights/97.png differ
diff --git a/web/public/images/arrow-highlights/99.png b/web/public/images/arrow-highlights/99.png
index c2ab1edfa7..ed406c5ee5 100644
Binary files a/web/public/images/arrow-highlights/99.png and b/web/public/images/arrow-highlights/99.png differ
diff --git a/web/public/images/arrow-highlights/highlight-template.psd b/web/public/images/arrow-highlights/highlight-template.psd
index 9cff1e4d84..b8b9c0e882 100644
Binary files a/web/public/images/arrow-highlights/highlight-template.psd and b/web/public/images/arrow-highlights/highlight-template.psd differ
diff --git a/web/public/images/arrow-nan-animated-0.gif b/web/public/images/arrow-nan-animated-0.gif
index aa1ad8134c..27609d5e54 100644
Binary files a/web/public/images/arrow-nan-animated-0.gif and b/web/public/images/arrow-nan-animated-0.gif differ
diff --git a/web/public/images/arrow-nan-animated-1.gif b/web/public/images/arrow-nan-animated-1.gif
index 28fc0989c0..3cfd3a297e 100644
Binary files a/web/public/images/arrow-nan-animated-1.gif and b/web/public/images/arrow-nan-animated-1.gif differ
diff --git a/web/public/images/arrow-nan-animated-2.gif b/web/public/images/arrow-nan-animated-2.gif
index 57a2ee525d..2e6592bbb5 100644
Binary files a/web/public/images/arrow-nan-animated-2.gif and b/web/public/images/arrow-nan-animated-2.gif differ
diff --git a/web/public/images/arrow-new.sketch b/web/public/images/arrow-new.sketch
new file mode 100644
index 0000000000..63c693bdad
Binary files /dev/null and b/web/public/images/arrow-new.sketch differ
diff --git a/web/public/images/arrow-template.png b/web/public/images/arrow-template.png
index b552cc5e36..7d7f185110 100644
Binary files a/web/public/images/arrow-template.png and b/web/public/images/arrow-template.png differ
diff --git a/web/public/images/brightmode.svg b/web/public/images/brightmode.svg
new file mode 100644
index 0000000000..42bb6e5480
--- /dev/null
+++ b/web/public/images/brightmode.svg
@@ -0,0 +1,13 @@
+
+
diff --git a/web/public/images/brightmode_active.svg b/web/public/images/brightmode_active.svg
new file mode 100644
index 0000000000..654203f054
--- /dev/null
+++ b/web/public/images/brightmode_active.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/web/public/images/built_by_tomorrow.svg b/web/public/images/built-by-tomorrow-white.svg
similarity index 100%
rename from web/public/images/built_by_tomorrow.svg
rename to web/public/images/built-by-tomorrow-white.svg
diff --git a/web/public/images/built-by-tomorrow.svg b/web/public/images/built-by-tomorrow.svg
new file mode 100644
index 0000000000..12662959f8
--- /dev/null
+++ b/web/public/images/built-by-tomorrow.svg
@@ -0,0 +1,21 @@
+
+
diff --git a/web/public/images/electricitymap-loading.svg b/web/public/images/electricitymap-loading.svg
new file mode 100644
index 0000000000..9bd3385f56
--- /dev/null
+++ b/web/public/images/electricitymap-loading.svg
@@ -0,0 +1,21 @@
+
+
diff --git a/web/public/images/electricitymap-logo-white.svg b/web/public/images/electricitymap-logo-white.svg
new file mode 100644
index 0000000000..f985aedb07
--- /dev/null
+++ b/web/public/images/electricitymap-logo-white.svg
@@ -0,0 +1,24 @@
+
+
diff --git a/web/public/images/electricitymap-logo.svg b/web/public/images/electricitymap-logo.svg
new file mode 100644
index 0000000000..36c16c5906
--- /dev/null
+++ b/web/public/images/electricitymap-logo.svg
@@ -0,0 +1,24 @@
+
+
\ No newline at end of file
diff --git a/web/public/images/electricitymap_social_image.jpg b/web/public/images/electricitymap_social_image.jpg
new file mode 100644
index 0000000000..1ab6b9a34a
Binary files /dev/null and b/web/public/images/electricitymap_social_image.jpg differ
diff --git a/web/public/images/loading/electricitymap-text.svg b/web/public/images/loading/electricitymap-text.svg
new file mode 100644
index 0000000000..d1f3a18139
--- /dev/null
+++ b/web/public/images/loading/electricitymap-text.svg
@@ -0,0 +1,10 @@
+
+
diff --git a/web/public/images/loading/loading128_FA.gif b/web/public/images/loading/loading128_FA.gif
new file mode 100644
index 0000000000..ca62f2f25d
Binary files /dev/null and b/web/public/images/loading/loading128_FA.gif differ
diff --git a/web/public/images/loading/loading64_FA.gif b/web/public/images/loading/loading64_FA.gif
new file mode 100644
index 0000000000..1f320b4837
Binary files /dev/null and b/web/public/images/loading/loading64_FA.gif differ
diff --git a/web/public/images/loading/loading96_FA.gif b/web/public/images/loading/loading96_FA.gif
new file mode 100644
index 0000000000..f5b7829f68
Binary files /dev/null and b/web/public/images/loading/loading96_FA.gif differ
diff --git a/web/public/images/ms-icon-310x310.png b/web/public/images/ms-icon-310x310.png
deleted file mode 100644
index 1a92d9e67c..0000000000
Binary files a/web/public/images/ms-icon-310x310.png and /dev/null differ
diff --git a/web/public/images/onboarding/electricymapLogoIcon.svg b/web/public/images/onboarding/electricymapLogoIcon.svg
new file mode 100644
index 0000000000..419ac31c56
--- /dev/null
+++ b/web/public/images/onboarding/electricymapLogoIcon.svg
@@ -0,0 +1,24 @@
+
+
\ No newline at end of file
diff --git a/web/public/images/onboarding/exchangeArrows.png b/web/public/images/onboarding/exchangeArrows.png
index 3b394019c4..dd024cb019 100644
Binary files a/web/public/images/onboarding/exchangeArrows.png and b/web/public/images/onboarding/exchangeArrows.png differ
diff --git a/web/public/images/onboarding/mapExtract.png b/web/public/images/onboarding/mapExtract.png
index 54ec094cf0..a0d07dce90 100644
Binary files a/web/public/images/onboarding/mapExtract.png and b/web/public/images/onboarding/mapExtract.png differ
diff --git a/web/public/images/onboarding/splitLayers.png b/web/public/images/onboarding/splitLayers.png
index a274af7e6d..8fe21cf556 100644
Binary files a/web/public/images/onboarding/splitLayers.png and b/web/public/images/onboarding/splitLayers.png differ
diff --git a/web/src/components/circulargauge.js b/web/src/components/circulargauge.js
index 4eb32a7e23..8d5f819697 100644
--- a/web/src/components/circulargauge.js
+++ b/web/src/components/circulargauge.js
@@ -10,8 +10,8 @@ export default class CircularGauge {
constructor(selectorId, argConfig) {
const config = argConfig || {};
- this.radius = config.radius || '27';
- this.lineWidth = config.lineWidth || '5';
+ this.radius = config.radius || '32';
+ this.lineWidth = config.lineWidth || '6';
this.fontSize = config.fontSize || '1rem';
this.arc = d3.arc()
@@ -73,9 +73,15 @@ export default class CircularGauge {
}
setPercentage(percentage) {
+ if (this.percentage === percentage) {
+ return;
+ }
+ if (Number.isNaN(percentage)) {
+ return;
+ }
this.prevPercentage = this.percentage;
this.percentage = percentage;
this.percentageText.text(this.percentage != null ? `${Math.round(this.percentage)}%` : '?');
this.draw();
}
-}
\ No newline at end of file
+}
diff --git a/web/src/components/countrytable.js b/web/src/components/countrytable.js
index fa459372f7..bdedefbd36 100644
--- a/web/src/components/countrytable.js
+++ b/web/src/components/countrytable.js
@@ -122,13 +122,13 @@ CountryTable.prototype.render = function(ignoreTransitions) {
return;
}
- const width = this.container.node().getBoundingClientRect().width;
+ const width = this.root.node().getBoundingClientRect().width;
if (!this._exchangeData) { return; }
// Update scale
- this.barMaxWidth = width - 2 * this.PADDING_X - this.LABEL_MAX_WIDTH;
+ this.barMaxWidth = width - this.LABEL_MAX_WIDTH - this.PADDING_X;
this.powerScale
.range([0, this.barMaxWidth]);
this.co2Scale
diff --git a/web/src/components/map.js b/web/src/components/map.js
index 89cfabad5c..9159991c84 100644
--- a/web/src/components/map.js
+++ b/web/src/components/map.js
@@ -2,16 +2,20 @@ import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
export default class Map {
- _setupMapColor() {
- if (this.map.isStyleLoaded() && this.map.getLayer('clickable-zones-fill') && this.co2color) {
- // TODO: Duplicated code
- const co2Range = [0, 200, 400, 600, 800, 1000];
- const stops = co2Range.map(d => [d, this.co2color(d)]);
- this.map.setPaintProperty('clickable-zones-fill', 'fill-color', {
- default: 'gray',
- property: 'co2intensity',
- stops,
- });
+ _setupMapColor(theme) {
+ if (theme) {
+ if (this.map.isStyleLoaded() && this.map.getLayer('clickable-zones-fill') && this.co2color) {
+ const co2Range = theme.co2Scale.steps;
+ const stops = co2Range.map(d => [d, this.co2color(d)]);
+ this.map.setPaintProperty('clickable-zones-fill', 'fill-color', {
+ default: theme.clickableFill,
+ property: 'co2intensity',
+ stops,
+ });
+ this.map.setPaintProperty('background', 'background-color', theme.oceanColor);
+ this.map.setPaintProperty('zones-line', 'line-color', theme.strokeColor);
+ this.map.setPaintProperty('zones-line', 'line-width', theme.strokeWidth);
+ }
}
}
@@ -46,7 +50,7 @@ export default class Map {
});
// Create layers
const paint = {
- 'fill-color': this.clickableFill,
+ 'fill-color': this.theme.clickableFill,
};
if (this.co2color) {
const co2Range = [0, 200, 400, 600, 800, 1000];
@@ -54,9 +58,14 @@ export default class Map {
paint['fill-color'] = {
stops,
property: 'co2intensity',
- default: this.clickableFill,
+ default: this.theme.clickableFill,
};
}
+ this.map.addLayer({
+ id: 'background',
+ type: 'background',
+ paint: { 'background-color': this.theme.oceanColor },
+ });
this.map.addLayer({
id: 'clickable-zones-fill',
type: 'fill',
@@ -69,7 +78,7 @@ export default class Map {
type: 'fill',
source: 'non-clickable-world',
layout: {},
- paint: { 'fill-color': this.nonClickableFill },
+ paint: { 'fill-color': this.theme.nonClickableFill },
});
this.map.addLayer({
id: 'zones-hover',
@@ -89,8 +98,8 @@ export default class Map {
source: 'clickable-world',
layout: {},
paint: {
- 'line-color': this.strokeColor,
- 'line-width': this.strokeWidth,
+ 'line-color': this.theme.strokeColor,
+ 'line-width': this.theme.strokeWidth,
},
});
}
@@ -98,11 +107,12 @@ export default class Map {
constructor(selectorId, argConfig) {
const config = argConfig || {};
+ const theme = argConfig.theme || {};
- this.strokeWidth = config.strokeWidth || 0.3;
- this.strokeColor = config.strokeColor || '#555555';
- this.clickableFill = config.clickableFill || 'gray';
- this.nonClickableFill = config.nonClickableFill || 'gray';
+ this.strokeWidth = theme.strokeWidth || 0.3;
+ this.strokeColor = theme.strokeColor || '#606060';
+ this.clickableFill = theme.clickableFill || '#33414A';
+ this.nonClickableFill = theme.nonClickableFill || '#33414A';
this.userIsUsingTouch = false;
this.center = undefined;
@@ -296,9 +306,16 @@ export default class Map {
return this;
}
- setCo2color(arg) {
+ setCo2color(arg, theme) {
this.co2color = arg;
- this._setupMapColor();
+ this.theme = theme;
+ this._setupMapColor(this.theme);
+ return this;
+ }
+
+ setTheme(arg) {
+ this.theme = arg;
+ this._setupMapColor(this.theme);
return this;
}
diff --git a/web/src/components/onboardingmodal.js b/web/src/components/onboardingmodal.js
index 085be08b85..c0422914b9 100644
--- a/web/src/components/onboardingmodal.js
+++ b/web/src/components/onboardingmodal.js
@@ -8,10 +8,10 @@ const d3 = Object.assign(
const SPACE_KEY_CODE = 32;
const defaultViews = [{
- headerImage: 'images/ms-icon-310x310.png',
+ headerImage: 'images/onboarding/electricymapLogoIcon.svg',
headerCssClass: 'logo-header',
textCssClass: 'brand-text',
- textHtml: `
${translation.translate('onboarding-modal.view1.header')}
+ textHtml: `electricityMap
${translation.translate('onboarding-modal.view1.subtitle')}
`,
},
{
diff --git a/web/src/components/timeslider.js b/web/src/components/timeslider.js
index f6d2b6cc45..dd69c5b9ee 100644
--- a/web/src/components/timeslider.js
+++ b/web/src/components/timeslider.js
@@ -30,8 +30,7 @@ export default class TimeSlider {
.attr('transform', `translate(${AXIS_MARGIN_LEFT}, 0)`);
const onChangeAndInput = () => {
- const selectedIndex = this.slider.property('value');
- this._manuallySelectedIndex = selectedIndex;
+ const selectedIndex = parseInt(this.slider.property('value'), 10);
this._onChange(selectedIndex);
};
this.slider.on('input', onChangeAndInput);
@@ -60,7 +59,7 @@ export default class TimeSlider {
return moment(d).format(TIME_FORMAT);
});
this.axis.call(xAxis);
- this.axis.selectAll('.tick text').attr('fill', '#D3D3D3'); // html 'lightgray'
+ this.axis.selectAll('.tick text').attr('fill', '#000000');
}
_updateSliderValue() {
@@ -109,7 +108,7 @@ export default class TimeSlider {
}
selectedIndex(index) {
- this._selectedIndex = index || this._manuallySelectedIndex;
+ this._selectedIndex = index;
this.render();
return this;
}
diff --git a/web/src/components/tooltip.js b/web/src/components/tooltip.js
index 03154a9e58..81e5ab548a 100644
--- a/web/src/components/tooltip.js
+++ b/web/src/components/tooltip.js
@@ -10,7 +10,7 @@ function placeTooltip(selector, eventX, eventY) {
const tooltip = d3.select(selector);
const w = tooltip.node().getBoundingClientRect().width;
const h = tooltip.node().getBoundingClientRect().height;
- const margin = 7;
+ const margin = 16;
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
diff --git a/web/src/helpers/scales.js b/web/src/helpers/scales.js
index 1e5b1bbcb2..e29d974e6f 100644
--- a/web/src/helpers/scales.js
+++ b/web/src/helpers/scales.js
@@ -1,3 +1,5 @@
+// TODO: Merge themes and scales
+
const d3 = Object.assign(
{},
require('d3-array'),
@@ -38,29 +40,16 @@ const solarRange = d3.range(10).map((i) => {
const a = d3.interpolate(minSolarDayOpacity, maxSolarDayOpacity)(i / (10 - 1));
return `rgba(${c}, ${c}, ${c}, ${a})`;
});
-// Insert the night (DWSWRF \in [0, minDayDSWRF]) domain
-// solarDomain.splice(0, 0, 0);
-// solarRange.splice(0, 0, 'rgba(0, 0, 0, ' + nightOpacity + ')');
-// Create scale
+
const solarColor = d3.scaleLinear()
.domain(solarDomain)
.range(solarRange)
.clamp(true);
-
// ** CO2
const maxCo2 = 800;
-const colorBlindCo2Color = d3.scaleSequential(d3.interpolateMagma)
- .domain([2000, 0])
- .clamp(true);
-const classicalCo2Color = d3.scaleLinear()
- .domain([0, 375, 725, maxCo2])
- .range(['green', 'orange', 'rgb(26,13,0)'])
- .clamp(true);
module.exports = {
- colorBlindCo2Color,
- classicalCo2Color,
maxCo2,
maxSolarDSWRF,
solarColor,
diff --git a/web/src/helpers/themes.js b/web/src/helpers/themes.js
new file mode 100644
index 0000000000..28cc8f13bf
--- /dev/null
+++ b/web/src/helpers/themes.js
@@ -0,0 +1,36 @@
+const themes = {
+ co2Scale: {
+ steps: [0, 150, 600, 750],
+ colors: ['#2AA364', '#F5EB4D', '#9E293E', '#1B0E01'],
+ },
+ colorblindScale: {
+ steps: [0, 150, 600, 750],
+ colors: ['#FCFAC4', '#FAB484', '#F57965', '#DA4D6B'],
+ },
+ dark: {
+ co2Scale: {
+ steps: [0, 150, 600, 750],
+ colors: ['#2AA364', '#F5EB4D', '#9E293E', '#1B0E01'],
+ },
+ oceanColor: '#33414A',
+ strokeWidth: 0.3,
+ strokeColor: '#6D6D6D',
+ clickableFill: '#7A878D',
+ nonClickableFill: '#7A878D',
+ },
+ bright: {
+ co2Scale: {
+ steps: [0, 150, 600, 750],
+ colors: ['#2AA364', '#F5EB4D', '#9E293E', '#1B0E01'],
+ },
+ oceanColor: '#FAFAFA',
+ strokeWidth: 0.3,
+ strokeColor: '#FAFAFA',
+ clickableFill: '#D4D9DE',
+ nonClickableFill: '#D4D9DE',
+ },
+};
+
+module.exports = {
+ themes,
+};
diff --git a/web/src/helpers/tooltip.js b/web/src/helpers/tooltip.js
index 8eba6cecbb..3c48e4546c 100644
--- a/web/src/helpers/tooltip.js
+++ b/web/src/helpers/tooltip.js
@@ -169,7 +169,7 @@ module.exports.showExchange = function showExchange(tooltipInstance, key, countr
tooltipInstance.show();
};
-module.exports.showMapCountry = function showMapCountry(tooltipInstance, countryData, co2color, co2Colorbars) {
+module.exports.showMapCountry = function showMapCountry(tooltipInstance, countryData, co2color, co2Colorbars, lowCarbonGauge, renewableGauge) {
if (countryData.co2intensity && co2Colorbars) {
co2Colorbars.forEach((c) => { c.currentMarker(countryData.co2intensity); });
}
@@ -180,20 +180,28 @@ module.exports.showMapCountry = function showMapCountry(tooltipInstance, country
.text(translation.getFullZoneName(countryData.countryCode))
.style('font-weight', 'bold');
- if (countryData.hasParser) {
+ if (countryData.hasParser && lowCarbonGauge && renewableGauge) {
tooltip.select('.emission-rect')
.style('background-color', countryData.co2intensity ? co2color(countryData.co2intensity) : 'gray');
tooltip.select('.country-emission-intensity')
.text(Math.round(countryData.co2intensity) || '?');
const hasFossilFuelData = countryData.fossilFuelRatio !== undefined || countryData.fossilFuelRatio !== null;
- const fossilFuelPercent = countryData.fossilFuelRatio * 100;
- tooltip.select('.lowcarbon-percentage')
- .text(hasFossilFuelData ? Math.round(100 - fossilFuelPercent) : '?');
+ if (hasFossilFuelData) {
+ const fossilFuelPercent = countryData.fossilFuelRatio * 100;
+ lowCarbonGauge.setPercentage(Math.round(100 - fossilFuelPercent));
+ tooltip.select('.lowcarbon-percentage').text(Math.round(100 - fossilFuelPercent));
+ } else {
+ tooltip.select('.lowcarbon-percentage').text('?');
+ }
const hasRenewableData = countryData.renewableRatio !== undefined || countryData.renewableRatio !== null;
- const renewablePercent = countryData.renewableRatio * 100;
- tooltip.select('.renewable-percentage')
- .text(hasRenewableData ? Math.round(renewablePercent) : '?');
+ if (hasRenewableData) {
+ const renewablePercent = countryData.renewableRatio * 100;
+ renewableGauge.setPercentage(Math.round(renewablePercent));
+ tooltip.select('.renewable-percentage').text(Math.round(renewablePercent));
+ } else {
+ tooltip.select('.renewable-percentage').text('?');
+ }
}
tooltip.select('.zone-details').style('display', countryData.hasParser && countryData.co2intensity ? 'block' : 'none');
tooltip.select('.temporary-outage-text').style('display', countryData.hasParser && !countryData.co2intensity ? 'block' : 'none');
diff --git a/web/src/helpers/windy.js b/web/src/helpers/windy.js
index 85118d54ce..af40e9573b 100644
--- a/web/src/helpers/windy.js
+++ b/web/src/helpers/windy.js
@@ -320,17 +320,27 @@ var Windy = function( params ){
"rgba(" + hexToR('#fb4f17') + ", " + hexToG('#fb4f17') + ", " + hexToB('#fb4f17') + ", " + 0.5 + ")",
"rgba(" + hexToR('#fe3705') + ", " + hexToG('#fe3705') + ", " + hexToB('#fe3705') + ", " + 0.5 + ")",
"rgba(" + hexToR('#ff0000') + ", " + hexToG('#ff0000') + ", " + hexToB('#ff0000') + ", " + 0.5 + ")"
- */
- "rgba(" + hexToR('#00ffff') + ", " + hexToG('#00ffff') + ", " + hexToB('#00ffff') + ", " + 0.1 + ")",
- "rgba(" + hexToR('#64f0ff') + ", " + hexToG('#64f0ff') + ", " + hexToB('#64f0ff') + ", " + 0.2 + ")",
- "rgba(" + hexToR('#87e1ff') + ", " + hexToG('#87e1ff') + ", " + hexToB('#87e1ff') + ", " + 0.3 + ")",
- "rgba(" + hexToR('#a0d0ff') + ", " + hexToG('#a0d0ff') + ", " + hexToB('#a0d0ff') + ", " + 0.5 + ")",
- "rgba(" + hexToR('#b5c0ff') + ", " + hexToG('#b5c0ff') + ", " + hexToB('#b5c0ff') + ", " + 0.6 + ")",
- "rgba(" + hexToR('#c6adff') + ", " + hexToG('#c6adff') + ", " + hexToB('#c6adff') + ", " + 1.0 + ")",
- "rgba(" + hexToR('#d49bff') + ", " + hexToG('#d49bff') + ", " + hexToB('#d49bff') + ", " + 1.0 + ")",
- "rgba(" + hexToR('#e185ff') + ", " + hexToG('#e185ff') + ", " + hexToB('#e185ff') + ", " + 1.0 + ")",
- "rgba(" + hexToR('#ec6dff') + ", " + hexToG('#ec6dff') + ", " + hexToB('#ec6dff') + ", " + 1.0 + ")",
- "rgba(" + hexToR('#ff1edb') + ", " + hexToG('#ff1edb') + ", " + hexToB('#ff1edb') + ", " + 1.0 + ")"
+ // */
+ // "rgba(" + hexToR('#00ffff') + ", " + hexToG('#00ffff') + ", " + hexToB('#00ffff') + ", " + 0.1 + ")",
+ // "rgba(" + hexToR('#64f0ff') + ", " + hexToG('#64f0ff') + ", " + hexToB('#64f0ff') + ", " + 0.2 + ")",
+ // "rgba(" + hexToR('#87e1ff') + ", " + hexToG('#87e1ff') + ", " + hexToB('#87e1ff') + ", " + 0.3 + ")",
+ // "rgba(" + hexToR('#a0d0ff') + ", " + hexToG('#a0d0ff') + ", " + hexToB('#a0d0ff') + ", " + 0.5 + ")",
+ // "rgba(" + hexToR('#b5c0ff') + ", " + hexToG('#b5c0ff') + ", " + hexToB('#b5c0ff') + ", " + 0.6 + ")",
+ // "rgba(" + hexToR('#c6adff') + ", " + hexToG('#c6adff') + ", " + hexToB('#c6adff') + ", " + 1.0 + ")",
+ // "rgba(" + hexToR('#d49bff') + ", " + hexToG('#d49bff') + ", " + hexToB('#d49bff') + ", " + 1.0 + ")",
+ // "rgba(" + hexToR('#e185ff') + ", " + hexToG('#e185ff') + ", " + hexToB('#e185ff') + ", " + 1.0 + ")",
+ // "rgba(" + hexToR('#ec6dff') + ", " + hexToG('#ec6dff') + ", " + hexToB('#ec6dff') + ", " + 1.0 + ")",
+ // "rgba(" + hexToR('#ff1edb') + ", " + hexToG('#ff1edb') + ", " + hexToB('#ff1edb') + ", " + 1.0 + ")"
+ 'rgba(0, 255, 255, 1.0)',
+ 'rgba(100, 240, 255, 1.0)',
+ 'rgba(135, 225, 255, 1.0)',
+ 'rgba(160, 208, 255, 1.0)',
+ 'rgba(181, 192, 255, 1.0)',
+ 'rgba(198, 173, 255, 1.0)',
+ 'rgba(212, 155, 255, 1.0)',
+ 'rgba(225, 133, 255, 1.0)',
+ 'rgba(236, 109, 255, 1.0)',
+ 'rgba(255, 30, 219, 1.0)'
]
/*
var result = [];
diff --git a/web/src/main.js b/web/src/main.js
index 0306b3a116..a6f9d98b40 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -21,6 +21,8 @@ const d3 = Object.assign(
require('d3-request'),
require('d3-scale'),
require('d3-selection'),
+ require('d3-scale-chromatic'),
+ require('d3-interpolate'),
);
const Cookies = require('js-cookie');
const moment = require('moment');
@@ -53,6 +55,7 @@ const HistoryState = require('./helpers/historystate');
const scales = require('./helpers/scales');
const tooltipHelper = require('./helpers/tooltip');
const translation = require('./helpers/translation');
+const themes = require('./helpers/themes').themes;
const getSymbolFromCurrency = require('currency-symbol-map');
@@ -107,6 +110,9 @@ let windLayer;
let solarLayer;
let onboardingModal;
+// Set standard theme
+let theme = themes.bright;
+
// ** Create components
const countryTable = new CountryTable('.country-table-container', modeColor, modeOrder);
const countryHistoryCarbonGraph = new LineGraph(
@@ -131,6 +137,8 @@ const priceTooltip = new Tooltip('#price-tooltip');
const countryLowCarbonGauge = new CircularGauge('country-lowcarbon-gauge');
const countryRenewableGauge = new CircularGauge('country-renewable-gauge');
+const tooltipLowCarbonGauge = new CircularGauge('tooltip-country-lowcarbon-gauge');
+const tooltipRenewableGauge = new CircularGauge('tooltip-country-renewable-gauge');
const contributorList = new ContributorList('.contributors');
const windColorbar = new HorizontalColorbar('.wind-potential-bar', scales.windColor)
@@ -236,9 +244,15 @@ let co2color;
let co2Colorbars;
function updateCo2Scale() {
if (getState().application.colorBlindModeEnabled) {
- co2color = scales.colorBlindCo2Color;
+ co2color = d3.scaleLinear()
+ .domain(themes.colorblindScale.steps)
+ .range(themes.colorblindScale.colors)
+ .clamp(true);
} else {
- co2color = scales.classicalCo2Color;
+ co2color = d3.scaleLinear()
+ .domain(themes.co2Scale.steps)
+ .range(themes.co2Scale.colors)
+ .clamp(true);
}
co2color.clamp(true);
@@ -247,7 +261,7 @@ function updateCo2Scale() {
.markerColor('white')
.domain([0, scales.maxCo2])
.render());
- if (typeof zoneMap !== 'undefined') zoneMap.setCo2color(co2color);
+ if (typeof zoneMap !== 'undefined') zoneMap.setCo2color(co2color, theme);
if (countryTable) countryTable.co2color(co2color).render();
if (countryHistoryCarbonGraph) countryHistoryCarbonGraph.yColorScale(co2color);
if (countryHistoryMixGraph) countryHistoryMixGraph.co2color(co2color);
@@ -263,7 +277,7 @@ d3.select('#checkbox-colorblind').on('change', () => {
// Start initialising map
try {
- zoneMap = new ZoneMap('zones', { zoom: 1.5 })
+ zoneMap = new ZoneMap('zones', { zoom: 1.5, theme })
.setCo2color(co2color)
.onDragEnd(() => {
// Somehow there is a drag event sent before the map data is loaded.
@@ -569,11 +583,11 @@ function dataLoaded(err, clientVersion, callerLocation, state, argSolar, argWind
// Assign country map data
zoneMap
.onCountryMouseOver((d) => {
- tooltipHelper.showMapCountry(countryTooltip, d, co2color, co2Colorbars);
+ tooltipHelper.showMapCountry(countryTooltip, d, co2color, co2Colorbars, tooltipLowCarbonGauge, tooltipRenewableGauge);
})
.onZoneMouseMove((d, i, clientX, clientY) => {
// TODO: Check that i changed before calling showMapCountry
- tooltipHelper.showMapCountry(countryTooltip, d, co2color, co2Colorbars);
+ tooltipHelper.showMapCountry(countryTooltip, d, co2color, co2Colorbars, tooltipLowCarbonGauge, tooltipRenewableGauge);
const rect = node.getBoundingClientRect();
countryTooltip.update(clientX + rect.left, clientY + rect.top);
})
@@ -697,7 +711,30 @@ window.retryFetch = () => {
// Declare and attach all event handlers that will
// cause events to be emitted
+// BrightMode
+const electricityMapHeader = d3.select('#header-content');
+const tmrowWatermark = d3.select('#watermark');
+
+function toggleBright() {
+ dispatchApplication('brightModeEnabled', !getState().application.brightModeEnabled);
+ electricityMapHeader.classed('brightmode', !electricityMapHeader.classed('brightmode'));
+ tmrowWatermark.classed('brightmode', !tmrowWatermark.classed('brightmode'));
+}
+d3.select('.brightmode-button').on('click', toggleBright);
+
+const brightModeButtonTooltip = d3.select('#brightmode-layer-button-tooltip');
+
+if (!getState().application.isMobile) {
+ // Mouseovers will trigger on click on mobile and is therefore only set on desktop
+ d3.select('.brightmode-button').on('mouseover', () => {
+ brightModeButtonTooltip.classed('hidden', false);
+
+ });
+ d3.select('.brightmode-button').on('mouseout', () => {
+ brightModeButtonTooltip.classed('hidden', true);
+ });
+}
// Wind
function toggleWind() {
@@ -738,6 +775,7 @@ if (!getState().application.isMobile) {
});
}
+
// Legend
function toggleLegend() {
dispatchApplication('legendVisible', !getState().application.legendVisible);
@@ -1034,7 +1072,7 @@ function renderHistory(state) {
.co2ScaleDomain([lo_emission, hi_emission]);
if (g === countryHistoryCarbonGraph) {
- tooltipHelper.showMapCountry(countryTooltip, d, co2color, co2Colorbars);
+ tooltipHelper.showMapCountry(countryTooltip, d, co2color, co2Colorbars, tooltipLowCarbonGauge, tooltipRenewableGauge);
countryTooltip.update(
currentEvent.clientX - 7,
g.rootElement.node().getBoundingClientRect().top - 7);
@@ -1073,7 +1111,7 @@ function renderHistory(state) {
function renderLeftPanelCollapseButton(state) {
const { isLeftPanelCollapsed } = state.application;
d3.select('.left-panel')
- .style('display', isLeftPanelCollapsed ? 'none' : undefined);
+ .classed('collapsed', isLeftPanelCollapsed);
d3.select('#left-panel-collapse-button')
.classed('collapsed', isLeftPanelCollapsed)
if (typeof zoneMap !== 'undefined') {
@@ -1165,6 +1203,10 @@ function centerOnZoneName(state, zoneName, zoomLevel) {
if (zoomLevel) {
// Remember to set center and zoom in case the map wasn't loaded yet
zoneMap.setZoom(zoomLevel);
+ // If the panel is open the zoom doesn't appear perfectly centered because
+ // it centers on the whole window and not just the visible map part.
+ // something one could fix in the future. It's tricky because one has to project, unproject
+ // and project again taking both starting and ending zoomlevel into account
zoneMap.map.easeTo({ center: [lon, lat], zoom: zoomLevel });
}
}
@@ -1241,6 +1283,20 @@ observe(state => state.application.colorBlindModeEnabled, (colorBlindModeEnabled
Cookies.set('colorBlindModeEnabled', colorBlindModeEnabled);
updateCo2Scale();
});
+
+// Observe for bright mode changes
+observe(state => state.application.brightModeEnabled, (brightModeEnabled) => {
+ d3.selectAll('.brightmode-button').classed('active', brightModeEnabled);
+ Cookies.set('brightdModeEnabled', brightModeEnabled);
+ // update Theme
+ if (getState().application.brightModeEnabled) {
+ theme = themes.bright;
+ } else {
+ theme = themes.dark;
+ }
+ if (typeof zoneMap !== 'undefined') zoneMap.setTheme(theme);
+});
+
// Observe for solar settings change
observe(state => state.application.solarEnabled, (solarEnabled, state) => {
d3.selectAll('.solar-button').classed('active', solarEnabled);
diff --git a/web/src/reducers/index.js b/web/src/reducers/index.js
index bbbfc577e1..0dbb28a5b5 100644
--- a/web/src/reducers/index.js
+++ b/web/src/reducers/index.js
@@ -12,6 +12,7 @@ const initialApplicationState = {
callerLocation: null,
clientType: window.isCordova ? 'mobileapp' : 'web',
colorBlindModeEnabled: Cookies.get('colorBlindModeEnabled') === 'true' || false,
+ brightModeEnabled: Cookies.get('brightModeEnabled') === 'true' || true,
customDate: null,
isCordova: window.isCordova,
isEmbedded: window.top !== window.self,
diff --git a/web/src/services/loadingservice.js b/web/src/services/loadingservice.js
index 09f744bd4b..0aea1d10ee 100644
--- a/web/src/services/loadingservice.js
+++ b/web/src/services/loadingservice.js
@@ -14,7 +14,7 @@ exports.startLoading = (selector) => {
d3.selectAll(selector)
.style('display', null)
.transition()
- .style('opacity', 0.8);
+ .style('opacity', 1);
}
stack[selector].push(undefined);
};
diff --git a/web/src/styles.css b/web/src/styles.css
index c7cc4fa7aa..1fa166b983 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -7,7 +7,7 @@
a {
text-decoration: none;
- color: lightblue;
+ color: #4178AC;
}
a:hover {
cursor: pointer;
@@ -18,12 +18,12 @@ html, body {
margin: 0 !important;
padding: 0 !important;
font-family: "Open Sans", sans-serif;
- background-color: #32414c; /* water color */
+ transition: background-color 800ms;
}
hr {
- background-color: gray;
- color: gray;
+ background-color: #F3F3F3;
+ color: #F3F3F3;
border: none;
height: 1px;
}
@@ -78,32 +78,48 @@ line, path {
vertical-align: bottom;
text-align: right;
}
-.loading {
- background: rgb(70, 70, 70) url('../images/loading.svg') no-repeat center center;
+
+#loading.loading.overlay {
+ /* That's the main loading overlay */
+ background-image: url('../images/loading/loading64_FA.gif'), url('../images/loading/electricitymap-text.svg');
+ background-position: calc(50% - 64px) center , center center;
+ background-repeat: no-repeat, no-repeat;
+ background-size: 36px , 10rem;
+ background-color: #FAFAFA;
+ width: 100%;
+ height: 100%;
+ display: inline-block;
+ position: fixed;
+ top: 0;
+ z-index: 500;
+}
+
+.left-panel .loading{
+ background: #FAFAFA url('../images/loading/loading64_FA.gif') no-repeat center center;
background-size: 100%;
width: 1em;
height: 1em;
display: inline-block;
}
-.overlay {
+
+.left-panel .overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
- z-index: 500;
-}
-#loading {
- /* That's the main loading overlay */
- background-size: 10rem;
+ z-index: 3;
}
-.country-panel {
- overflow-y: scroll;
- margin-bottom: 60px; /* Height of time slider */
- padding: 1rem;
+.country-panel{
+ overflow-y: auto;
+ padding-right: calc(2rem - 6px);
+ padding-left: 2rem;
+ margin: 0;
+ -webkit-overflow-scrolling: touch;
}
.country-panel-wrap {
position: relative;
+ padding-top: 120px;
}
.country-history .loading {
background-size: 1.7rem;
@@ -152,18 +168,20 @@ body {
/* Begin HEADER */
-#header {
- background-color: rgb(70, 70, 70);
+#header{
+ background-color: transparent;
z-index: 2;
- position: relative;
- color: lightgray;
+ position: fixed;
+ right: 0;
+ top: 10px;
+ color: #ffffff;
min-height: 50px; /* required for old Safari */
+}
- /* Shadow */
- box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
- -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
- -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
+#header.brightmode {
+ color: #000000;
}
+
#header #header-content {
display: flex;
width: 100%;
@@ -181,23 +199,59 @@ body {
-webkit-box-sizing: border-box;
}
#header #header-content a {
- color: unset;
+ color: white;
+ transition: color 0.4s;
+}
+#header #header-content.brightmode a {
+ color: black;
}
#header #header-content a:hover {
- color: orange;
+ color: #4178AC;
text-decoration: none;
}
#header-content .logo {
display: inline;
- font-family: "Catamaran", sans-serif;
+ font-family: "Open Sans", sans-serif;
+}
+
+#header-content .maintitle {
+ color: white;
+ transition: color 0.4s;
+}
+
+#header-content.brightmode .maintitle {
+ color: black;
+}
+
+#header-content .live {
+ color: white;
+ transition: color 0.4s;
}
-#header-content .logo img {
+
+#header-content.brightmode .live {
+ color: black;
+}
+
+#header-content .logo .image {
vertical-align: text-top;
}
-#header-content .logo img {
- height: 24px;
- margin-right: 0.2rem;
+#header-content .logo .image, #mobile-header .logo .image {
+ display: inline-block;
+ height: 21px;
+ width:139px;
+ margin-right: 4px;
+ margin-top:1.5px;
+}
+
+#electricitymap-logo{
+ background-image: url(../images/electricitymap-logo-white.svg);
+ background-size: cover;
+}
+
+#header-content.brightmode #electricitymap-logo, #mobile-header #electricitymap-logo{
+ background-image: url(../images/electricitymap-logo.svg);
}
+
#header-content .right-header {
display: block;
float: right;
@@ -207,10 +261,8 @@ body {
#header-content > div,
#header-content > span {
vertical-align: middle;
-}
-#header-content .maintitle {
- color: darkgray;
-}
+}
+
/* end HEADER */
@@ -239,8 +291,8 @@ body {
display: none;
}
.panel {
- background-color: rgb(70, 70, 70);
- color: lightgray;
+ background-color: #F3F3F3;
+ color: black;
font-size: 0.8rem;
}
@@ -249,27 +301,28 @@ body {
left: 24rem; /* should be same as .left-panel width */
top: 0.5rem;
position: absolute;
- background-color: rgb(70, 70, 70);
+ background-color: #FAFAFA;
width: 1.5rem;
height: 3rem;
- color: lightgray;
+ color: black;
display: flex;
flex-direction: column;
align-items: center;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
justify-content: center;
-
-
- box-shadow: 6px 0 20px rgba(0,0,0,0.3);
- -webkit-box-shadow: 6px 0 20px rgba(0,0,0,0.3);
- -moz-box-shadow: 6px 0 20px rgba(0,0,0,0.3);
- z-index: 1; /* in order to be above left-panel */
+ box-shadow: 6px 2px 10px -3px rgba(0,0,0,0.10);
+ -webkit-box-shadow: 6px 2px 10px -3px rgba(0,0,0,0.10);
+ -moz-box-shadow: 6px 2px 10px -3px rgba(0,0,0,0.10);
+ transition: transform 0.4s;
+ z-index: 2; /* in order to be above left-panel */
}
#left-panel-collapse-button:hover {
cursor: pointer;
}
#left-panel-collapse-button.collapsed {
- left: 0px;
+ transform: translate(-24rem);
}
#left-panel-collapse-button i{
@@ -283,26 +336,34 @@ body {
/* Left-panel */
.left-panel {
+ padding: 0;
width: 24rem;
- position: relative;
- overflow-y: auto;
- border-top: none;
- border-left: none;
- border-bottom: none;
- box-shadow: 0 0 20px rgba(0,0,0,0.3);
- -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.3);
- -moz-box-shadow: 0 0 20px rgba(0,0,0,0.3);
- z-index: 1;
+ height: 100vh;
+ background-color: #FAFAFA;
+ position: fixed;
+ box-shadow: 0 24px 15px rgba(0,0,0,0.2);
+ -webkit-box-shadow: 0 24px 15px rgba(0,0,0,0.2);
+ -moz-box-shadow: 0 24px 15px rgba(0,0,0,0.2);
+ z-index: 2;
display: flex;
flex-direction: column;
-
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
+ transition: transform 0.4s, box-shadow 0.4s;
+
+}
+
+.left-panel.collapsed {
+ transform: translate(-24rem);
+ box-shadow: 0 24px 15px rgba(0,0,0,0);
+ -webkit-box-shadow: 0 24px 15px rgba(0,0,0,0);
+ -moz-box-shadow: 0 24px 15px rgba(0,0,0,0);
}
+
.left-panel h1 {
line-height: 1.3;
- color: white;
+ color: black;
font-size: 1.6em;
margin: 0;
}
@@ -311,8 +372,7 @@ body {
display: block;
}
.left-panel, left-panel.text {
- color: lightgray;
- fill: lightgray;
+ color: black;
}
.left-panel .axis .tick line {
opacity: 0.3;
@@ -328,12 +388,12 @@ body {
fill: none;
opacity: 0.3;
shape-rendering: crispEdges;
- stroke: gray;
+ stroke: transparent;
}
.left-panel-toolbar,
.left-panel-zone-details-toolbar {
position: relative;
- padding: 1rem 0 0.5rem 0;
+ padding: 1rem 1.25rem 0 1.25rem;
}
.left-panel-toolbar .left-panel-toolbar-back,
#left-panel-highscore-back {
@@ -349,7 +409,7 @@ body {
cursor: pointer;
font-size: 1.3rem;
position: absolute;
- left: 10px;
+ left: 1.25rem;
}
.left-panel-toolbar .left-panel-toolbar-back:hover,
.left-panel-back-button:hover, #left-panel-highscore-back:hover {
@@ -373,6 +433,9 @@ body {
.mobile-info-tab {
padding: 1rem;
+ line-height: normal !important;
+ overflow-y:scroll;
+ -webkit-overflow-scrolling: touch;
}
.mobile-info-tab p{
@@ -383,9 +446,12 @@ body {
margin: 0.6rem 0;
}
-.left-panel-zone-details .social-buttons{
- margin-top: auto;
- margin-bottom: -6px;
+.left-panel-zone-details .detail-bottom-section{
+ padding: 0rem 1rem 1.25rem;
+}
+
+.left-panel-zone-details .detail-bottom-section .social-buttons{
+ padding: 0 1rem;
}
.info-text p{
@@ -417,7 +483,13 @@ body {
position: relative;
}
.country-table-header {
- position: relative;
+ position: absolute;
+ width:100%;
+ padding: 1rem 0 0.5rem 0;
+ position: absolute;
+ left: 0;
+ background-color: #FAFAFA;
+ z-index: 4;
}
.country-table-header-inner {
display: flex;
@@ -427,7 +499,6 @@ body {
/* Country History Graphs */
.country-history {
- color: darkgray;
position: relative;
margin-top: 1em;
}
@@ -452,7 +523,6 @@ body {
opacity: 0.7;
}
.country-history-title {
- color: lightgray;
font-size: 1.1em;
}
#country-history-carbon {
@@ -489,11 +559,11 @@ body {
font-weight: bold;
}
.emission-rect-overview {
- width: 3rem;
- height: 3rem;
+ width: 4rem;
+ height: 4rem;
display: inline-flex;
font-size: 1rem;
- border-radius: 0.125rem;
+ border-radius: 1rem;
color: #fff;
flex-direction: column;
justify-content: center;
@@ -505,11 +575,11 @@ body {
}
-.left-panel .circular-gauge .background{
- fill: #383838;
+.circular-gauge .background{
+ fill: #F3F3F3;
}
-.left-panel .circular-gauge .foreground{
+.circular-gauge .foreground{
fill: #78cde8;
}
@@ -518,8 +588,8 @@ body {
}
.left-panel .country-gauge-wrap {
- width: 54px;
- height: 54px;
+ width: 64px;
+ height: 64px;
margin-left: auto;
margin-right: auto;
}
@@ -529,6 +599,8 @@ body {
}
.country-col-headline {
+ font-size: 0.85em;
+ padding: 0.5em 0 0 0;
margin-top: auto;
margin-bottom: auto;
}
@@ -551,10 +623,10 @@ body {
display: flex;
justify-content: center;
align-items: center;
- width: 3rem;
- height: 3rem;
+ width: 4rem;
+ height: 4rem;
color: #fff;
- border-radius: 0.125rem;
+ border-radius: 1rem;
}
.country-col.country-lowcarbon-wrap .country-col-box,
.country-col.country-renewable-wrap .country-col-box {
@@ -585,21 +657,22 @@ body {
}
.country-show-emissions-wrap .menu {
font-size: smaller;
+ text-align: center;
+ padding: 0 0 0.5rem 0;
}
.country-show-emissions-wrap .menu a {
- color: darkgray;
font-size: smaller;
}
.country-show-emissions-wrap .menu a.selected {
- color: lightgray;
pointer-events: none;
+ font-weight: bold;
font-size: larger;
}
.layer-buttons-container {
position: absolute;
- right: 10px;
- top: 90px;
+ right: 16px;
+ top: 156px;
display: flex;
flex-direction: column;
}
@@ -609,9 +682,9 @@ body {
}
.layer-button {
- background-color: #fff;
- border-radius: 7px;
- box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.1);
+ background-color: #FAFAFA;
+ border-radius: 6px;
+ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
width: 35px;
height: 35px;
margin-bottom: 10px;
@@ -622,20 +695,21 @@ body {
outline: none;
box-sizing: border-box;
cursor: pointer;
+ transition: all 0.4s;
}
.layer-button:hover{
- background-color: rgb(235, 230, 230);
+ background-color: #FFFFFF;
+ box-shadow: 2px 0px 20px 0px rgba(0,0,0,0.25);
}
-
-
.wind-button{
background-image: url(../images/weather/wind.svg);
}
.wind-button.active{
background-image: url(../images/weather/wind_active.svg);
+ background-color: #FFFFFF;
}
.solar-button{
@@ -644,9 +718,36 @@ body {
.solar-button.active{
background-image: url(../images/weather/sun_active.svg);
+ background-color: #FFFFFF;
+}
+
+.brightmode-button{
+ background-image: url(../images/brightmode.svg);
+}
+
+.brightmode-button.active{
+ background-image: url(../images/brightmode_active.svg);
+ background-color: #FFFFFF;
}
/* override mapbox styling */
+.mapboxgl-ctrl-top-right {
+ top: 64px !important;
+}
+
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
+ margin-right: 16px !important;
+}
+
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group {
+ border-radius: 6px;
+ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
+}
+
+.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group:hover{
+ box-shadow: 2px 0px 20px 0px rgba(0,0,0,0.25);
+}
+
.mapboxgl-ctrl-group > button {
width: 35px !important;
height: 35px !important;
@@ -655,17 +756,22 @@ body {
.layer-button-tooltip {
position: absolute;
- left: -120px;
- width: 120px;
+ left: -168px;
+ width: 150px;
display: flex;
align-items: center;
justify-content: flex-end;
- height: 100px;
- top: -32px;
+ top: 4px;
+ visibility: visible;
+ opacity: 1;
+ transform: translateX(0px);
+ transition: opacity 0.4s, visibility 0.4s, transform 0.4s;
}
.layer-button-tooltip.hidden {
- display: none;
+ visibility: hidden;
+ opacity: 0;
+ transform: translateX(10px);
}
.layer-button-tooltip .tooltip-container {
@@ -674,20 +780,22 @@ body {
}
.layer-button-tooltip .tooltip-text {
- background-color: rgb(70, 70, 70);;
- color: lightgray;
- border-radius: 5px;
+ background-color:#FAFAFA;
+ color: black;
+ border-radius: 4px;
text-align: center;
font-size: 0.9rem;
- padding: 5px;
+ padding: 5px 10px;
+ box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
}
.layer-button-tooltip .arrow {
+ display:none;
width: 0;
height: 0;
border-style: solid;
border-width: 7.5px 0 7.5px 10px;
- border-color: transparent transparent transparent rgb(70, 70, 70);;
+ border-color: transparent transparent transparent #FAFAFA;
}
@@ -707,23 +815,22 @@ body {
.floating-legend-container {
position: absolute;
bottom: 0px;
- left: 0px;
+ right: 0px;
float: left;
- background-color: rgb(70, 70, 70); /* IE fallback color (IE does not support background opacity) */
- background-color: #00000059;
- border-radius: 7px;
+ background-color: #FAFAFA; /* IE fallback color (IE does not support background opacity) */
+ background-color: #FAFAFA;
+ border-radius: 6px;
padding: 12px 10px 10px 10px;
- margin-left: -10px;
- margin-bottom: -10px;
+ margin: 16px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.10)
}
.floating-legend-container div {
- color: lightgray;
- padding-left: 10px;
- padding-bottom: 5px;
+ color: black;
+ padding: 2px 6px 5px 6px;
font-size: 0.8rem;
}
.floating-legend-container .tick text {
- fill: lightgray;
+ fill: black;
}
.floating-legend-container .tick line,
.floating-legend-container rect.border {
@@ -733,7 +840,6 @@ body {
.floating-legend-mobile-header{
text-align: center;
font-weight: bold;
- width: 15em;
margin-bottom: 5px;
}
@@ -801,15 +907,16 @@ label[for="checkbox-colorblind"] {
.tooltip {
display: none;
- border: 1px solid grey;
- color: darkgrey;
- padding: 5px;
+ border: 1px solid lightgray;
+ background-color: #FAFAFA;
+ color: black;
+ padding: 12px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
border-radius: 5px;
-
+ box-shadow: 0 0 15px 0 rgba(0,0,0,0.15);
box-sizing: border-box;
opacity: 0;
}
@@ -821,12 +928,38 @@ label[for="checkbox-colorblind"] {
margin-bottom: 5px;
}
+#country-tooltip .country-col:not(:first-of-type) {
+ margin-left: 1.25rem;
+}
.watermark {
- position: absolute;
+ position: fixed;
bottom: 0;
- right: 0;
- padding: 18px;
+ right: 50%;
+ transform: translateX(50%);
+ padding: 12px;
+}
+
+.watermark .socialicons {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+#built-by-tomorrow{
+ display: inline-block;
+ background-image: url(../images/built-by-tomorrow-white.svg);
+ background-size: cover;
+ width: 150px;
+ height: 16px;
+}
+
+#watermark.brightmode #built-by-tomorrow{
+ background-image: url(../images/built-by-tomorrow.svg)
+}
+
+#watermark a:hover{
+ text-decoration: none;
}
div.highscore-button {
@@ -844,6 +977,7 @@ div.highscore-button:hover {
}
.left-panel-zone-list {
+ padding: 1rem;
display: flex;
flex-direction: column;
flex: 1;
@@ -852,24 +986,27 @@ div.highscore-button:hover {
.left-panel-zone-list .info-text {
flex-direction: column;
- padding: 0rem 1rem;
+ padding: 1rem 1rem 0 1rem;
}
.zone-search-bar {
- padding: 0px 1rem 0.5rem 1rem;
+ padding: 0.75rem 0.5rem 1rem 1rem;
}
.zone-search-bar input {
- background: inherit;
+ height:32px;
+ background-color: #FFFFFF;
color: inherit;
border: none;
- border-bottom: 1px solid whitesmoke;
+ border-bottom: 1px solid lightgray;
font-weight: 400;
font-size: 1rem;
width: 100%;
- padding-bottom: 0.2rem;
+ padding: 0.2rem;
font-family: inherit;
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
}
.zone-list-header {
@@ -878,17 +1015,17 @@ div.highscore-button:hover {
.left-panel .title {
font-size: 1.3rem;
- font-family: "Catamaran", sans-serif;
+ font-family: "Open Sans", sans-serif;
}
.zone-list-header .subtitle {
- font-size: 0.7rem;
- color: darkgray;
+ font-size: 0.8rem;
}
.zone-list {
overflow-y: scroll;
flex: 1;
+ -webkit-overflow-scrolling: touch;
}
.zone-list p {
margin: 0;
@@ -913,10 +1050,10 @@ div.highscore-button:hover {
}
.zone-list a:hover {
text-decoration: none;
- background: rgba(255,255,255,0.1)
+ background: rgba(255,255,255,1)
}
.zone-list a.selected {
- background-color: rgba(255,255,255,0.1);
+ background-color: rgba(255,255,255,1);
}
.zone-list .ranking {
@@ -1005,11 +1142,14 @@ div.highscore-button:hover {
#tab {
position: relative;
- background-color: rgb(70, 70, 70);
- -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
- -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
- box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.3);
- z-index: 1;
+ background-color:#FAFAFA;
+ -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
+ -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
+ box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
+ z-index: 2;
+ border-top-right-radius: 8px;
+ border-top-left-radius: 8px;
+
}
#tab-content {
display: flex;
@@ -1027,14 +1167,14 @@ div.highscore-button:hover {
font-size: 12px;
padding-bottom: 10px;
padding-top: 8px;
- font-family: "Catamaran", sans-serif;
+ font-family: "Open Sans", sans-serif;
}
#tab.nomap #tab-content .list-item.map-button,
{
display: none;
}
#tab #tab-content .list-item.active {
- color: white;
+ color: black;
font-size: 14px;
padding-top: 6px;
}
@@ -1049,7 +1189,7 @@ div.highscore-button:hover {
}
#tab #tab-content a {
- color: darkgrey;
+ color: #A9A9A9;
}
#tab #tab-content a:hover {
color: white;
@@ -1089,35 +1229,12 @@ sub {
margin-right: 0.4em;
}
-.center-header {
- margin-left: auto;
- margin-right: auto;
- font-size: 0.8rem;
-}
-
-.center-header span{
- display: none;
-}
-
-.center-header span.visible{
- display: inherit;
-}
-
-.center-header a{
- color: lightblue !important;
-}
-
-.center-header a:hover{
- text-decoration: underline !important;
-}
-
.modal-background-overlay{
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
-
z-index: 500;
zoom: 1;
filter: alpha(opacity=50);
@@ -1179,7 +1296,7 @@ sub {
}
.modal .modal-right-button.green{
- color:##009800;
+ color:#009800;
}
.modal .modal-right-button.green:hover{
@@ -1213,9 +1330,10 @@ sub {
.modal .modal-body {
flex: 1;
border-radius: 15px;
- background-color: rgb(70, 70, 70);
+ background-color: #FAFAFA;
color: white;
max-width: 700px;
+ box-shadow: 0 0 30px 0 rgba(0,0,0,0.15);
}
.modal .modal-header {
@@ -1228,6 +1346,7 @@ sub {
}
.modal .modal-text {
+ color:#000000;
font-size: 0.9rem;
line-height: 1.5rem;
padding: 25px 55px;
@@ -1259,15 +1378,15 @@ sub {
.modal .brand-text {
padding-top: 0;
line-height: 3rem;
- font-family: "Catamaran", sans-serif;
+ font-family: "Open Sans", sans-serif;
}
.mobile-watermark {
text-align: center;
margin-top: 1rem;
}
-.mobile-watermark div {
- padding-top: 0.5rem;
+.mobile-watermark > div {
+ padding: 0.5rem 0 1rem 0;
}
.no-data-overlay {
@@ -1287,19 +1406,18 @@ sub {
.no-data-overlay-background{
zoom: 1;
filter: alpha(opacity=50);
- opacity: 0.6;
- background-color: rgb(70,70,70);
+ opacity: 0.8;
+ background-color:#FAFAFA;
}
.no-data-overlay-message{
- background-color: #94824f;
+ background-color: #33414A;
color: white;
margin: 1rem;
- border: 1px solid lightgrey;
- border-radius: 5px;
- padding: 5px;
+ border-radius: 6px;
+ padding: 8px;
text-align: center;
- z-index: 600;
+ z-index: 3;
}
.no-data-overlay-message.visible, .zone-details-no-parser-message.visible{
display: block;
@@ -1307,11 +1425,10 @@ sub {
.zone-details-no-parser-message{
display: none;
- background-color: rgb(70, 70, 70);
+ background-color:#FAFAFA;
height: 100%;
width: 100%;
- position: absolute;
- padding: 0.5rem 0;
+ padding: 1rem 0;
}
.all-screens-hidden {
@@ -1368,7 +1485,7 @@ sub {
}
.faq-container .question:hover {
- color: white;
+ color: #0A263C;
}
.faq-container .question span{
@@ -1397,7 +1514,7 @@ sub {
.mobile-faq-header{
text-align: center;
font-size: 1.6rem;
- font-family: "Catamaran";
+ font-family: "Open Sans";
padding-top: 25px;
padding-bottom: 5px;
}
@@ -1407,13 +1524,13 @@ sub {
}
.zone-time-slider {
- position: absolute;
bottom: 0;
height: 62px;
- background: rgb(70, 70, 70);
+ padding-top: 0.75rem;
+ background: transparent;
width: 100%;
+ border-top: 1px solid lightgray;
text-align: center;
- box-shadow: 0 0 5px 1px rgba(0,0,0,0.3);
overflow-y: hidden;
}
@@ -1425,13 +1542,13 @@ sub {
.time-slider-axis .tick {
font-size: 12px;
+ fill:black;
}
.zone-time-slider .domain {
display: none;
}
-
.time-slider-input {
-webkit-appearance: none;
width: 95%;
@@ -1455,29 +1572,34 @@ sub {
.time-slider-input::-webkit-slider-thumb {
-webkit-appearance: none;
- border: 1px solid gray;
height: 26px;
width: 26px;
border-radius: 17px;
background: #ffffff;
cursor: pointer;
- margin-top: -12px;
+ margin-top: -8px;
+ transition: box-shadow 0.4s;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
+ border: 1px solid lightgray;
+ }
+ .time-slider-input:hover::-webkit-slider-thumb{
+ box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}
.time-slider-input::-webkit-slider-runnable-track {
width: 100%;
margin-right: 10px;
margin-left: 10px;
- height: 3px;
+ height: 12px;
+ border-radius: 4px;
cursor: pointer;
- background: lightgray;
- border-radius: 1.3px;
- border: 0.2px solid #010101;
+ background: #F3F3F3;
+ box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.10);
}
- .time-slider-input:focus::-webkit-slider-runnable-track {
+ /* .time-slider-input:focus::-webkit-slider-runnable-track {
background: white;
- }
+ } */
/* IE */
@@ -1513,21 +1635,26 @@ sub {
/* Firefox */
.time-slider-input::-moz-range-thumb {
- border: 1px solid gray;
height: 24px;
width: 24px;
border-radius: 17px;
+ border: none;
background: #ffffff;
cursor: pointer;
+ transition: box-shadow 0.4s;
+ box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
+ }
+
+ .time-slider-input:hover::-moz-range-thumb{
+ box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.15);
}
.time-slider-input::-moz-range-track {
width: 100%;
- height: 3px;
+ height: 6px;
cursor: pointer;
- background: lightgray;
- border-radius: 1.3px;
- border: 0.2px solid hsl(0, 0%, 0%);
+ background: #F3F3F3;
+ border-radius: 3px;
margin-left: 10px;
margin-right: 10px;
}
@@ -1547,6 +1674,7 @@ sub {
}
.floating-legend-container{
pointer-events: none;
+ right: 0;
}
.floating-legend-mobile-header{
display: none;
@@ -1566,6 +1694,36 @@ sub {
@media (max-width: 767px) {
#header {
min-height: 50px; /* required for old Safari */
+ left: 0;
+ top: 0;
+ z-index: 2;
+ }
+ #mobile-header{
+ min-height: 50px;
+ -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
+ -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
+ box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.10);
+ }
+ #mobile-header .header-content{
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ font-size: 1rem;
+ height: 50px;
+ padding-top: 13px;
+ padding-bottom: 13px;
+ padding-left: 15px;
+ padding-right: 15px;
+ line-height: 24px;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ }
+ #mobile-header .header-content .logo {
+ display:flex;
+ }
+ #mobile-header .header-content .right-header {
+ font-size: 0.6em;
}
#header-content .logo {
margin-right: auto;
@@ -1574,7 +1732,8 @@ sub {
display: none;
}
.left-panel {
- padding: 0 0 1rem 0;
+ position: relative;
+ height: auto;
}
.left-panel, #map-container {
width: 100%;
@@ -1582,6 +1741,27 @@ sub {
.left-panel-welcome {
display: none;
}
+ .left-panel-zone-details .detail-bottom-section{
+ padding: 0;
+ }
+ .left-panel-zone-details-toolbar {
+ position: relative;
+ padding: 1rem 1.25rem 0.5rem 1.25rem;
+ }
+ .country-panel {
+ margin: 0;
+ padding: 0 14px 0 20px;
+ }
+ .country-table-header {
+ position: relative;
+ }
+ .country-panel-wrap {
+ position: relative;
+ padding-top: 0;
+ }
+ .zone-time-slider{
+ padding-top: 4px;
+ }
#country-tooltip.country-tooltip-visible {
display: none;
}
@@ -1595,10 +1775,15 @@ sub {
display:none;
}
.floating-legend-container.mobile-collapsed{
- left: -110px;
+ right: 0;
+ width: 90px;
+ height: 18px;
+ transition: width 0.4s, height 0.4s;
+ padding: 6px 10px 10px;
}
- .floating-legend-container.mobile-collapsed .floating-legend-mobile-header span {
- margin-left: 80px;
+
+ .floating-legend-container.mobile-collapsed .floating-legend-mobile-header {
+ text-align: left;
}
.modal {
@@ -1661,12 +1846,16 @@ sub {
/* custom scrollbars in chrome*/
div::-webkit-scrollbar {
+ position: relative;
width: 6px;
}
div::-webkit-scrollbar-track-piece {
- background: #464646;
+ background: #F3f3f3;
+ border-radius: 3px;
}
+
div::-webkit-scrollbar-thumb {
- background: #888;
+ background: lightgray;
+ border-radius: 3px;
}
diff --git a/web/views/pages/index.ejs b/web/views/pages/index.ejs
index 86c2b941fa..2149b46a7a 100644
--- a/web/views/pages/index.ejs
+++ b/web/views/pages/index.ejs
@@ -7,9 +7,9 @@ co2Sub = function(str) {
-
-
-
+
+
+
@@ -21,17 +21,17 @@ co2Sub = function(str) {
-
-
-
-
+
+
+
+
- Electricity Map | <%= __('misc.maintitle') %>
+ electricityMap | <%= __('misc.maintitle') %>
@@ -56,7 +56,7 @@ co2Sub = function(str) {
-
+
@@ -101,37 +101,38 @@ co2Sub = function(str) {