Merge branch 'feature/redesign' into develop

rowers/templates/help.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Help</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_help.html' %}
 {% endblock %}

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">

rowers/templates/menu_help.html

@@ -1,4 +1,3 @@
-<h1>Help</h1>
 <ul class="cd-accordion-menu animated">
   <li id="gettingstarted">
     <a href="">

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">

rowers/templates/menu_profile.html

@@ -1,4 +1,3 @@
-<h1>Profile</h1>
 <ul class="cd-accordion-menu animated">
   <li id="manage-account">
     <a href="">

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">

rowers/templates/menu_teams.html

@@ -1,4 +1,3 @@
-<h1>Teams</h1>
 <ul class="cd-accordion-menu animated">
   <li id="manage">
     <a href="">

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">

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>

rowers/templates/redesign_analysis.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Analysis</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_analytics.html' %}
 {% endblock %}

rowers/templates/redesign_plan.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Plan</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_plan.html' %}
 {% endblock %}

rowers/templates/redesign_profile.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Profile</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_profile.html' %}
 {% endblock %}

rowers/templates/redesign_racing.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Racing</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_racing.html' %}
 {% endblock %}

rowers/templates/redesign_teams.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Teams</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_teams.html' %}
 {% endblock %}

rowers/templates/redesign_workout.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Workout</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_workout.html' %}
 {% endblock %}

rowers/templates/redesign_workouts.html

@@ -10,6 +10,10 @@
 </p>
 {% endblock %}
 
+{% block sideheader %}
+<h1>Workouts</h1>
+{% endblock %}
+
 {% block sidebar %}
 {% include 'menu_workouts.html' %}
 {% endblock %}

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 {
@@ -266,6 +276,9 @@
     grid-area: header;
     background: #ededed;
 }
+
+
+
 .main-user {
     grid-area: user;
     background: #ededed;
@@ -282,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;
@@ -300,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";
@@ -326,7 +358,7 @@
     grid-template-areas: 
     "header  header"
         "user user"
-      "nav     nav"
+      "side-header     nav"
       "sidebar content"
       "ad      footer";
   }
@@ -352,7 +384,7 @@
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
     "header header  user"
-        "nav nav  nav"
+        "side-header nav  nav"
       "sidebar     content content"
       "sidebar     content content"
       "sidebar  footer footer"

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>
   
@@ -178,27 +184,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 class="nav-active">
+          <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">
             <a href="/rowers/new_teams">
               <i class="fas fa-bullhorn"></i>&nbsp;Teams
             </a>
@@ -210,6 +216,12 @@
         {% block main %}
         {% endblock %}
       </main>
+
+      <side-header class="sideheader">
+        {% block sideheader %}
+        <h1>Workouts</h1>
+        {% endblock %}
+      </side-header>
       
       <aside class="side">
         {% block sidebar %}