| commit | 32538b383578dad10525fda94fb6858a18923608 | [log] [tgz] |
|---|---|---|
| author | Filip Kujawa <filip.j.kujawa@gmail.com> | Sat Oct 29 17:09:30 2022 -0700 |
| committer | Filip Kujawa <filip.j.kujawa@gmail.com> | Sat Oct 29 18:36:02 2022 -0700 |
| tree | a211caefb3f607ac28ecbf2dc6b7cce780bea489 | |
| parent | ef935acdfe04e80b7f36094da8f095417d35518d [diff] |
Scouting App: Prevent double tap zoom on counter buttons In Rapid React, teams often shoot two cargo in rapid succession so the user of the scouting app taps the increment button twice. However, this causes the app to zoom in on the button on mobile devices. This causes the user to stop watching the match to undo the zoom-in and a lot of frustration. More info on the solution can be viewed at https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation Change-Id: I5a86315bb521d401e5b5ca5959e3dd20ab330d0c Signed-off-by: Filip Kujawa <filip.j.kujawa@gmail.com>
diff --git a/scouting/www/counter_button/counter_button.component.css b/scouting/www/counter_button/counter_button.component.css index 35c1929..df95f65 100644 --- a/scouting/www/counter_button/counter_button.component.css +++ b/scouting/www/counter_button/counter_button.component.css
@@ -8,3 +8,7 @@ * { padding: 10px; } + +.no-touch-action { + touch-action: manipulation; +}
diff --git a/scouting/www/counter_button/counter_button.ng.html b/scouting/www/counter_button/counter_button.ng.html index 4abf415..3300ff2 100644 --- a/scouting/www/counter_button/counter_button.ng.html +++ b/scouting/www/counter_button/counter_button.ng.html
@@ -1,4 +1,11 @@ <h4><ng-content></ng-content></h4> -<button (click)="update(1)" class="btn btn-secondary btn-block">+</button> +<button (click)="update(1)" class="btn btn-secondary btn-block no-touch-action"> + + +</button> <h3>{{value}}</h3> -<button (click)="update(-1)" class="btn btn-secondary btn-block">-</button> +<button + (click)="update(-1)" + class="btn btn-secondary btn-block no-touch-action" +> + - +</button>