search

BustByte / coronastatus

Anonymous crowd sourcing of COVID-19 symptoms all over the world (with public data sets)!
MIT License
173 stars 89 forks source link

Implement Flatpickr #491

Closed jinjie closed 4 years ago

jinjie commented 4 years ago

Attempt to implement Flatpickr on calendar fields.

Refer to #301

fossecode commented 4 years ago

Super nice! A couple of things to think about:

adriaandotcom commented 4 years ago

Let's just put it on our CDN. It's privacy friendly and they don't track anything.

https://cdn.coronastatus.eu. It's backed by BunnyCDN.

fossecode commented 4 years ago

Also, for each new resource we add in <head> the time before something is displayed to user increases. Some resources are not required on all pages, and we should either:

We can look at that in a separate issue, not crucial for this PR.

adriaandotcom commented 4 years ago

Added it to our CDN:

Please still use https://www.srihash.org and these attributes, just to be sure:

<script
  src="https://cdn.coronastatus.eu/libraries/..."
  integrity="sha384-..."
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<link
  rel="stylesheet"
  href="https://cdn.coronastatus.eu/libraries/..."
  integrity="sha384-..."
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
>

After your PR I can do it for other external libs as well.

jinjie commented 4 years ago
  • Should we format the date that is displayed to the user after it is selected? Seems like Flatpickr has support for this. We could just add the format to /locales/xx.json.

We should. However, need to load the respective i10n .js files for the localisation. Not very sure how I can do this.

  • Could you try to fix the input field on iOS devices? Don't know if it looks the same on Androids.

I do not have an iOS mobile device. But it looks fine on Safari for me.

I am pretty new to building a site on node... Pardon me if my skills are limited at this time 😆. I can help within my limit, but I am contributing to help and learn more about node..

fossecode commented 4 years ago
  • Should we format the date that is displayed to the user after it is selected? Seems like Flatpickr has support for this. We could just add the format to /locales/xx.json.

We should. However, need to load the respective i10n .js files for the localisation. Not very sure how I can do this.

  • Could you try to fix the input field on iOS devices? Don't know if it looks the same on Androids.

I do not have an iOS mobile device. But it looks fine on Safari for me.

I am pretty new to building a site on node... Pardon me if my skills are limited at this time 😆. I can help within my limit, but I am contributing to help and learn more about node..

Ok np, I can take a look at the iOS-date later :) You can render the date-format backend like this:

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="/static/form.js?v=<%= locals.cacheKey %>"></script>
<script>
  flatpickr(document.querySelectorAll('[type=date]'), {
    altInput: true,
    altFormat: '<%= __(`F j, Y`) %>',
    dateFormat: 'Y-m-d'
  });
</script>

Then people can change the value of 'F j, Y' as they see fit