From 0372acbaec3ba0ed0c877f773230763b0115d7e3 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Mon, 9 Apr 2018 15:12:23 +0200
Subject: [PATCH] alternative layout of flex chart drop downs

---
 rowers/templates/flexchart3otw.html | 34 +++++++++++++++++++----------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/rowers/templates/flexchart3otw.html b/rowers/templates/flexchart3otw.html
index b53d631f..7c6180c7 100644
--- a/rowers/templates/flexchart3otw.html
+++ b/rowers/templates/flexchart3otw.html
@@ -52,10 +52,11 @@
 <div id="plotbuttons" class="grid_12 alpha">
 
 
-  <div id="x-axis" class="grid_6 alpha">
-    <div class="grid_2 alpha dropdown">
+  <div id="x-axis" class="grid_9 alpha">
+    <div class="grid_3 alpha dropdown">
       <button class="grid_2 alpha button blue small dropbtn">X-axis</button>
       <div class="dropdown-content">
+        <div style="float: left; width:67%;">
         {% for key, value in axchoicesbasic.items %}
         {% if key != 'None' %}
         <a class="button blue small alpha" href="/rowers/workout/{{ id }}/flexchart/{{ key }}/{{ yparam1 }}/{{ yparam2 }}/{{ plottype }}">{{ value }}</a>
@@ -70,6 +71,8 @@
 	<a class="button rosy small" href="/rowers/promembership">{{ value }}</a>
         {% endfor %}
 	{% endif %}
+        </div>
+        <div style="float: right; width: 33%;">
         {% if promember %}
         {% for key, value in extrametrics.items %}
         <a class="button orange small" href="/rowers/workout/{{ id }}/flexchart/{{ key }}/{{ yparam1 }}/{{ yparam2 }}/{{ plottype }}">{{ value }}</a>
@@ -79,12 +82,14 @@
         <a class="button rosy small" href="/rowers/promembership">{{ value }} (Pro)</a>
         {% endfor %}
         {% endif %}
+        </div>
       </div>
     </div>
 		
-    <div id="left-y" class="grid_2 dropdown">
+    <div id="left-y" class="grid_3 dropdown">
       <button class="grid_2 alpha button blue small dropbtn">Left</button>
       <div class="dropdown-content">
+        <div style="float: left; width:67%;">
         {% for key, value in axchoicesbasic.items %}
         {% if key not in noylist and key != 'None' %}
 	<a class="button blue small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ key }}/{{ yparam2 }}/{{ plottype }}">{{ value }}</a>
@@ -103,6 +108,8 @@
         {% endif %}
         {% endfor %}
 	{% endif %}
+        </div>
+        <div style="float: right; width:33%;">
         {% if promember %}
         {% for key, value in extrametrics.items %}
         <a class="button orange small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ key }}/{{ yparam2 }}/{{ plottype }}">{{ value }}</a>
@@ -112,12 +119,14 @@
         <a class="button rosy small" href="/rowers/promembership">{{ value }} (Pro)</a>
         {% endfor %}
         {% endif %}
+        </div>
       </div>
     </div>
     
-    <div id="right-y" class="grid_2 dropdown omega">
+    <div id="right-y" class="grid_3 dropdown omega">
       <button class="grid_2 alpha button blue small dropbtn">Right</button>
       <div class="dropdown-content">
+      <div style="float: left; width:67%;">
         {% for key, value in axchoicesbasic.items %}
         {% if key not in noylist %}
 	<a class="button blue small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ yparam1 }}/{{ key }}/{{ plottype }}">{{ value }}</a>
@@ -136,6 +145,8 @@
         {% endif %}
         {% endfor %}
 	{% endif %}
+      </div>
+      <div style="float: right; width:33%;">
         {% if promember %}
         {% for key, value in extrametrics.items %}
         <a class="button orange small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ yparam1 }}/{{ key }}/{{ plottype }}">{{ value }}</a>
@@ -145,13 +156,13 @@
         <a class="button rosy small" href="/rowers/promembership">{{ value }} (Pro)</a>
         {% endfor %}
         {% endif %}
-        
+        </div>
       </div>
     </div>
     
   </div>
 
-  <div id="y-axis" class="grid_6 omega">
+  <div id="y-axis" class="grid_3 omega">
     <div class="grid_2 alpha tooltip">
       <form enctype="multipart/form-data" action="{{ formloc }}" method="post">
         {% csrf_token %}
@@ -165,11 +176,12 @@
       </form>
       <span class="tooltiptext">If your data source allows, this will show or hide strokes taken during rest intervals.</span>
     </div>
-    <div class="grid_2">
-      <a class="button blue small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ yparam1 }}/{{ yparam2 }}/line">Line Plot</a>
-    </div>
-    <div class="grid_2 omega">
-      <a class="button blue small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ yparam1 }}/{{ yparam2 }}/scatter">Scatter Plot</a>
+    <div class="grid_1 omega">
+      {% if plottype == 'scatter' %}
+      <a class="button blue small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ yparam1 }}/{{ yparam2 }}/line">Line</a>
+    {% else %}
+      <a class="button blue small" href="/rowers/workout/{{ id }}/flexchart/{{ xparam }}/{{ yparam1 }}/{{ yparam2 }}/scatter">Scatter</a>
+      {% endif %}
     </div>
   </div>