From 60d483b4f777ed6f6055a89059f444f18ee9de20 Mon Sep 17 00:00:00 2001
From: Insugeny_athq <insurgency@atlantishq.de>
Date: Thu, 13 Jun 2019 22:38:12 +0200
Subject: [PATCH] scroll play to center of view when searched

---
 static/buttons.js   |  8 ++++++++
 static/site.css     |  5 +++++
 templates/base.html | 14 ++++----------
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/static/buttons.js b/static/buttons.js
index 4635def..32f6fad 100644
--- a/static/buttons.js
+++ b/static/buttons.js
@@ -1,6 +1,7 @@
 /* predefine some variables */
 var url   = new URL(window.location.href)
 var page  = url.searchParams.get("page")
+var page  = url.searchParams.get("string")
 var buttonBackward = document.getElementById("button-backward")
 var buttonForward  = document.getElementById("button-forward")
 var buttonFirst    = document.getElementById("button-first")
@@ -24,6 +25,13 @@ if(isLastPage){
     buttonForward.classList.add("disabled")
 }
 
+/* if request was a playersearch, move to player */
+targetPlayerElements = document.getElementsByClassName("targetPlayer")
+if(targetPlayerElements.length == 1){
+    scrollOptions = {beahviour: "smooth", block:"center"} 
+    targetPlayerElements[0].scrollIntoView(scrollOptions);
+}
+
 function forward(){
 
     if(page){
diff --git a/static/site.css b/static/site.css
index 7978c93..6880990 100644
--- a/static/site.css
+++ b/static/site.css
@@ -147,6 +147,11 @@ body{
     padding-bottom: 2px;
 }
 
+.targetPlayer{
+    /* overwrite background for seached player */
+    background: yellow !important;
+}
+
 .endOfBoardIndicator{
     background: red;
     text-align: center;
diff --git a/templates/base.html b/templates/base.html
index bb189c7..3685348 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -29,18 +29,12 @@
             {% for player in playerList %}
                 {% set count = loop.index + start %}
                 {% if count % 2 == 0 %}
-                <div 
-                    {% if searchName == player.name %}
-                        style="background: yellow;"
-                    {% endif %}
-                    class=line-even>{{ player.getLineHTML(count) }}
+                <div class="line-even {% if searchName == player.name %}targetPlayer{% endif %}">
+                    {{ player.getLineHTML(count) }}
                 </div>
                 {% else %}
-                <div 
-                    {% if searchName == player.name %}
-                        style="background: yellow;"
-                    {% endif %}
-                    class=line-odd>{{ player.getLineHTML(count) }}
+                <div class="line-odd {% if searchName == player.name %}targetPlayer{% endif %}">
+                    {{ player.getLineHTML(count) }}
                 </div>
                 {% endif %}
             {% endfor %}