Set minute step size to 5 and fix ios zoom

knutschsoft · Oct 27, 2021 · f30ac4d · f30ac4d
1 parent 928c9e1
commit f30ac4d
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 9 deletions.
diff --git a/web/assets/css/fixes/prevent-ios-input-zoom.scss 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
@@ -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
@@ -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
@@ -47,14 +47,25 @@
                             Tags
                         </b-input-group-text>
                     </b-input-group-prepend>
-                    <b-form-checkbox-group
-                        v-model="filter.wayPointTags"
-                        :options="tags"
-                        value-field="@id"
-                        text-field="name"
-                        class="pl-2 border-top border-bottom"
+                    <b-form-group
+                        v-slot="{ ariaDescribedby }"
+                        class="pl-2 border-top border-bottom mb-0"
                         @change="handleFilterChange"
-                    />
+                    >
+                        <div class="d-flex flex-wrap">
+                            <b-form-checkbox
+                                v-for="tag in tags"
+                                v-model="filter.wayPointTags"
+                                :key="tag['@id']"
+                                :value="tag['@id']"
+                                :aria-describedby="ariaDescribedby"
+                                name="tags"
+                                class="d-flex align-items-center flex-tags"
+                            >
+                                {{ tag.name }}
+                            </b-form-checkbox>
+                        </div>
+                    </b-form-group>
                     <b-input-group-append>
                         <b-button
                             @click="unsetFilterWayPointTags"

diff --git a/web/assets/js/components/Walk/WalkForm.vue b/web/assets/js/components/Walk/WalkForm.vue
@@ -66,6 +66,7 @@
                 :disabled="isLoading"
                 :state="startTimeState"
                 data-test="startTimeTime"
+                minutes-step="5"
                 locale="de"
             />
         </form-group>
@@ -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
@@ -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',