From 41e1870d73b3b722f16aef5d60cac519a5200176 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 27 Sep 2018 09:49:36 +0200
Subject: [PATCH 1/3] nav bar extend to left

---
 static/css/styles2.css | 24 ++++++++++++++++--------
 templates/newbase.html |  6 +++++-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/static/css/styles2.css b/static/css/styles2.css
index 4f4792ab..b14a255e 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -292,10 +292,16 @@
     grid-area: nav;
     background: #1c75bc;
 }
+
+.side-nav {
+    grid-area: side-nav;
+    background: #1c75bc;
+}    
+
 .side {
   grid-area: sidebar;
   background: #35383d;
-  border-top: 1px solid #dddddd;
+  /* border-top: 1px solid #dddddd; */
   padding: 0;
 }
 
@@ -334,7 +340,7 @@
   grid-template-areas:
   "header"
       "user"
-   "nav"
+      "nav"
    "content"
    "side-header"
    "sidebar"
@@ -358,7 +364,8 @@
     grid-template-areas: 
     "header  header"
         "user user"
-      "side-header     nav"
+        "side-nav     nav"
+        "side-header content"
       "sidebar content"
       "ad      footer";
   }
@@ -384,11 +391,12 @@
     grid-template-columns: 1fr 4fr 1fr;
     grid-template-areas: 
     "header header  user"
-        "side-header nav  nav"
-      "sidebar     content content"
-      "sidebar     content content"
-      "sidebar  footer footer"
-      "ad  footer footer"
+        "side-nav nav  nav"
+        "side-header content content"
+        "sidebar     content content"
+        "sidebar     content content"
+        "sidebar  footer footer"
+        "ad  footer footer"
    }
 
   nav ul {
diff --git a/templates/newbase.html b/templates/newbase.html
index 56ca6d26..69e41360 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -131,7 +131,7 @@
           <li>
             <a href="/" title="Home">
               <img src="/static/img/logo7.png"
-                   alt="Rowsandall logo" width="300px">
+                   alt="Rowsandall logo" width="200px">
             </a>
           </li>
           <li>
@@ -182,6 +182,10 @@
         </ul>
       </user>
 
+      <side-nav class="side-nav">
+        &nbsp;
+      </side-nav>
+      
       <nav class="main-nav">
         <ul>
           <li id="nav-workouts"> 

From e2b5499af44e4720f222983a30d43ea62747c2a5 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 27 Sep 2018 17:26:08 +0200
Subject: [PATCH 2/3] proposal for inner content

---
 rowers/templates/menu_analytics.html    |  1 +
 rowers/templates/menu_demo.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 | 31 +++++++++++++++++------
 rowers/templates/redesign_plan.html     |  3 ---
 rowers/templates/redesign_profile.html  |  4 ---
 rowers/templates/redesign_racing.html   |  3 ---
 rowers/templates/redesign_teams.html    |  4 ---
 rowers/templates/redesign_workout.html  |  3 ---
 rowers/templates/redesign_workouts.html |  3 ---
 static/css/styles2.css                  | 33 ++++++++++++++++++++++---
 templates/newbase.html                  |  6 -----
 18 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/rowers/templates/menu_analytics.html b/rowers/templates/menu_analytics.html
index a1938f12..cd6a3911 100644
--- a/rowers/templates/menu_analytics.html
+++ b/rowers/templates/menu_analytics.html
@@ -1,3 +1,4 @@
+<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_demo.html b/rowers/templates/menu_demo.html
index e742af16..ef3e7d09 100644
--- a/rowers/templates/menu_demo.html
+++ b/rowers/templates/menu_demo.html
@@ -1,3 +1,4 @@
+<h1>Demo</h1>
 <ul class="cd-accordion-menu animated">
   <li><a href="#0">Link</a></li>
   <li class="has-children">
diff --git a/rowers/templates/menu_help.html b/rowers/templates/menu_help.html
index b47e0471..c7017f7e 100644
--- a/rowers/templates/menu_help.html
+++ b/rowers/templates/menu_help.html
@@ -1,3 +1,4 @@
+<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 fe972e5d..d70323af 100644
--- a/rowers/templates/menu_plan.html
+++ b/rowers/templates/menu_plan.html
@@ -1,3 +1,4 @@
+<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 7744eea6..91c63029 100644
--- a/rowers/templates/menu_profile.html
+++ b/rowers/templates/menu_profile.html
@@ -1,3 +1,4 @@
+<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 4c8f50fe..547258db 100644
--- a/rowers/templates/menu_racing.html
+++ b/rowers/templates/menu_racing.html
@@ -1,3 +1,4 @@
+<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 e03b0f23..d6c62fc8 100644
--- a/rowers/templates/menu_teams.html
+++ b/rowers/templates/menu_teams.html
@@ -1,3 +1,4 @@
+<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 d53774b7..1f3b8b3f 100644
--- a/rowers/templates/menu_workout.html
+++ b/rowers/templates/menu_workout.html
@@ -1,3 +1,4 @@
+<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 dff2a0a3..99fc269b 100644
--- a/rowers/templates/menu_workouts.html
+++ b/rowers/templates/menu_workouts.html
@@ -1,3 +1,4 @@
+<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 c56a97e6..436a5444 100644
--- a/rowers/templates/redesign_analysis.html
+++ b/rowers/templates/redesign_analysis.html
@@ -4,14 +4,31 @@
 
 {% block main %}
 <h1>Main</h1>
-<p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
-</p>
-<p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
-</p>
-{% endblock %}
 
-{% block sideheader %}
-<h1>Analysis</h1>
+<ul class="main-content">
+  <li class="landscape"><img src="http://placehold.it/1200x1000" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
+  <li class="landscape">
+    <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
+      <ul>
+        <li>One</li>
+        <li>Two</li>
+        </ul>
+    </p>
+  </li>
+  <li class="landscape">
+    <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
+    </p>
+  </li>
+</ul>
 {% endblock %}
 
 {% block sidebar %}
diff --git a/rowers/templates/redesign_plan.html b/rowers/templates/redesign_plan.html
index 0e220b9f..72057cd1 100644
--- a/rowers/templates/redesign_plan.html
+++ b/rowers/templates/redesign_plan.html
@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Plan</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_plan.html' %}
diff --git a/rowers/templates/redesign_profile.html b/rowers/templates/redesign_profile.html
index b0bd1d10..896712fa 100644
--- a/rowers/templates/redesign_profile.html
+++ b/rowers/templates/redesign_profile.html
@@ -10,10 +10,6 @@
 </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 62d74bca..dacdee63 100644
--- a/rowers/templates/redesign_racing.html
+++ b/rowers/templates/redesign_racing.html
@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Racing</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_racing.html' %}
diff --git a/rowers/templates/redesign_teams.html b/rowers/templates/redesign_teams.html
index 228e84a9..46e03a4b 100644
--- a/rowers/templates/redesign_teams.html
+++ b/rowers/templates/redesign_teams.html
@@ -10,10 +10,6 @@
 </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 0b664c15..669cd281 100644
--- a/rowers/templates/redesign_workout.html
+++ b/rowers/templates/redesign_workout.html
@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Workout</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_workout.html' %}
diff --git a/rowers/templates/redesign_workouts.html b/rowers/templates/redesign_workouts.html
index c898af67..3205bcc2 100644
--- a/rowers/templates/redesign_workouts.html
+++ b/rowers/templates/redesign_workouts.html
@@ -10,9 +10,6 @@
 </p>
 {% endblock %}
 
-{% block sideheader %}
-<h1>Workouts</h1>
-{% endblock %}
 
 {% block sidebar %}
 {% include 'menu_workouts.html' %}
diff --git a/static/css/styles2.css b/static/css/styles2.css
index b14a255e..7a53a391 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -342,12 +342,27 @@
       "user"
       "nav"
    "content"
-   "side-header"
    "sidebar"
    "ad"
    "footer";
 }
 
+.main-content {
+    list-style: none;
+    margin: 0;
+}
+
+.main-content li.landscape {
+    grid-column-end: span 2;
+}
+
+.main-content li img {
+    display: block;
+    width: 100%;
+    height: auto;
+    padding: 5px;
+}
+
 @media (max-width: 449px) {
     nav a {
         font-size: 0px;
@@ -365,7 +380,7 @@
     "header  header"
         "user user"
         "side-nav     nav"
-        "side-header content"
+        "sidebar content"
       "sidebar content"
       "ad      footer";
   }
@@ -381,6 +396,12 @@
       justify-content: space-between; 
   }
 
+   .main-content {
+       display: grid;
+       grid-template-columns: repeat(1,1fr);
+       grid-gap: 10px;
+   }
+
   
 }
 
@@ -392,7 +413,7 @@
     grid-template-areas: 
     "header header  user"
         "side-nav nav  nav"
-        "side-header content content"
+        "sidebar content content"
         "sidebar     content content"
         "sidebar     content content"
         "sidebar  footer footer"
@@ -407,7 +428,11 @@
      flex-direction: row; 
    }
 
-
+   .main-content {
+       display: grid;
+       grid-template-columns: repeat(2,1fr);
+       grid-gap: 10px;
+   }
 
 }
 
diff --git a/templates/newbase.html b/templates/newbase.html
index 69e41360..7350912e 100644
--- a/templates/newbase.html
+++ b/templates/newbase.html
@@ -221,12 +221,6 @@
         {% endblock %}
       </main>
 
-      <side-header class="sideheader">
-        {% block sideheader %}
-        <h1>Workouts</h1>
-        {% endblock %}
-      </side-header>
-      
       <aside class="side">
         {% block sidebar %}
         Related links

From c6c0b98a5e2c53d05b203f7090c85f5668e25e69 Mon Sep 17 00:00:00 2001
From: Sander Roosendaal <roosendaalsander@gmail.com>
Date: Thu, 27 Sep 2018 17:36:44 +0200
Subject: [PATCH 3/3] four columns

---
 rowers/templates/redesign_analysis.html |  9 ++++-----
 static/css/styles2.css                  | 25 ++++++++++++++++++++++---
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/rowers/templates/redesign_analysis.html b/rowers/templates/redesign_analysis.html
index 436a5444..20dfc9c7 100644
--- a/rowers/templates/redesign_analysis.html
+++ b/rowers/templates/redesign_analysis.html
@@ -6,8 +6,9 @@
 <h1>Main</h1>
 
 <ul class="main-content">
-  <li class="landscape"><img src="http://placehold.it/1200x1000" alt="placeholder"></li>
-  <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="grid_4"><img src="http://placehold.it/1200x1000" alt="placeholder"></li>
+  <li class="grid_2"><img src="http://placehold.it/350x200" alt="placeholder"></li>
+  <li class="grid_2"><img src="http://placehold.it/350x200" alt="placeholder"></li>
   <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
   <li><img src="http://placehold.it/350x200" alt="placeholder"></li>
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
@@ -16,15 +17,13 @@
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
   <li><img src="http://placehold.it/200x300" alt="placeholder"></li>
-  <li class="landscape">
+  <li class="grid_4">
     <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
       <ul>
         <li>One</li>
         <li>Two</li>
         </ul>
     </p>
-  </li>
-  <li class="landscape">
     <p>Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh <a href="">fermentum</a> in.
     </p>
   </li>
diff --git a/static/css/styles2.css b/static/css/styles2.css
index 7a53a391..0498af0c 100644
--- a/static/css/styles2.css
+++ b/static/css/styles2.css
@@ -352,10 +352,14 @@
     margin: 0;
 }
 
-.main-content li.landscape {
+.main-content li.grid_2 {
     grid-column-end: span 2;
 }
 
+.main-content li.grid_4 {
+    grid-column-end: span 4;
+}
+
 .main-content li img {
     display: block;
     width: 100%;
@@ -398,10 +402,17 @@
 
    .main-content {
        display: grid;
-       grid-template-columns: repeat(1,1fr);
+       grid-template-columns: repeat(2,1fr);
        grid-gap: 10px;
    }
 
+   .main-content li.grid_2 {
+       grid-column-end: span 2;
+   }
+
+   .main-content li.grid_4 {
+       grid-column-end: span 2;
+   }
   
 }
 
@@ -430,10 +441,18 @@
 
    .main-content {
        display: grid;
-       grid-template-columns: repeat(2,1fr);
+       grid-template-columns: repeat(4,1fr);
        grid-gap: 10px;
    }
 
+   .main-content li.grid_2 {
+       grid-column-end: span 2;
+   }
+
+   .main-content li.grid_4 {
+       grid-column-end: span 4;
+   }
+
 }