From dee4408a616dd6b2242b3fb5a731c71b9e9d23e0 Mon Sep 17 00:00:00 2001
From: sirsandmann <florian@sander-net.de>
Date: Sun, 31 Dec 2017 13:44:46 +0100
Subject: [PATCH] Added Toggle-Btn for DriverInfo Area

---
 css/main.css |  4 ++--
 index.html   | 12 ++++++++++--
 js/main.js   | 30 +++++++++++++++++++++++++++---
 3 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/css/main.css b/css/main.css
index 4621a03..f11c582 100644
--- a/css/main.css
+++ b/css/main.css
@@ -96,11 +96,11 @@ body {
   pointer-events: all;
 }
 
-#toggle-btn{
+#toggle-btn-selection, #toggle-btn-driverinfo{
   text-align: center;
 }
 
-#icon-up-arrow{
+.icon-up-arrow{
   width: 1%;
   height: 1%;
 }
diff --git a/index.html b/index.html
index 2cb795f..8009a75 100644
--- a/index.html
+++ b/index.html
@@ -67,8 +67,8 @@
           </div> <!-- card-body -->
 
           <div class="card-footer" style="padding:0;">
-            <div id="toggle-btn">
-              <svg id="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
+            <div id="toggle-btn-selection">
+              <svg id="icon-up-arrow-selection" class="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
                 <polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
                 <polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
               </svg>
@@ -100,6 +100,14 @@
         <div class="card" id="driver-card">
           <div class="card-header">Rennteilnehmer</div>
           <div class="card-body" id="driver-infobox"><!-- Driver info box automatically filled by JS.--></div> <!-- card-body -->
+          <div class="card-footer" style="padding:0;">
+            <div id="toggle-btn-driverinfo">
+              <svg id="icon-up-arrow-driverinfo" class="icon-up-arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 120 120" xml:space="preserve" transform="rotate(-90)">
+                <polygon fill="#010101" points="102.296,59.957 42.264,119.99 25.605,103.34 85.639,43.299 "/>
+                <polygon fill="#010101" points="85.74,76.71 25.715,16.653 42.373,0.011 102.391,60.067 "/>
+              </svg>
+            </div>
+          </div> <!-- card-footer -->
         </div> <!-- card -->
 
 
diff --git a/js/main.js b/js/main.js
index c98279c..0a9e486 100644
--- a/js/main.js
+++ b/js/main.js
@@ -102,10 +102,10 @@ preprocessor.load(function(data) {
     slyelement.obj.reload();
   });
 
-  $( "#toggle-btn" ).click(function() {
+  $( "#toggle-btn-selection" ).click(function() {
     if ( $( "#selector-card .card-body" ).is( ":hidden" ) ) {
       $( "#selector-card .card-body" ).slideDown();
-      $('#icon-up-arrow').animate({  borderSpacing: 0 - 90 }, {
+      $('#icon-up-arrow-selection').animate({  borderSpacing: 0 - 90 }, {
          step: function(now,fx) {
            $(this).css('-webkit-transform','rotate('+now+'deg)');
            $(this).css('-moz-transform','rotate('+now+'deg)');
@@ -115,7 +115,31 @@ preprocessor.load(function(data) {
       },'linear');
     } else {
       $( "#selector-card .card-body" ).slideUp();
-      $('#icon-up-arrow').animate({  borderSpacing: 180 - 90 }, {
+      $('#icon-up-arrow-selection').animate({  borderSpacing: 180 - 90 }, {
+         step: function(now,fx) {
+           $(this).css('-webkit-transform','rotate('+now+'deg)');
+           $(this).css('-moz-transform','rotate('+now+'deg)');
+           $(this).css('transform','rotate('+now+'deg)');
+         },
+         duration: 150
+      },'linear');
+    }
+  });
+
+  $( "#toggle-btn-driverinfo" ).click(function() {
+    if ( $( "#driver-card .card-body" ).is( ":hidden" ) ) {
+      $( "#driver-card .card-body" ).slideDown();
+      $('#icon-up-arrow-driverinfo').animate({  borderSpacing: 0 - 90 }, {
+         step: function(now,fx) {
+           $(this).css('-webkit-transform','rotate('+now+'deg)');
+           $(this).css('-moz-transform','rotate('+now+'deg)');
+           $(this).css('transform','rotate('+now+'deg)');
+         },
+         duration: 150
+      },'linear');
+    } else {
+      $( "#driver-card .card-body" ).slideUp();
+      $('#icon-up-arrow-driverinfo').animate({  borderSpacing: 180 - 90 }, {
          step: function(now,fx) {
            $(this).css('-webkit-transform','rotate('+now+'deg)');
            $(this).css('-moz-transform','rotate('+now+'deg)');