From f30ac4d21460327c43a4242d7b4a9321919fad4f Mon Sep 17 00:00:00 2001 From: robertfausk Date: Wed, 27 Oct 2021 07:08:12 +0200 Subject: [PATCH] Set minute step size to 5 and fix ios zoom --- .../css/fixes/prevent-ios-input-zoom.scss | 38 +++++++++++++++++++ web/assets/css/global.scss | 5 +++ web/assets/js/components/Changelog.vue | 12 +++++- .../js/components/Dashboard/WayPointList.vue | 25 ++++++++---- web/assets/js/components/Walk/WalkForm.vue | 2 + web/assets/js/components/WalkPrologue.vue | 3 +- 6 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 web/assets/css/fixes/prevent-ios-input-zoom.scss diff --git a/web/assets/css/fixes/prevent-ios-input-zoom.scss b/web/assets/css/fixes/prevent-ios-input-zoom.scss new file mode 100644 index 00000000..46734118 --- /dev/null +++ b/web/assets/css/fixes/prevent-ios-input-zoom.scss @@ -0,0 +1,38 @@ +/** @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/ */ + +/*** iPhone and iOS Form Input Zoom Fixes ***/ +/* Fix Input Zoom on devices older than iPhone 5: */ +@media screen and (device-aspect-ratio: 2/3) { + select, textarea, input[type="text"], input[type="password"], + input[type="datetime"], input[type="datetime-local"], + input[type="date"], input[type="month"], input[type="time"], + input[type="week"], input[type="number"], input[type="email"], + input[type="url"]{ font-size: 16px !important; } +} + +/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */ +@media screen and (device-aspect-ratio: 40/71) { + select, textarea, input[type="text"], input[type="password"], + input[type="datetime"], input[type="datetime-local"], + input[type="date"], input[type="month"], input[type="time"], + input[type="week"], input[type="number"], input[type="email"], + input[type="url"]{ font-size: 16px !important; } +} + +/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */ +@media screen and (device-aspect-ratio: 375/667) { + select, textarea, input[type="text"], input[type="password"], + input[type="datetime"], input[type="datetime-local"], + input[type="date"], input[type="month"], input[type="time"], + input[type="week"], input[type="number"], input[type="email"], + input[type="tel"], input[type="url"]{ font-size: 16px !important; } +} + +/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */ +@media screen and (device-aspect-ratio: 9/16) { + select, textarea, input[type="text"], input[type="password"], + input[type="datetime"], input[type="datetime-local"], + input[type="date"], input[type="month"], input[type="time"], + input[type="week"], input[type="number"], input[type="email"], + input[type="tel"], input[type="url"]{ font-size: 16px !important; } +} diff --git a/web/assets/css/global.scss b/web/assets/css/global.scss index 054ca318..8a43c338 100755 --- a/web/assets/css/global.scss +++ b/web/assets/css/global.scss @@ -2,12 +2,17 @@ @import '~bootstrap-vue'; @import '~font-awesome-animation/dist/font-awesome-animation.css'; @import 'bootstrap-pre-migrate'; +@import './fixes/prevent-ios-input-zoom.scss'; body { font-family: 'Source Sans Pro', sans-serif; font-size: 14px; } +.flex-tags { + flex: 1 1 160px !important; +} + .box-datetime { select { padding-right: 0; diff --git a/web/assets/js/components/Changelog.vue b/web/assets/js/components/Changelog.vue index aab0dc0f..2c729365 100755 --- a/web/assets/js/components/Changelog.vue +++ b/web/assets/js/components/Changelog.vue @@ -44,6 +44,16 @@ data: () => { return { items: [ + { + header: 'xx.10.2021', + avatarText: '🆕️🛠️', + entries: [ + 'UX-Feature: Die Autocomplete-Vorschläge für den Ort eines Wegpunktes sind nun aufsteigend alphabetisch sortiert.', + 'UX-Feature: Bei Zeiteingaben sind die Schritte bei Auswahl einer Minute von 1 auf 5 erhöht, damit der Nutzer weniger klicken muss.', + 'UX-Feature [iOS]: Das automatische Zoomen bei Klick auf ein Eingabefeld wird verhindert.', + 'Fix [iOS]: Das Wetter einer Runde hat sich nicht mit einem Klick auf den Wert "Sonne" setzen lassen. Es musste vorher ein anderer Wert ausgewählt werden.', + ], + }, { header: '18.10.2021', avatarText: '🆕️🛠️', @@ -54,7 +64,7 @@ 'Feature: Ein Admin sieht den Erstellungszeitpunkt eines Nutzers. Für bereits bestehende Nutzer ist dies der Zeitpunkt des Updates.', 'UX-Feature: Die Autocomplete-Vorschläge für den Ort eines Wegpunktes kann von einem Admin gruppenspezifisch definiert werden. Die vorherige Lösung mit allen Orten des Teams hatte zu viele Einträge und war zu unpraktikabel.', 'UX-Feature: Das Erkennen von gesetzten Filtern ist erleichtert. Buttons zum Zurücksetzen des Filters für die Runden- und Wegpunkttabelle sind standardmäßig deaktiviert und werden erst aktiv, wenn die Filterung einen Wert enthält. Der Feldname ist zusätzlich fett hinterlegt, wenn die Filterung aktiv ist.', - 'Fix: Datumsangaben sind nun alle in deutschen Format. Dies war u.a. beim Wochentag in der Wegpunktetabelle auf dem Dashboard nicht der Fall.', + 'Fix: Datumsangaben sind nun alle im deutschen Format. Dies war u.a. beim Wochentag in der Wegpunktetabelle auf dem Dashboard nicht der Fall.', 'Misc: Softwarebibliotheken geupdated.', ], }, diff --git a/web/assets/js/components/Dashboard/WayPointList.vue b/web/assets/js/components/Dashboard/WayPointList.vue index 41d8b9c2..8f62cc1d 100755 --- a/web/assets/js/components/Dashboard/WayPointList.vue +++ b/web/assets/js/components/Dashboard/WayPointList.vue @@ -47,14 +47,25 @@ Tags - + > +
+ + {{ tag.name }} + +
+ @@ -84,6 +85,7 @@ :disabled="isLoading" :state="endTimeState" data-test="endTimeTime" + minutes-step="5" class="mt-2" locale="de" /> diff --git a/web/assets/js/components/WalkPrologue.vue b/web/assets/js/components/WalkPrologue.vue index df678a9b..fc954a04 100755 --- a/web/assets/js/components/WalkPrologue.vue +++ b/web/assets/js/components/WalkPrologue.vue @@ -91,6 +91,7 @@ :disabled="isLoading" :state="startTimeState" data-test="startTimeTime" + minutes-step="5" class="mt-2" locale="de" /> @@ -172,7 +173,7 @@ }, walkId: false, isFormLoading: false, - weatherOptions: ['Sonne', 'Wolken', 'Regen', 'Schnee', 'Arschkalt'], + weatherOptions: ['', 'Sonne', 'Wolken', 'Regen', 'Schnee', 'Arschkalt'], dateLabels: { de: { labelPrevDecade: 'Vorheriges Jahrzehnt',