From 661390120386c449c2eece406af2f7e87b40ec8e Mon Sep 17 00:00:00 2001
From: Tristan Eisermann <19949441+Tristan2357@users.noreply.github.com>
Date: Thu, 23 Apr 2020 17:02:26 +0200
Subject: [PATCH] TSK-1127 Changed input of Pagination to type number and
 removed usual arrows

---
 .../components/pagination/pagination.component.html  |  2 +-
 .../components/pagination/pagination.component.scss  | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/src/app/shared/components/pagination/pagination.component.html b/web/src/app/shared/components/pagination/pagination.component.html
index 4895b77ce..97fcd7f7d 100644
--- a/web/src/app/shared/components/pagination/pagination.component.html
+++ b/web/src/app/shared/components/pagination/pagination.component.html
@@ -6,7 +6,7 @@
   <li *ngFor="let pageNumber of page?.totalPages | spreadNumber: page?.number: maxPagesAvailable">
     <a *ngIf="pageNumber + 1 !== page?.number" (click)="changeToPage(pageNumber+1)">{{pageNumber + 1}}</a>
     <a *ngIf="pageNumber + 1 === page?.number" class="pagination">
-      <input [(ngModel)]="pageSelected" (keyup.enter)="changeToPage(pageSelected)" type="text" (blur)="changeToPage(pageSelected)">
+      <input [(ngModel)]="pageSelected" (keyup.enter)="changeToPage(pageSelected)" type="number" (blur)="changeToPage(pageSelected)" >
     </a>
   </li>
   <li>
diff --git a/web/src/app/shared/components/pagination/pagination.component.scss b/web/src/app/shared/components/pagination/pagination.component.scss
index 904ecb1e0..0387ee4e0 100644
--- a/web/src/app/shared/components/pagination/pagination.component.scss
+++ b/web/src/app/shared/components/pagination/pagination.component.scss
@@ -34,3 +34,15 @@ ul.pagination{
     margin: 0px 5px 0 0;
     color: $blue;
 }
+
+
+// small "hack" to remove the arrows in the input fields of type numbers
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance:textfield;
+}