Index: ow/templates/profile.pt
===================================================================
--- ow/templates/profile.pt	(revision 5cf5787d1c21f5eedd38c23d588cc1906e4bef1d)
+++ ow/templates/profile.pt	(revision d24a64a1ba38c117d340202461a9c43204dc900d)
@@ -15,128 +15,140 @@
 
     <div class="user-profile">
-      <tal:c tal:condition="getattr(context, 'picture', None)">
-        <img tal:attributes="src request.resource_path(context, 'picture')"
-             width="450" />
-      </tal:c>
-      <h2>
-          <tal:fullname tal:content="context.fullname"></tal:fullname>
-          <tal:has-nickname tal:condition="context.nickname">
-              (<tal:nickname tal:content="context.nickname"></tal:nickname>)
-          </tal:has-nickname>
-      </h2>
-      <h3>
-        <tal:email tal:content="context.email"></tal:email>
-      </h3>
-      <h4>
-        <a href=""
-           tal:attributes="href request.resource_url(context, 'edit')"
-           i18n:translate="">edit profile</a> |
-        <a href=""
-           tal:attributes="href request.resource_url(context, 'passwd')"
-           i18n:translate="">change password</a>
-      </h4>
-      <div class="profile-info">
-        <ul>
-          <li>
-            <tal:t i18n:translate="">Gender:</tal:t>
-            <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
-          </li>
-          <li tal:define="birth_date getattr(context, 'birth_date', None)">
-            <tal:t i18n:translate="">Birth date:</tal:t>
-            <tal:c tal:condition="birth_date"
-                   tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
-            <tal:c tal:condition="birth_date is None">-</tal:c>
-          </li>
-          <li>
-            <tal:t i18n:translate="">Height:</tal:t>
-            <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
-          </li>
-          <li>
-            <tal:t i18n:translate="">Weight:</tal:t>
-            <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
-          </li>
-        </ul>
+      <div class="user-profile-account">
+        <div>
+          <tal:c tal:condition="getattr(context, 'picture', None)">
+            <img tal:attributes="src request.resource_path(context, 'picture')"
+                 width="450" />
+          </tal:c>
+          <div>
+            <h2>
+                <tal:fullname tal:content="context.fullname"></tal:fullname>
+            </h2>
+            <p>
+              <tal:has-nickname tal:condition="context.nickname">
+                  <tal:nickname tal:content="context.nickname"></tal:nickname>
+              </tal:has-nickname> |
+              <span><tal:email tal:content="context.email"></tal:email></span>
+            </p>
+            <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
+            <ul class="workout-options">
+              <li><a href=""
+                 tal:attributes="href request.resource_url(context, 'edit')"
+                 i18n:translate="">edit profile</a></li>
+              <li><a href=""
+                 tal:attributes="href request.resource_url(context, 'passwd')"
+                 i18n:translate="">change password</a></li>
+            </ul>
+          </div>
+        </div>
+
       </div>
 
-      <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
+      <div class="workout-content">
+        <div class="workout-list">
+          <div class="total-workouts">
+            <tal:w tal:replace="context.num_workouts"></tal:w>
+            <tal:t i18n:translate="">workouts</tal:t>
+          </div>
 
-      <div class="profile-workouts">
-        <tal:t i18n:translate="">Total number of workouts</tal:t>:
-        <tal:w tal:replace="context.num_workouts"></tal:w>
-      </div>
+          <div class="month-stats js-month-stats">
+            <div class="svg-cotent">
+              <svg width="900" height="180" viewBox="0 0 900 180"></svg>
+            </div>
+            <div class="center">
+              <ul class="workout-options filters js-filters">
+                <li><a href="#" class="js-distance is-active" i18n:translate="">distance</a></li>
+                <li><a href="#" class="js-time" i18n:translate="">time</a></li>
+                <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
+              </ul>
 
-      <div class="month-stats js-month-stats">
-        <svg width="600" height="300"></svg>
-        <div class="filters js-filters">
-          <a href="#" class="js-distance" i18n:translate="">distance</a>
-          <a href="#" class="js-time" i18n:translate="">time</a>
-          <a href="#" class="js-elevation" i18n:translate="">elevation</a>
+              <ul class="workout-options switcher js-switcher">
+                <li><a href="#" class="js-weekly" i18n:translate="">weekly</a></li>
+                <li><a href="#" class="js-monthly is-active" i18n:translate="">monthly</a></li>
+              </ul>
+            </div>
+          </div>
+
+
+          <tal:r tal:repeat="workout workouts">
+
+            <article class="workout-resume">
+
+              <h2 class="workout-title">
+                <a href="" tal:content="workout.title"
+                   tal:attributes="href request.resource_url(workout)"></a>
+              </h2>
+
+              <ul class="workout-info">
+                <li>
+                  <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
+                </li>
+                <li>
+                  <!--! use the properly formatted duration instead of the timedelta object -->
+                  <tal:c tal:content="workout._duration"></tal:c>
+                </li>
+                <li tal:condition="workout.distance">
+                  <tal:c tal:content="workout.rounded_distance"></tal:c> km
+                </li>
+              </ul>
+
+              <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
+                <li tal:condition="hr">
+                  <span i18n:translate="">HR (bpm)</span>:
+                  <tal:c tal:content="hr['min']"></tal:c>
+                  <tal:t i18n:translate="">Min.</tal:t>,
+                  <tal:c tal:content="hr['avg']"></tal:c>
+                  <tal:t i18n:translate="">Avg.</tal:t>,
+                  <tal:c tal:content="hr['max']"></tal:c>
+                  <tal:t i18n:translate="">Max.</tal:t>
+                </li>
+                <li tal:condition="cad">
+                  <span i18n:translate="">Cad</span>:
+                  <tal:c tal:content="cad['min']"></tal:c>
+                  <tal:t i18n:translate="">Min.</tal:t>,
+                  <tal:c tal:content="cad['avg']"></tal:c>
+                  <tal:t i18n:translate="">Avg.</tal:t>,
+                  <tal:c tal:content="cad['max']"></tal:c>
+                  <tal:t i18n:translate="">Max.</tal:t>
+                </li>
+              </ul>
+
+              <div class="workout-intro" tal:content="workout.notes"></div>
+
+              <div class="workout-map" tal:condition="workout.has_gpx">
+                <a href="" tal:attributes="href request.resource_url(workout)">
+                  <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
+                            alt workout.title; title workout.title">
+                </a>
+              </div>
+
+            </article>
+
+          </tal:r>
         </div>
-        <div class="switcher js-switcher">
-          <a href="#" class="js-weekly" i18n:translate="">weekly</a>
-          <a href="#" class="js-monthly" i18n:translate="">monthly</a>
+
+        <div class="workout-aside">
+          <ul class="profile-data">
+            <li>
+              <span><tal:t i18n:translate="">Gender:</tal:t></span>
+              <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
+            </li>
+            <li tal:define="birth_date getattr(context, 'birth_date', None)">
+              <span><tal:t i18n:translate="">Birth date:</tal:t></span>
+              <tal:c tal:condition="birth_date"
+                     tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
+              <tal:c tal:condition="birth_date is None">-</tal:c>
+            </li>
+            <li>
+              <span><tal:t i18n:translate="">Height:</tal:t></span>
+              <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
+            </li>
+            <li>
+              <span><tal:t i18n:translate="">Weight:</tal:t></span>
+              <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
+            </li>
+          </ul>
         </div>
       </div>
-
-
-      <tal:r tal:repeat="workout workouts">
-
-        <a name="workouts"></a>
-
-
-        <article class="workout-resume">
-
-          <h2 class="workout-title">
-            <a href="" tal:content="workout.title"
-               tal:attributes="href request.resource_url(workout)"></a>
-          </h2>
-
-          <ul class="workout-info">
-            <li>
-              <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
-            </li>
-            <li>
-              <!--! use the properly formatted duration instead of the timedelta object -->
-              <tal:c tal:content="workout._duration"></tal:c>
-            </li>
-            <li tal:condition="workout.distance">
-              <tal:c tal:content="workout.rounded_distance"></tal:c> km
-            </li>
-          </ul>
-
-          <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
-            <li tal:condition="hr">
-              <span i18n:translate="">HR (bpm)</span>:
-              <tal:c tal:content="hr['min']"></tal:c>
-              <tal:t i18n:translate="">Min.</tal:t>,
-              <tal:c tal:content="hr['avg']"></tal:c>
-              <tal:t i18n:translate="">Avg.</tal:t>,
-              <tal:c tal:content="hr['max']"></tal:c>
-              <tal:t i18n:translate="">Max.</tal:t>
-            </li>
-            <li tal:condition="cad">
-              <span i18n:translate="">Cad</span>:
-              <tal:c tal:content="cad['min']"></tal:c>
-              <tal:t i18n:translate="">Min.</tal:t>,
-              <tal:c tal:content="cad['avg']"></tal:c>
-              <tal:t i18n:translate="">Avg.</tal:t>,
-              <tal:c tal:content="cad['max']"></tal:c>
-              <tal:t i18n:translate="">Max.</tal:t>
-            </li>
-          </ul>
-
-          <div class="workout-intro" tal:content="workout.notes"></div>
-
-          <div class="workout-map" tal:condition="workout.has_gpx">
-            <a href="" tal:attributes="href request.resource_url(workout)">
-              <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
-                        alt workout.title; title workout.title">
-            </a>
-          </div>
-
-        </article>
-
-      </tal:r>
-
     </div>
 
@@ -156,7 +168,7 @@
 
      var year_chart = owjs.year_chart({
-         chart_selector: 'div.js-month-stats svg',
-         filters_selector: 'div.js-month-stats div.js-filters a',
-         switcher_selector: 'div.js-month-stats div.js-switcher a',
+         chart_selector: '.js-month-stats svg',
+         filters_selector: '.js-month-stats .js-filters a',
+         switcher_selector: '.js-month-stats .js-switcher a',
          urls: {"monthly": "${request.resource_url(context, 'monthly')}",
                 "weekly": "${request.resource_url(context, 'weekly')}"},
