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 @@ + + + + brightmode_active + Created with Sketch. + + + + + + + + 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 @@ + + + + brightmode_active + Created with Sketch. + + + + + + + + \ 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 @@ + + + + Group + Created with Sketch. + + + + + + built + + by + + + + + + + + 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 @@ + + + + electricitymap + Created with Sketch. + + + + + + + + + + + + + + + + + + + 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 @@ + + + + electricitymap + Created with Sketch. + + + + + + + + + + + + + + + + + + + \ 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 @@ + + + + Page 1 + Created with Sketch. + + + + + + + + + + + + + + + + + + + \ 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) {