From 8753e30b1d54ec9be89fcdf1a9d4cad672978f7d Mon Sep 17 00:00:00 2001
From: Gregory Trullemans <redj@MacBook-Pro-de-Gregory.local>
Date: Sun, 19 Dec 2021 21:14:04 +0100
Subject: [PATCH] Update UI

---
 templates/peoples/gymnasts/details.html              | 12 ++++++------
 templates/peoples/gymnasts/list_routine.html         | 12 ++++++++++++
 templates/peoples/gymnasts/list_scores_chronos.html  |  1 +
 .../peoples/gymnasts/physiological_followup.html     | 12 ++++++++++--
 4 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/templates/peoples/gymnasts/details.html b/templates/peoples/gymnasts/details.html
index d35cc3ce55..84ccc496c1 100644
--- a/templates/peoples/gymnasts/details.html
+++ b/templates/peoples/gymnasts/details.html
@@ -77,7 +77,7 @@
 </div>
 
 <div class="row">
-    <div class="col-12 col-sm-2 col-md-2 col-lg-1">
+    <div class="col-12 col-sm-1 col-md-1 col-lg-1 col-xl-1">
         <!--
         color-classes: "nav-pills-primary", "nav-pills-info", "nav-pills-success", "nav-pills-warning","nav-pills-danger"
         -->
@@ -85,29 +85,29 @@
 
             <li class="nav-item">
                 <a class="nav-link get-info{% if tab is None or tab == 'level' %} active{% endif %}" data-toggle="tab" href="#statistics" data-ref="#statistics" data-url="statistics/" id="display_statistics">
-                    <i class="tim-icons icon-sound-wave"></i> Level
+                    <i class="tim-icons icon-sound-wave"></i> <!-- Level -->
                 </a>
             </li>
             
             <li class="nav-item">
                 <a class="nav-link get-info{% if tab == 'routine' %} active{% endif %}" data-toggle="tab" href="#routine" data-ref="#routine" data-url="routine/" id="display_routines">
-                    <i class="tim-icons icon-components"></i> Routines
+                    <i class="tim-icons icon-components"></i> <!-- Routines -->
                 </a>
             </li>
 
             <li class="nav-item">
                 <a class="nav-link get-info{% if tab == 'scores' %} active{% endif %}" data-toggle="tab" href="#scores" data-ref="#scores" data-url="scores_chrono/" id="display_scores_chrono">
-                    <i class="fal fa-crosshairs"></i> Scores
+                    <i class="fal fa-crosshairs"></i> <!-- Scores -->
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link get-info{% if tab == 'physiological' %} active{% endif %}" data-toggle="tab" href="#physiological" data-ref="#physiological" data-url="physiological/" id="display_physiological">
-                    <i class="fal fa-stethoscope"></i> Physical
+                    <i class="fal fa-stethoscope"></i> <!-- Physical -->
                 </a>
             </li>
             <li class="nav-item">
                 <a class="nav-link get-info{% if tab == 'event' %} active{% endif %}" data-toggle="tab" href="#event" data-ref="#event" data-url="event/" id="display_event">
-                    <i class="fal fa-calendar-day"></i> Events
+                    <i class="fal fa-calendar-day"></i> <!-- Events -->
                 </a>
             </li>
         </ul>
diff --git a/templates/peoples/gymnasts/list_routine.html b/templates/peoples/gymnasts/list_routine.html
index e242a6d0ad..79c7768a9b 100644
--- a/templates/peoples/gymnasts/list_routine.html
+++ b/templates/peoples/gymnasts/list_routine.html
@@ -54,3 +54,15 @@
         </div>
     </div>
 </div>
+
+<script type="text/javascript">
+    $(document).ready(function() {
+        $('[data-sort="table"]').tablesorter({
+            headers: {
+              0: { sorter: false },      // disable first column
+            },
+            dateFormat: "uk",
+            sortList: [[2,1], ]
+        })
+    });
+</script>
diff --git a/templates/peoples/gymnasts/list_scores_chronos.html b/templates/peoples/gymnasts/list_scores_chronos.html
index 33d7f97c0e..25a14affb7 100644
--- a/templates/peoples/gymnasts/list_scores_chronos.html
+++ b/templates/peoples/gymnasts/list_scores_chronos.html
@@ -306,6 +306,7 @@
     var ctx = document.getElementById("chartjs_chrono").getContext("2d");
     var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
     var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
+    var gradient_stroke_3 = ctx.createLinearGradient(0, 230, 0, 50);
 
     gradient_stroke_1.addColorStop(1, 'rgba(75, 192, 192, 0.4)');
     gradient_stroke_1.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
diff --git a/templates/peoples/gymnasts/physiological_followup.html b/templates/peoples/gymnasts/physiological_followup.html
index d77f631897..d5f2039fdd 100644
--- a/templates/peoples/gymnasts/physiological_followup.html
+++ b/templates/peoples/gymnasts/physiological_followup.html
@@ -197,6 +197,14 @@
         },
     });
 
+    var ctx = document.getElementById("chartjs_mindstate").getContext("2d");
+    var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
+
+    gradient_stroke_1.addColorStop(1, 'rgba(75, 192, 192, 0.4)');
+    gradient_stroke_1.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
+    gradient_stroke_1.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
+    gradient_stroke_1.addColorStop(0.25, 'rgba(75, 192, 192, 0)');
+
     new Chart(document.getElementById("chartjs_mindstate"),{
         type: 'line',
         data:{
@@ -204,8 +212,8 @@
                 {% if mindstate_list %}
                 {
                     label: 'Mindstate',
-                    backgroundColor: gradientStroke_1,
-                    borderColor: 'rgb(255, 99, 132)',
+                    backgroundColor: gradient_stroke_1,
+                    borderColor: 'rgb(75, 192, 192)',
                     fill: true,
                     data: [
                         {% for state in mindstate_list %}