From 2e9ffe6660ac6b93884d231dd97a7d5d9aeae37c Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Wed, 26 Sep 2018 15:46:19 +0200
Subject: [PATCH 1/3] alternative - nav bar not extending entirely to left

---
 static/css/styles2.css | 18 ++++++++++++++----
 templates/newbase.html |  4 ++--
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/static/css/styles2.css b/static/css/styles2.css
index 75ad43ce..c7e21967 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -14,8 +14,7 @@
     }
 
     .wrapper nav {
-        padding-top: 0;
-        padding-bottom: 0;
+        padding: 0;
     }
 
     a {
@@ -30,6 +29,8 @@
         justify-content: space-between;
     }
 
+
+
     footer ul {
         list-style: none;
         display: flex;
@@ -241,6 +242,10 @@
         padding: 0.2em;
     }
 
+    nav a {
+        margin: 1em;
+    }
+    
     nav a,
     nav a i {
         color: white;
@@ -253,6 +258,11 @@
         background: white;
     }
 
+    nav li.selected {
+        color: #1c75bc;
+        background: white;
+    }        
+    
     .nav-active,
     .nav-active a,
     .nav-active a i {
@@ -326,7 +336,7 @@
     grid-template-areas: 
     "header  header"
         "user user"
-      "nav     nav"
+      "sidebar     nav"
       "sidebar content"
       "ad      footer";
   }
@@ -352,7 +362,7 @@
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
     "header header  user"
-        "nav nav  nav"
+        "sidebar nav  nav"
       "sidebar     content content"
       "sidebar     content content"
       "sidebar  footer footer"
diff --git a/templates/newbase.html b/templates/newbase.html
index d96a2335..47567cf8 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -178,12 +178,12 @@
 
       <nav class="main-nav">
         <ul>
-          <li>
+          <li> 
             <a href="/rowers/new_workouts">
               <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
             </a>
           </li>
-          <li class="nav-active">
+          <li>
             <a href="/rowers/new_racing">
               <i class="fas fa-flag-checkered"></i>&nbsp;Racing
             </a>

From 3992120f87f33fa5dacc279ba305a553e5a57f4d Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Wed, 26 Sep 2018 18:48:14 +0200
Subject: [PATCH 2/3] added side header

---
 rowers/templates/help.html              |  4 ++++
 rowers/templates/menu_analytics.html    |  1 -
 rowers/templates/menu_help.html         |  1 -
 rowers/templates/menu_plan.html         |  1 -
 rowers/templates/menu_profile.html      |  1 -
 rowers/templates/menu_racing.html       |  1 -
 rowers/templates/menu_teams.html        |  1 -
 rowers/templates/menu_workout.html      |  1 -
 rowers/templates/menu_workouts.html     |  1 -
 rowers/templates/redesign_analysis.html |  4 ++++
 rowers/templates/redesign_plan.html     |  4 ++++
 rowers/templates/redesign_profile.html  |  4 ++++
 rowers/templates/redesign_racing.html   |  4 ++++
 rowers/templates/redesign_teams.html    |  4 ++++
 rowers/templates/redesign_workout.html  |  4 ++++
 rowers/templates/redesign_workouts.html |  4 ++++
 static/css/styles2.css                  | 30 +++++++++++++++++++++----
 templates/newbase.html                  | 16 ++++++++-----
 18 files changed, 69 insertions(+), 17 deletions(-)

diff --git a/rowers/templates/help.html b/rowers/templates/help.html
index d3e3f858..70c97ca2 100644
--- a/rowers/templates/help.html
+++ b/rowers/templates/help.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Help</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_help.html' %}
 {% endblock %}
diff --git a/rowers/templates/menu_analytics.html b/rowers/templates/menu_analytics.html
index cd6a3911..a1938f12 100644
--- a/rowers/templates/menu_analytics.html
+++ b/rowers/templates/menu_analytics.html
@@ -1,4 +1,3 @@
-<h1>Analysis</h1>
 <ul class="cd-accordion-menu animated">
   <li class="has-children" id="fitness">
     <input type="checkbox" name="group-fitness" id="group-fitness">
diff --git a/rowers/templates/menu_help.html b/rowers/templates/menu_help.html
index c7017f7e..b47e0471 100644
--- a/rowers/templates/menu_help.html
+++ b/rowers/templates/menu_help.html
@@ -1,4 +1,3 @@
-<h1>Help</h1>
 <ul class="cd-accordion-menu animated">
   <li id="gettingstarted">
     <a href="">
diff --git a/rowers/templates/menu_plan.html b/rowers/templates/menu_plan.html
index d70323af..fe972e5d 100644
--- a/rowers/templates/menu_plan.html
+++ b/rowers/templates/menu_plan.html
@@ -1,4 +1,3 @@
-<h1>Plan</h1>
 <ul class="cd-accordion-menu animated">
   <li class="has-children" id="sessions">
     <input type="checkbox" name="group-sessions" id="group-sessions">
diff --git a/rowers/templates/menu_profile.html b/rowers/templates/menu_profile.html
index 91c63029..7744eea6 100644
--- a/rowers/templates/menu_profile.html
+++ b/rowers/templates/menu_profile.html
@@ -1,4 +1,3 @@
-<h1>Profile</h1>
 <ul class="cd-accordion-menu animated">
   <li id="manage-account">
     <a href="">
diff --git a/rowers/templates/menu_racing.html b/rowers/templates/menu_racing.html
index 547258db..4c8f50fe 100644
--- a/rowers/templates/menu_racing.html
+++ b/rowers/templates/menu_racing.html
@@ -1,4 +1,3 @@
-<h1>Racing</h1>
 <ul class="cd-accordion-menu animated">
   <li id="races-list">
     <a href="#0">
diff --git a/rowers/templates/menu_teams.html b/rowers/templates/menu_teams.html
index d6c62fc8..e03b0f23 100644
--- a/rowers/templates/menu_teams.html
+++ b/rowers/templates/menu_teams.html
@@ -1,4 +1,3 @@
-<h1>Teams</h1>
 <ul class="cd-accordion-menu animated">
   <li id="manage">
     <a href="">
diff --git a/rowers/templates/menu_workout.html b/rowers/templates/menu_workout.html
index 1f3b8b3f..d53774b7 100644
--- a/rowers/templates/menu_workout.html
+++ b/rowers/templates/menu_workout.html
@@ -1,4 +1,3 @@
-<h1>Workout</h1>
 <ul class="cd-accordion-menu animated">
   <li class="has-children" id="workout">
     <input type="checkbox" name="group-workout" id="group-workout">
diff --git a/rowers/templates/menu_workouts.html b/rowers/templates/menu_workouts.html
index 99fc269b..dff2a0a3 100644
--- a/rowers/templates/menu_workouts.html
+++ b/rowers/templates/menu_workouts.html
@@ -1,4 +1,3 @@
-<h1>Workouts</h1>
 <ul class="cd-accordion-menu animated">
   <li id="workouts-list">
     <a href="#0"><i class="fas fa-clipboard-list fa-fw"></i>&nbsp;Workouts List</a>
diff --git a/rowers/templates/redesign_analysis.html b/rowers/templates/redesign_analysis.html
index 7fc572de..c56a97e6 100644
--- a/rowers/templates/redesign_analysis.html
+++ b/rowers/templates/redesign_analysis.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Analysis</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_analytics.html' %}
 {% endblock %}
diff --git a/rowers/templates/redesign_plan.html b/rowers/templates/redesign_plan.html
index 4ac81a70..0e220b9f 100644
--- a/rowers/templates/redesign_plan.html
+++ b/rowers/templates/redesign_plan.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Plan</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_plan.html' %}
 {% endblock %}
diff --git a/rowers/templates/redesign_profile.html b/rowers/templates/redesign_profile.html
index 896712fa..b0bd1d10 100644
--- a/rowers/templates/redesign_profile.html
+++ b/rowers/templates/redesign_profile.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Profile</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_profile.html' %}
 {% endblock %}
diff --git a/rowers/templates/redesign_racing.html b/rowers/templates/redesign_racing.html
index a5f72774..62d74bca 100644
--- a/rowers/templates/redesign_racing.html
+++ b/rowers/templates/redesign_racing.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Racing</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_racing.html' %}
 {% endblock %}
diff --git a/rowers/templates/redesign_teams.html b/rowers/templates/redesign_teams.html
index 46e03a4b..228e84a9 100644
--- a/rowers/templates/redesign_teams.html
+++ b/rowers/templates/redesign_teams.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Teams</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_teams.html' %}
 {% endblock %}
diff --git a/rowers/templates/redesign_workout.html b/rowers/templates/redesign_workout.html
index 96b24cb4..0b664c15 100644
--- a/rowers/templates/redesign_workout.html
+++ b/rowers/templates/redesign_workout.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Workout</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_workout.html' %}
 {% endblock %}
diff --git a/rowers/templates/redesign_workouts.html b/rowers/templates/redesign_workouts.html
index 79779d35..c898af67 100644
--- a/rowers/templates/redesign_workouts.html
+++ b/rowers/templates/redesign_workouts.html
@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Workouts</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_workouts.html' %}
 {% endblock %}
diff --git a/static/css/styles2.css b/static/css/styles2.css
index c7e21967..4f4792ab 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -276,6 +276,9 @@
     grid-area: header;
     background: #ededed;
 }
+
+
+
 .main-user {
     grid-area: user;
     background: #ededed;
@@ -292,9 +295,27 @@
 .side {
   grid-area: sidebar;
   background: #35383d;
+  border-top: 1px solid #dddddd;
   padding: 0;
 }
 
+.sideheader {
+    grid-area: side-header;
+    background: #35383d;
+    padding: 0;
+}
+
+.sideheader h1 {
+    font-weight: bold;
+    text-align: left;
+    font-size: 1.4em;
+    color: #dddddd;
+    padding: 5px;
+    margin: 0;
+    margin-left: 30px;
+    padding-bottom: 0;
+}
+
 .ad {
   grid-area: ad;
   background: #35383d;
@@ -310,11 +331,12 @@
 .wrapper {
   display: grid;
 /*  grid-gap: 2px; */
-  grid-template-areas: 
+  grid-template-areas:
   "header"
-   "user"
+      "user"
    "nav"
    "content"
+   "side-header"
    "sidebar"
    "ad"
    "footer";
@@ -336,7 +358,7 @@
     grid-template-areas: 
     "header  header"
         "user user"
-      "sidebar     nav"
+      "side-header     nav"
       "sidebar content"
       "ad      footer";
   }
@@ -362,7 +384,7 @@
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
     "header header  user"
-        "sidebar nav  nav"
+        "side-header nav  nav"
       "sidebar     content content"
       "sidebar     content content"
       "sidebar  footer footer"
diff --git a/templates/newbase.html b/templates/newbase.html
index 47567cf8..e2006e71 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -178,27 +178,27 @@
 
       <nav class="main-nav">
         <ul>
-          <li> 
+          <li id="nav-workouts"> 
             <a href="/rowers/new_workouts">
               <i class="fas fa-clipboard-list"></i>&nbsp;Workouts
             </a>
           </li>
-          <li>
+          <li id="nav-racing">
             <a href="/rowers/new_racing">
               <i class="fas fa-flag-checkered"></i>&nbsp;Racing
             </a>
           </li>
-          <li>
+          <li id="nav-analysis">
             <a href="/rowers/new_analysis">
               <i class="fas fa-analytics"></i>&nbsp;Analysis
             </a>
           </li>
-          <li>
+          <li id="nav-plan">
             <a href="/rowers/new_plan">
               <i class="fas fa-calendar-alt"></i>&nbsp;Plan
             </a>
           </li>
-          <li>
+          <li id="nav-teams" class="nav-active">
             <a href="/rowers/new_teams">
               <i class="fas fa-bullhorn"></i>&nbsp;Teams
             </a>
@@ -210,6 +210,12 @@
         {% block main %}
         {% endblock %}
       </main>
+
+      <side-header class="sideheader">
+        {% block sideheader %}
+        <h1>Workouts</h1>
+        {% endblock %}
+      </side-header>
       
       <aside class="side">
         {% block sidebar %}

From 05d3456fc34f96d2901aed16f5d501a7c8a3a837 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Wed, 26 Sep 2018 20:23:23 +0200
Subject: [PATCH 3/3] added jquery to highlight focus

uses variable {{ active }} passed to template
---
 templates/newbase.html | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/templates/newbase.html b/templates/newbase.html
index e2006e71..56ca6d26 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -113,7 +113,13 @@
     }
 });
 
-    </script> <!-- Resource jQuery -->
+    </script>
+    <script>
+      $(document).ready(function(){
+      var active = "#{{ active }}";
+      $(active).addClass("nav-active");
+      });
+      </script>
     {% analytical_head_bottom %}
   </head>
   
@@ -198,7 +204,7 @@
               <i class="fas fa-calendar-alt"></i>&nbsp;Plan
             </a>
           </li>
-          <li id="nav-teams" class="nav-active">
+          <li id="nav-teams">
             <a href="/rowers/new_teams">
               <i class="fas fa-bullhorn"></i>&nbsp;Teams
             </a>