From ac46e69a108de3f79e5a72397a503268eec1b795 Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Sat, 14 Jan 2023 20:42:37 +0100 Subject: [PATCH 1/4] Make models datepicker more usable by freeing the screen and moving it above the date area --- assets/custom-functions.js | 25 +++++++++++++++++++++++++ tabs/forecast.py | 1 - 2 files changed, 25 insertions(+), 1 deletion(-) diff --git a/assets/custom-functions.js b/assets/custom-functions.js index dcf0304..1c0da4b 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -101,3 +101,28 @@ $(document).ready(function () { }); }); +// Move datepicker above the time series area +$(document).ready(function () { + $(document).on('click', "#date", function () { + const element = document.getElementsByClassName('DayPicker')[0]; + element.style.position = 'absolute'; + element.style.bottom = '78px'; + }); +}); + + +// add styling to stats table for clickable regions +$(document).ready(function () { + $(document).on('click', "#scores-apply", function () { + const elements = document.querySelectorAll('.dash-cell-value'); + const targets = ['Europe', 'Mediterranean', 'MiddleEast', 'NAfrica']; + for(i=0; i < elements.length; i++){ + if(targets.includes(elements[i].innerHTML)){ + console.log('element' + elements[i].innerHTML); + elements[i].style.textDecoration = 'underline'; + }; + }; + }); +}) + + diff --git a/tabs/forecast.py b/tabs/forecast.py index 0ac932f..b96eec0 100644 --- a/tabs/forecast.py +++ b/tabs/forecast.py @@ -134,7 +134,6 @@ time_slider = html.Div([ initial_visible_month=dt.strptime(end_date, "%Y%m%d"), display_format='DD MMM YYYY', date=end_date, - with_portal=True, ), className="timesliderline", ), -- GitLab From d141fcc351c8449eb45534cff3079ae7ca895392 Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Mon, 23 Jan 2023 16:50:58 +0100 Subject: [PATCH 2/4] Add clear button and formatting to date selector --- assets/custom-functions.js | 18 +----------------- assets/style.css | 2 ++ tabs/forecast.py | 3 +++ 3 files changed, 6 insertions(+), 17 deletions(-) diff --git a/assets/custom-functions.js b/assets/custom-functions.js index 1c0da4b..755fa74 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -103,26 +103,10 @@ $(document).ready(function () { // Move datepicker above the time series area $(document).ready(function () { - $(document).on('click', "#date", function () { + $(document).on('click', "#model-date-picker", function () { const element = document.getElementsByClassName('DayPicker')[0]; element.style.position = 'absolute'; element.style.bottom = '78px'; }); }); - -// add styling to stats table for clickable regions -$(document).ready(function () { - $(document).on('click', "#scores-apply", function () { - const elements = document.querySelectorAll('.dash-cell-value'); - const targets = ['Europe', 'Mediterranean', 'MiddleEast', 'NAfrica']; - for(i=0; i < elements.length; i++){ - if(targets.includes(elements[i].innerHTML)){ - console.log('element' + elements[i].innerHTML); - elements[i].style.textDecoration = 'underline'; - }; - }; - }); -}) - - diff --git a/assets/style.css b/assets/style.css index 829f531..26e4fde 100644 --- a/assets/style.css +++ b/assets/style.css @@ -214,6 +214,7 @@ input.DateInput_input { div.SingleDatePickerInput { border: none; + background-color: #2B383E !important; } .SingleDatePicker_picker { @@ -756,3 +757,4 @@ div.SingleDatePickerInput { position: absolute; right: 5px; } + diff --git a/tabs/forecast.py b/tabs/forecast.py index b96eec0..f2e965b 100644 --- a/tabs/forecast.py +++ b/tabs/forecast.py @@ -134,6 +134,9 @@ time_slider = html.Div([ initial_visible_month=dt.strptime(end_date, "%Y%m%d"), display_format='DD MMM YYYY', date=end_date, + clearable=True, + placeholder='DD MON YYYY', + reopen_calendar_on_clear=True, ), className="timesliderline", ), -- GitLab From 715f0f9d85a4f60701ef3fe2d0b6e91b5532fe2f Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Mon, 23 Jan 2023 17:49:04 +0100 Subject: [PATCH 3/4] Restyle and add pencil icon for date picker --- assets/style.css | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/assets/style.css b/assets/style.css index 26e4fde..2e7e7cb 100644 --- a/assets/style.css +++ b/assets/style.css @@ -226,6 +226,41 @@ div.SingleDatePickerInput { z-index: 10001; } +.SingleDatePickerInput_clearDate { + width: 34px; + height: 34px; + outline: none !important; + margin: 2px 3px 3px 5px; +} + +.SingleDatePickerInput_clearDate_svg { + visibility: hidden; + fill: white; + height: 15px; + width: 15px; + vertical-align: inherit; + margin: auto; +} + +.SingleDatePickerInput_clearDate:before { + color: white; + visibility: visible; + font-family: 'Font Awesome 5 free'; + content: "\f303"; + font-weight: 600; + vertical-align: middle; + font-size: 1em; + bottom: 4px; + position: relative; + right: 1px; +} + +.SingleDatePickerInput_clearDate:hover { + width: 34px; + height: 34px; + background-color: #F1B545 !important; +} + #was-slider-graph, #prob-slider-graph, #obs-vis-slider-graph { width: 10rem; padding: 0.4rem 35px 25px !important; -- GitLab From eea5a1de84d886487b6a707ea96759ff13567caa Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Mon, 6 Feb 2023 12:23:22 +0100 Subject: [PATCH 4/4] Add styling to all date pickers in forecast and observations --- assets/custom-functions.js | 2 +- tabs/forecast.py | 8 ++++++-- tabs/observations.py | 4 +++- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/assets/custom-functions.js b/assets/custom-functions.js index 755fa74..7c502c1 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -103,7 +103,7 @@ $(document).ready(function () { // Move datepicker above the time series area $(document).ready(function () { - $(document).on('click', "#model-date-picker", function () { + $(document).on('click', ".SingleDatePicker", function () { const element = document.getElementsByClassName('DayPicker')[0]; element.style.position = 'absolute'; element.style.bottom = '78px'; diff --git a/tabs/forecast.py b/tabs/forecast.py index f2e965b..73daf40 100644 --- a/tabs/forecast.py +++ b/tabs/forecast.py @@ -179,7 +179,9 @@ prob_time_slider = html.Div([ initial_visible_month=dt.strptime(end_date, "%Y%m%d"), display_format='DD MMM YYYY', date=end_date, - with_portal=True, + clearable=True, + placeholder='DD MON YYYY', + reopen_calendar_on_clear=True, ), className="timesliderline", ), @@ -210,7 +212,9 @@ was_time_slider = html.Div([ initial_visible_month=dt.strptime(end_date, "%Y%m%d"), display_format='DD MMM YYYY', date=end_date, - with_portal=True, + clearable=True, + placeholder='DD MON YYYY', + reopen_calendar_on_clear=True, ), className="timesliderline", ), diff --git a/tabs/observations.py b/tabs/observations.py index d182a87..0ab9580 100644 --- a/tabs/observations.py +++ b/tabs/observations.py @@ -57,7 +57,9 @@ def obs_time_slider(div='obs', start=0, end=23, step=1): display_format='DD MMM YYYY', # date=(dt.strptime(edate, "%Y%m%d") - timedelta(days=1)).strftime("%Y%m%d"), date=dt.strptime(edate, "%Y%m%d").strftime("%Y%m%d"), - with_portal=True, + clearable=True, + placeholder='DD MON YYYY', + reopen_calendar_on_clear=True, ), className="timesliderline", ) -- GitLab