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

currentfeature/docs
Last change on this file since f0e64eb was f0e64eb, checked in by Borja Lopez <borja@…>, 5 years ago

(#51) Fixed profile images were too big:

  • Added new dependency (Pillow)
  • Modified the user profile picture view. Now it accepts a GET parameter (size) telling the size of the image we want. Only one value is needed, the code will scale the image appropiately.
  • Modified the dashboard, profile and edit_profile templates to ask for a smaller version (200px) of the user profile picture.

IMPORTANT: Ensure you install Pillow in any existing environments after pulling:

pip install Pillow

  • Property mode set to 100644
File size: 8.9 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        <div>
19          <tal:c tal:condition="getattr(user, 'picture', None)">
20            <img tal:attributes="src request.resource_path(user, 'picture', query={'size': 200})"
21                 width="450" />
22          </tal:c>
23          <div>
24            <h2>
25                <tal:fullname tal:content="user.fullname"></tal:fullname>
26            </h2>
27            <p>
28              <tal:has-nickname tal:condition="user.nickname">
29                <a href=""
30                   tal:attributes="href request.resource_url(request.root, 'profile', user.nickname)"
31                   tal:content="request.resource_url(request.root, 'profile', user.nickname)">
32                </a> |
33              </tal:has-nickname>
34              <span><tal:email tal:content="user.email"></tal:email></span>
35            </p>
36            <div class="profile-bio">
37              <p tal:repeat="paragraph getattr(user, 'bio', '').split('\n')"
38                 tal:content="paragraph"></p>
39            </div>
40            <ul class="workout-options">
41              <li><a href=""
42                     tal:attributes="href request.resource_url(user, 'edit')"
43                     i18n:translate="">edit profile</a></li>
44              <li><a href=""
45                     tal:attributes="href request.resource_url(user, 'passwd')"
46                     i18n:translate="">change password</a></li>
47            </ul>
48          </div>
49        </div>
50
51      </div>
52
53      <div class="workout-content">
54        <div class="workout-list">
55          <div class="total-workouts">
56            <span>
57              <tal:w tal:replace="len(workouts)"></tal:w>
58              <tal:t i18n:translate="">workouts</tal:t>
59            </span>
60            <span>
61              <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
62                <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
63                <tal:t i18n:translate="">hours</tal:t>,
64                <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
65                <tal:t i18n:translate="">min.</tal:t>
66              </tal:hms>
67            </span>
68            <span>
69              <tal:w tal:replace="round(totals['distance'])"></tal:w>
70              <tal:t i18n:translate="">km</tal:t>
71            </span>
72            <span>
73              <tal:w tal:replace="round(totals['elevation'])"></tal:w>
74              <tal:t i18n:translate="">m</tal:t>
75            </span>
76          </div>
77
78          <div class="month-stats js-month-stats">
79            <div class="svg-cotent">
80              <svg width="900" height="180" viewBox="0 0 900 180"></svg>
81            </div>
82            <div class="center">
83              <ul class="workout-options filters js-filters">
84                <li><a href="#" class="js-distance is-active" i18n:translate="">distance</a></li>
85                <li><a href="#" class="js-time" i18n:translate="">time</a></li>
86                <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
87              </ul>
88
89              <ul class="workout-options switcher js-switcher">
90                <li><a href="#" class="js-weekly" i18n:translate="">weekly</a></li>
91                <li><a href="#" class="js-monthly is-active" i18n:translate="">monthly</a></li>
92              </ul>
93            </div>
94          </div>
95
96
97          <tal:r tal:repeat="workout workouts">
98
99            <article class="workout-resume">
100
101              <h2 class="workout-title">
102                <a href="" tal:content="workout.title"
103                   tal:attributes="href request.resource_url(workout)"></a>
104              </h2>
105
106              <ul class="workout-info">
107                <li>
108                  <tal:c tal:content="workout.start_in_timezone(user.timezone)"></tal:c>
109                </li>
110                <li>
111                  <!--! use the properly formatted duration instead of the timedelta object -->
112                  <tal:c tal:content="workout._duration"></tal:c>
113                </li>
114                <li tal:condition="workout.distance">
115                  <tal:c tal:content="workout.rounded_distance"></tal:c> km
116                </li>
117                <li tal:condition="workout.uphill">
118                  +<tal:c tal:content="workout.uphill"></tal:c> m
119                </li>
120              </ul>
121
122              <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
123                <li tal:condition="hr">
124                  <span i18n:translate="">HR (bpm)</span>:
125                  <tal:c tal:content="hr['avg']"></tal:c>
126                  <tal:t i18n:translate="">Avg.</tal:t>,
127                  <tal:c tal:content="hr['max']"></tal:c>
128                  <tal:t i18n:translate="">Max.</tal:t>
129                </li>
130                <li tal:condition="cad">
131                  <span i18n:translate="">Cad</span>:
132                  <tal:c tal:content="cad['avg']"></tal:c>
133                  <tal:t i18n:translate="">Avg.</tal:t>,
134                  <tal:c tal:content="cad['max']"></tal:c>
135                  <tal:t i18n:translate="">Max.</tal:t>
136                </li>
137              </ul>
138
139              <div class="workout-intro">
140                <p tal:repeat="paragraph workout.trimmed_notes.split('\n')"
141                   tal:content="paragraph"></p>
142              </div>
143
144              <div class="workout-map" tal:condition="workout.has_gpx">
145                <a href="" tal:attributes="href request.resource_url(workout)">
146                  <tal:has-screenshot tal:condition="workout.map_screenshot is not None">
147                    <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
148                              alt workout.title; title workout.title">
149                  </tal:has-screenshot>
150                  <tal:has-not-screenshot tal:condition="workout.map_screenshot is None">
151                    <img src="" tal:attributes="src request.static_url('ow:static/media/img/no_map.png');
152                              alt workout.title; title workout.title; class 'js-needs-map'">
153                  </tal:has-not-screenshot>
154                </a>
155              </div>
156
157            </article>
158
159          </tal:r>
160        </div>
161
162        <div class="workout-aside">
163          <ul class="profile-data">
164            <li>
165              <span><tal:t i18n:translate="">Gender:</tal:t></span>
166              <tal:c tal:content="getattr(user, 'gender', '-')"></tal:c>
167            </li>
168            <li tal:define="birth_date getattr(user, 'birth_date', None)">
169              <span><tal:t i18n:translate="">Birth date:</tal:t></span>
170              <tal:c tal:condition="birth_date"
171                     tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
172              <tal:c tal:condition="birth_date is None">-</tal:c>
173            </li>
174            <li>
175              <span><tal:t i18n:translate="">Height:</tal:t></span>
176              <tal:c tal:content="getattr(user, 'height', '-')"></tal:c> meters
177            </li>
178            <li>
179              <span><tal:t i18n:translate="">Weight:</tal:t></span>
180              <tal:c tal:content="getattr(user, 'weight', '-')"></tal:c> kg
181            </li>
182          </ul>
183        </div>
184      </div>
185    </div>
186
187  </metal:content>
188
189  <metal:body-js metal:fill-slot="body-js">
190
191    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
192    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
193
194    <script type="text/javascript">
195     var map_shots = owjs.map_shots({
196         img_selector: 'img.js-needs-map',
197     })
198     map_shots.run();
199
200     var y_axis_labels = {
201         "distance": "Kilometers",
202         "time": "Hours",
203         "elevation": "Meters"
204     };
205
206     var year_chart = owjs.year_chart({
207         chart_selector: '.js-month-stats svg',
208         filters_selector: '.js-month-stats .js-filters a',
209         switcher_selector: '.js-month-stats .js-switcher a',
210         is_active_class: 'is-active',
211         urls: {"monthly": "${request.resource_url(user, 'monthly')}",
212                "weekly": "${request.resource_url(user, 'weekly')}"},
213         current_month: "${current_month}",
214         current_week: "${current_week}",
215         y_axis_labels: y_axis_labels,
216         filter_by: "distance",
217         url: "${'monthly' if current_week is None else 'weekly'}",
218     });
219     year_chart.render("distance", "${'monthly' if current_week is None else 'weekly'}");
220     year_chart.filters_setup();
221     year_chart.switcher_setup();
222    </script>
223
224  </metal:body-js>
225
226</html>
Note: See TracBrowser for help on using the repository browser.