Multi-Lang Front-End selection popup not working on mobile.

alextselegidis / easyappointments

:date: Easy!Appointments - Self Hosted Appointment Scheduler

https://easyappointments.org

GNU General Public License v3.0

3.27k stars 1.25k forks source link

Multi-Lang Front-End selection popup not working on mobile. #550

Closed xcsn2005 closed 4 years ago

xcsn2005 commented 5 years ago

Version 3.3.5 of Bootstrap doesn't recognize touch events on modern displays for popups it creates. Thus, you cannot change language on mobile.

Also, Bootstrap >3.3.5 up to 4.0 has XSS security vulnerabilities due to use of "data-target" attribute in HTML code, see here : SNYK Report

I tried upgrading to latest Bootstrap 4.1.3 (which requires Popper.js), but it doesn't fit with Bootswatch Paper theme for Bootstrap 3.3.5 anymore, as the "Paper" theme has been deprecated in latest versions.

What to do?

alextselegidis commented 5 years ago

Hi @xcsn2010, I was planning to upgrade Bootstrap soon, as the new version works nicely. I'll mark this as a feature of 1.4.0 and try to integrate asap.

Alex Tselegidis, Easy!Appointments Creator
Need a customization? Contact me in person!

yrammos commented 4 years ago

@xcsn2005 if I understand correctly, a fix for this is included in my fork, TekhneeAppointments, where, additionally, the language selector is itself multilingual (displaying each option in the respective language) and supports ISO language variants (e.g. British English). I haven't submitted a PR because the changes are invasive and, frankly, not as tidy as I'd like. But the particular issue you're describing might potentially be addressed by changing:

li.language:hover {
    cursor: pointer;
    color: #005580;
}

li.language {
    cursor: pointer;
}

li.language:hover {
    color: #005580;
}

in /src/assets/css/general.css.