source: OpenWorkouts-current/ow/templates/profile.pt @ 67fc2ed

currentfeature/docs
Last change on this file since 67fc2ed was 67fc2ed, checked in by Segundo Fdez <segun.2@…>, 5 years ago

Updated ui for profile basic interface

  • Property mode set to 100644
File size: 4.5 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml"
2      xml:lang="en"
3      xmlns:tal="http://xml.zope.org/namespaces/tal"
4      xmlns:metal="http://xml.zope.org/namespaces/metal"
5      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
6      i18n:domain="OpenWorkouts"
7      metal:use-macro="load: base.pt"
8      tal:attributes="lang request.locale_name">
9
10  <metal:head-title metal:fill-slot="head-title">
11    <tal:t i18n:translate="">My profile</tal:t>
12  </metal:head-title>
13
14  <metal:content metal:fill-slot="content">
15
16    <div class="user-profile">
17      <div class="user-profile-account">
18        <tal:c tal:condition="getattr(context, 'picture', None)">
19          <img tal:attributes="src request.resource_path(context, 'picture')"
20               width="450" />
21        </tal:c>
22        <h2>
23            <tal:fullname tal:content="context.fullname"></tal:fullname>
24        </h2>
25        <p>
26          <tal:has-nickname tal:condition="context.nickname">
27              <tal:nickname tal:content="context.nickname"></tal:nickname>
28          </tal:has-nickname> |
29          <span><tal:email tal:content="context.email"></tal:email></span>
30        </p>
31
32        <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
33
34        <ul class="profile-data">
35          <li>
36            <tal:t i18n:translate="">Gender:</tal:t>
37            <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
38          </li>
39          <li tal:define="birth_date getattr(context, 'birth_date', None)">
40            <tal:t i18n:translate="">Birth date:</tal:t>
41            <tal:c tal:condition="birth_date"
42                   tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
43            <tal:c tal:condition="birth_date is None">-</tal:c>
44          </li>
45          <li>
46            <tal:t i18n:translate="">Height:</tal:t>
47            <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
48          </li>
49          <li>
50            <tal:t i18n:translate="">Weight:</tal:t>
51            <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
52          </li>
53        </ul>
54        <ul class="workout-options">
55          <li><a href=""
56             tal:attributes="href request.resource_url(context, 'edit')"
57             i18n:translate="">edit profile</a></li>
58          <li><a href=""
59             tal:attributes="href request.resource_url(context, 'passwd')"
60             i18n:translate="">change password</a></li>
61        </ul>
62
63        <div class="workouts">
64          <tal:w tal:replace="context.num_workouts"></tal:w>
65          <tal:t i18n:translate="">Workouts</tal:t>
66        </div>
67      </div>
68
69      <div class="month-stats js-month-stats">
70        <div class="svg-cotent">
71          <svg width="600" height="300" viewBox="0 0 600 300"></svg>
72        </div>
73        <ul class="workout-options filters js-filters">
74          <li><a href="#" class="js-distance is-active" i18n:translate="">distance</a></li>
75          <li><a href="#" class="js-time" i18n:translate="">time</a></li>
76          <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
77        </ul>
78      </div>
79
80      <div class="latest-workouts">
81        <h3 i18n:translate="">Latest workouts</h3>
82        <tal:r tal:repeat="workout context.workouts()[:5]">
83          <div class="workout">
84            <h4>
85              <a href="" tal:content="workout.title"
86               tal:attributes="href request.resource_url(workout)"></a>
87            </h4>
88            <span><tal:c tal:content="workout.sport"></tal:c></span>
89            <p><tal:c tal:content="workout.start"></tal:c>,
90            <tal:c tal:content="workout.duration"></tal:c>,
91            <tal:c tal:content="workout.rounded_distance"></tal:c> km
92            </p>
93          </div>
94        </tal:r>
95      </div>
96
97    </div>
98
99  </metal:content>
100
101  <metal:body-js metal:fill-slot="body-js">
102
103    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
104    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
105
106    <script type="text/javascript">
107     var y_axis_labels = {
108         "distance": "Kilometers",
109         "time": "Hours",
110         "elevation": "Meters"
111     };
112
113     var year_chart = owjs.year_chart({
114         chart_selector: '.js-month-stats svg',
115         filters_selector: '.js-month-stats .js-filters a',
116         url: "${request.resource_url(context, 'yearly')}",
117         current_month: "${current_month}",
118         y_axis_labels: y_axis_labels,
119     });
120     year_chart.render("distance");
121     year_chart.filters_setup();
122    </script>
123
124  </metal:body-js>
125
126</html>
Note: See TracBrowser for help on using the repository browser.