From da44ededed023628fccd916688f26040a21a0664 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Fri, 28 Sep 2018 12:22:28 +0200
Subject: [PATCH] agegroupcp done

---
 rowers/interactiveplots.py       |  3 +-
 rowers/templates/agegroupcp.html | 51 +++++++++++---------------------
 rowers/views.py                  |  1 +
 static/css/styles2.css           | 17 +++++++++--
 4 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/rowers/interactiveplots.py b/rowers/interactiveplots.py
index 1e9c7b5d..4bfaa464 100644
--- a/rowers/interactiveplots.py
+++ b/rowers/interactiveplots.py
@@ -1484,7 +1484,8 @@ def interactive_agegroupcpchart(age,normalized=False):
     y_axis_type = 'linear'
 
     plot = Figure(plot_width=900,x_axis_type=x_axis_type)
-
+    plot.sizing_mode = 'scale_width'
+    
     plot.line('duration','fitpowerfh',source=source,
               legend='Female HW',color='blue')
     plot.line('duration','fitpowerfl',source=source,
diff --git a/rowers/templates/agegroupcp.html b/rowers/templates/agegroupcp.html
index 2bebbe61..90432591 100644
--- a/rowers/templates/agegroupcp.html
+++ b/rowers/templates/agegroupcp.html
@@ -1,47 +1,30 @@
-{% extends "base.html" %}
+{% extends "newbase.html" %}
 {% load staticfiles %}
 {% load rowerfilters %}
 
-{% block title %}Rowsandall {% endblock %}
+{% block title %}Rowsandall Age Group CP{% endblock %}
 
-{% block content %}
+{% block main %}
 
-	<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
-	<script async="true" type="text/javascript">
-    Bokeh.set_log_level("info");
-	</script>
-
-	{{ interactiveplot |safe }}
-
-    <script>
-    // Set things up to resize the plot on a window resize. You can play with
-    // the arguments of resize_width_height() to change the plot's behavior.
-    var plot_resize_setup = function () {
-        var plotid = Object.keys(Bokeh.index)[0]; // assume we have just one plot
-        var plot = Bokeh.index[plotid];
-        var plotresizer = function() {
-            // arguments: use width, use height, maintain aspect ratio
-            plot.resize_width_height(true, false, false);
-        };
-        window.addEventListener('resize', plotresizer);
-        plotresizer();
-    };
-    window.addEventListener('load', plot_resize_setup);
-    </script>
-    <style>
-    /* Need this to get the page in "desktop mode"; not having an infinite height.*/
-    html, body {height: 100%; margin:5px;}
-    </style>
+<script type="text/javascript" src="/static/js/bokeh-0.12.3.min.js"></script>
+<script async="true" type="text/javascript">
+  Bokeh.set_log_level("info");
+</script>
 
 
-<div id="workouts" class="grid_12 alpha">
+{{ interactiveplot |safe }}
 
 
-	<h1>Interactive Plot</h1>
-
+<h1>Interactive Plot</h1>
 
+<ul class="main-content">
+  <li class="grid_4">
     {{ the_div|safe }}
-
-</div>
+  </li>
+</ul>
 
 {% endblock %}
+
+{% block sidebar %}
+{% include 'menu_analytics.html' %}
+{% endblock %}
diff --git a/rowers/views.py b/rowers/views.py
index f12f0b82..80892eab 100644
--- a/rowers/views.py
+++ b/rowers/views.py
@@ -12336,6 +12336,7 @@ def agegroupcpview(request,age,normalize=0):
 
     response = render(request,'agegroupcp.html',
                       {
+                          'active': 'nav-analysis';
                           'interactiveplot':script,
                           'the_div':div,
                           }
diff --git a/static/css/styles2.css b/static/css/styles2.css
index 47803dee..05637b9c 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -378,11 +378,16 @@
 }
 
 .main-content li.grid_2 {
-    grid-column-end: span 2;
+    grid-column-end: span 1;
 }
 
+.main-content li.grid_3 {
+    grid-column-end: span 1;
+}
+
+
 .main-content li.grid_4 {
-    grid-column-end: span 4;
+    grid-column-end: span 1;
 }
 
 .main-content li img {
@@ -435,6 +440,10 @@
        grid-column-end: span 2;
    }
 
+   .main-content li.grid_3 {
+       grid-column-end: span 2;
+   }
+
    .main-content li.grid_4 {
        grid-column-end: span 2;
    }
@@ -474,6 +483,10 @@
        grid-column-end: span 2;
    }
 
+   .main-content li.grid_3 {
+       grid-column-end: span 3;
+   }
+
    .main-content li.grid_4 {
        grid-column-end: span 4;
    }