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
RevLine 
[5ec3a0b]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">
[67fc2ed]17      <div class="user-profile-account">
[ffd6bb5]18        <div>
[bddf042]19          <tal:c tal:condition="getattr(user, 'picture', None)">
[f0e64eb]20            <img tal:attributes="src request.resource_path(user, 'picture', query={'size': 200})"
[ffd6bb5]21                 width="450" />
22          </tal:c>
23          <div>
24            <h2>
[bddf042]25                <tal:fullname tal:content="user.fullname"></tal:fullname>
[ffd6bb5]26            </h2>
27            <p>
[bddf042]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>
[ffd6bb5]35            </p>
[eed2019]36            <div class="profile-bio">
[bddf042]37              <p tal:repeat="paragraph getattr(user, 'bio', '').split('\n')"
[eed2019]38                 tal:content="paragraph"></p>
39            </div>
[ffd6bb5]40            <ul class="workout-options">
41              <li><a href=""
[bddf042]42                     tal:attributes="href request.resource_url(user, 'edit')"
[eed2019]43                     i18n:translate="">edit profile</a></li>
[ffd6bb5]44              <li><a href=""
[bddf042]45                     tal:attributes="href request.resource_url(user, 'passwd')"
[eed2019]46                     i18n:translate="">change password</a></li>
[ffd6bb5]47            </ul>
48          </div>
49        </div>
[6993c72]50
[5ec3a0b]51      </div>
52
[ffd6bb5]53      <div class="workout-content">
54        <div class="workout-list">
55          <div class="total-workouts">
[a3c3baa]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>
[ffd6bb5]76          </div>
[dbfab70]77
[ffd6bb5]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>
[d24a64a]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>
[ffd6bb5]88
[d24a64a]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>
[5ec3a0b]94          </div>
95
[dbfab70]96
[ffd6bb5]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>
[bddf042]108                  <tal:c tal:content="workout.start_in_timezone(user.timezone)"></tal:c>
[ffd6bb5]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>
[4985618]117                <li tal:condition="workout.uphill">
118                  +<tal:c tal:content="workout.uphill"></tal:c> m
119                </li>
[ffd6bb5]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
[eed2019]139              <div class="workout-intro">
[d7a9df5]140                <p tal:repeat="paragraph workout.trimmed_notes.split('\n')"
[eed2019]141                   tal:content="paragraph"></p>
142              </div>
[ffd6bb5]143
144              <div class="workout-map" tal:condition="workout.has_gpx">
145                <a href="" tal:attributes="href request.resource_url(workout)">
[b3374f6]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>
[ffd6bb5]154                </a>
155              </div>
156
157            </article>
158
159          </tal:r>
160        </div>
[d24a64a]161
162        <div class="workout-aside">
163          <ul class="profile-data">
164            <li>
165              <span><tal:t i18n:translate="">Gender:</tal:t></span>
[bddf042]166              <tal:c tal:content="getattr(user, 'gender', '-')"></tal:c>
[d24a64a]167            </li>
[bddf042]168            <li tal:define="birth_date getattr(user, 'birth_date', None)">
[d24a64a]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>
[bddf042]176              <tal:c tal:content="getattr(user, 'height', '-')"></tal:c> meters
[d24a64a]177            </li>
178            <li>
179              <span><tal:t i18n:translate="">Weight:</tal:t></span>
[bddf042]180              <tal:c tal:content="getattr(user, 'weight', '-')"></tal:c> kg
[d24a64a]181            </li>
182          </ul>
183        </div>
[ffd6bb5]184      </div>
[5ec3a0b]185    </div>
186
187  </metal:content>
188
[bd8eeb4]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">
[b3374f6]195     var map_shots = owjs.map_shots({
196         img_selector: 'img.js-needs-map',
197     })
198     map_shots.run();
199
[bd8eeb4]200     var y_axis_labels = {
201         "distance": "Kilometers",
202         "time": "Hours",
203         "elevation": "Meters"
204     };
205
206     var year_chart = owjs.year_chart({
[594fbe8]207         chart_selector: '.js-month-stats svg',
208         filters_selector: '.js-month-stats .js-filters a',
[6993c72]209         switcher_selector: '.js-month-stats .js-switcher a',
[40ee398]210         is_active_class: 'is-active',
[bddf042]211         urls: {"monthly": "${request.resource_url(user, 'monthly')}",
212                "weekly": "${request.resource_url(user, 'weekly')}"},
[bd8eeb4]213         current_month: "${current_month}",
[5cf5787]214         current_week: "${current_week}",
[bd8eeb4]215         y_axis_labels: y_axis_labels,
[5cf5787]216         filter_by: "distance",
217         url: "${'monthly' if current_week is None else 'weekly'}",
[bd8eeb4]218     });
[5cf5787]219     year_chart.render("distance", "${'monthly' if current_week is None else 'weekly'}");
[bd8eeb4]220     year_chart.filters_setup();
[5cf5787]221     year_chart.switcher_setup();
[bd8eeb4]222    </script>
223
224  </metal:body-js>
225
[5ec3a0b]226</html>
Note: See TracBrowser for help on using the repository browser.