source: OpenWorkouts-current/ow/templates/edit_profile.pt @ 722ae18

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

(#32) Improvements on the edit profile form:

  • Added field for nickname, set as not required
  • Applied classes to add some styling based on the new code in forms.css
  • Ensure the error messages are displayed clearly by the field that caused the errors.
  • Loaded pickadate js date picker for the birth date field
  • Property mode set to 100644
File size: 4.7 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="">Edit profile</tal:t>
12  </metal:head-title>
13
14  <metal:title metal:fill-slot="title">
15      <tal:t i18n:translate="">Edit profile</tal:t>
16  </metal:title>
17
18  <metal:css metal:fill-slot="css">
19      <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.css')}" />
20      <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.date.css')}" />
21  </metal:css>
22
23  <metal:content metal:fill-slot="content">
24      <h2 i18n:translate="">Edit profile</h2>
25    <div class="edit-profile">
26      ${form.begin(multipart=True)}
27      ${form.csrf_token()}
28
29        <fieldset>
30            <p>
31                <label for="email" i18n:translate="">Email address:</label>
32                ${form.errorlist('email')}
33                ${form.text('email')}
34            </p>
35            <p>
36                <label for="nickname" i18n:translate="">Nickname:</label>
37                ${form.errorlist('nickname')}
38                ${form.text('nickname')}
39            </p>
40        </fieldset>
41
42        <fieldset>
43            <p>
44                <tal:c tal:condition="getattr(context, 'picture', None)">
45
46                    <label for="current_picture" i18n:translate="">
47                        Current picture:</label>
48                    <img id="current_picture" tal:attributes="src request.resource_path(context, 'picture')" width="150">
49                </tal:c>
50                <label for="picture" i18n:translate="">
51                    Picture (jpg, jpeg, png or gif):</label>
52                ${form.errorlist('picture')}
53                ${form.file('picture')}
54            </p>
55        </fieldset>
56
57        <fieldset>
58            <p>
59                <label for="firstname" i18n:translate="">First name:</label>
60                ${form.errorlist('firstname')}
61                ${form.text('firstname')}
62            </p>
63            <p>
64                <label for="lastname" i18n:translate="">Last name:</label>
65                ${form.errorlist('lastname')}
66                ${form.text('lastname')}
67            </p>
68        </fieldset>
69
70        <fieldset>
71            <p>
72                <label for="gender" i18n:translate="">Gender:</label>
73                ${form.errorlist('gender')}
74                ${form.select('gender', ['male', 'female'])}
75            </p>
76            <p>
77                <label for="birth_date" i18n:translate="">Birth date:</label>
78                ${form.errorlist('birth_date')}
79                ${form.date('birth_date', date_format='%d/%m/%Y')}
80            </p>
81            <p>
82                <label for="height" i18n:translate="">Height (meters):</label>
83                ${form.errorlist('height')}
84                ${form.text('height')}
85            </p>
86            <p>
87                <label for="weight" i18n:translate="">Weight (kg):</label>
88                ${form.errorlist('weight')}
89                ${form.text('weight')}
90            </p>
91        </fieldset>
92
93        <fieldset>
94            <p>
95                <label for="bio" i18n:translate="">Bio/About you:</label>
96                ${form.errorlist('bio')}
97                ${form.textarea('bio', rows=10, cols=50)}
98            </p>
99        </fieldset>
100
101        <p>
102            ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
103            <a href="" class="button button-important"
104               tal:attributes="href request.resource_url(context, 'profile')"
105               i18n:translate="">Cancel</a>
106        </p>
107        ${form.end()}
108    </div>
109
110  </metal:content>
111
112  <metal:body-js metal:fill-slot="body-js">
113      <script src="${request.static_url('ow:static/components/pickadate/picker.js')}"></script>
114      <script src="${request.static_url('ow:static/components/pickadate/picker.date.js')}"></script>
115      <script type="text/javascript">
116       $(document).ready(function() {
117           var today = new Date();
118           var first_year = new Date();
119           // start 100 years ago, should be enough for birth date
120           first_year.setMonth(first_year.getMonth() - 1200);
121           $('#birth_date').pickadate({
122               format: 'dd/mm/yyyy',
123               formatSubmit: 'dd/mm/yyyy',
124               selectMonths: true,
125               selectYears: 100,
126               min: first_year,
127               max: today
128           });
129       });
130      </script>
131  </metal:body-js>
132
133</html>
Note: See TracBrowser for help on using the repository browser.