Changeset 208da8b in OpenWorkouts-current for ow/templates


Ignore:
Timestamp:
Dec 17, 2018, 9:42:23 PM (5 years ago)
Author:
borja <borja@…>
Branches:
current, feature/docs, master
Children:
e02c5b5
Parents:
cc4ff05
Message:

Applied form styles for the "add manual workout" page.

Added pickadate selector for the "start date" field.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • ow/templates/add_manual_workout.pt

    rcc4ff05 r208da8b  
    1717
    1818  <metal:css metal:fill-slot="css">
    19     <link rel="stylesheet"
    20           href="${request.static_url('ow:static/components/EasyAutocomplete/easy-autocomplete.min.css')}" />
     19      <link rel="stylesheet" href="${request.static_url('ow:static/components/EasyAutocomplete/easy-autocomplete.min.css')}" />
     20      <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.css')}" />
     21      <link rel="stylesheet" href="${request.static_url('ow:static/components/pickadate/themes/default.date.css')}" />
    2122  </metal:css>
    2223
    2324  <metal:content metal:fill-slot="content">
    24     <div id="add_workout">
    25       ${form.begin()}
    26       ${form.csrf_token()}
     25      <h2 i18n:translate="">Add a new workout</h2>
     26    <div class="add_workout ow-forms">
     27        ${form.begin()}
     28        ${form.csrf_token()}
    2729
    28       <fieldset>
    29         ${form.errorlist('sport')}
    30         <label for="sport" i18n:translate="">Sport/Activity:</label>
    31         ${form.text('sport')}
    32         ${form.errorlist('title')}
    33         <label for="title" i18n:translate="">Title:</label>
    34         ${form.text('title')}
     30        <fieldset>
     31            <p>
     32                <label for="sport" i18n:translate="">Sport/Activity</label>
     33                ${form.errorlist('sport')}
     34                ${form.text('sport')}
     35            </p>
     36            <p>
     37                <label for="title" i18n:translate="">Title</label>
     38                ${form.errorlist('title')}
     39                ${form.text('title')}
     40            </p>
     41        </fieldset>
     42
     43        <fieldset>
     44            <div class="input-container">
     45                <div>
     46                    <label for="start_date" i18n:translate="">Start date (dd/mm/yyyy)</label>
     47                    ${form.errorlist('start_date')}
     48                    ${form.text('start_date', size=10, **{'class': "date"})}
     49                </div>
     50                <div>
     51                    <label for="start_time" i18n:translate="">Start time (HH:MM)</label>
     52                    ${form.errorlist('start_time')}
     53                    ${form.text('start_time', size=5, **{'class': "time"})}
     54                </div>
     55            </div>
     56
     57            <div class="input-container">
     58                <label for="duration_hours" i18n:translate="">Hours</label>
     59                ${form.errorlist('duration_hours')}
     60                ${form.text('duration_hours', size=3, **{'class': "number"})}
     61
     62                <label for="duration_minutes" i18n:translate="">Minutes</label>
     63                ${form.errorlist('duration_minutes')}
     64                ${form.text('duration_minutes', size=3, **{'class': "number"})}
     65
     66                <label for="duration_seconds" i18n:translate="">Seconds</label>
     67                ${form.errorlist('duration_seconds')}
     68                ${form.text('duration_seconds', size=3, **{'class': "number"})}
     69            </div>
     70
     71            <p>
     72                <label for="distance" i18n:translate="">Distance (Km):</label>
     73                ${form.errorlist('distance')}
     74                ${form.text('distance', size=4, **{'class': "number"})}
     75            </p>
    3576      </fieldset>
    3677
    3778      <fieldset>
    38         ${form.errorlist('start_date')}
    39         <label for="start_date" i18n:translate="">Start date (dd/mm/yyyy):
    40         </label>
    41         ${form.text('start_date', size=10)}
    42         ${form.errorlist('start_time')}
    43         <label for="start_time" i18n:translate="">Start time (HH:MM):</label>
    44         ${form.text('start_time', size=5)}
    45 
    46         <br /> <hr />  <!-- o_O! -->
    47 
    48         ${form.errorlist('duration_hours')}
    49         <label for="duration_hours" i18n:translate="">Hours:</label>
    50         ${form.text('duration_hours', size=3)}
    51 
    52         ${form.errorlist('duration_minutes')}
    53         <label for="duration_minutes" i18n:translate="">Minutes:</label>
    54         ${form.text('duration_minutes', size=3)}
    55 
    56         ${form.errorlist('duration_seconds')}
    57         <label for="duration_seconds" i18n:translate="">Seconds:</label>
    58         ${form.text('duration_seconds', size=3)}
    59 
    60         ${form.errorlist('distance')}
    61         <label for="distance" i18n:translate="">Distance (Km):</label>
    62         ${form.text('distance', size=4)}
     79          <label for="notes" i18n:translate="">Notes:</label>
     80          ${form.errorlist('notes')}
     81          ${form.textarea('notes', rows=10, cols=50)}
    6382      </fieldset>
    6483
    65       <fieldset>
    66         ${form.errorlist('notes')}
    67         <label for="notes" i18n:translate="">Notes:</label>
    68         ${form.textarea('notes', rows=10, cols=50)}
    69       </fieldset>
    70 
    71       ${form.submit("submit", "Save")}
    72       <a href="" tal:attributes="href request.resource_url(request.root)"
    73          i18n:translate="">Cancel</a>
     84      <p>
     85          ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
     86          <a href="" class="button button-important"
     87             tal:attributes="href request.resource_url(context)"
     88             i18n:translate="">Cancel</a>
     89      </p>
    7490
    7591      ${form.end()}
    … …  
    8096
    8197  <metal:body-js metal:fill-slot="body-js">
    82     <script src="${request.static_url('ow:static/components/EasyAutocomplete/jquery.easy-autocomplete.min.js')}"></script>
    83     <script type="text/javascript">
    84       $(document).ready(function() {
    85           var options = {
    86               data: ${request.root.sports_json},
    87           };
    88           $("#sport").easyAutocomplete(options);
    89       });
    90     </script>
     98      <script src="${request.static_url('ow:static/components/EasyAutocomplete/jquery.easy-autocomplete.min.js')}"></script>
     99      <script src="${request.static_url('ow:static/components/pickadate/picker.js')}"></script>
     100      <script src="${request.static_url('ow:static/components/pickadate/picker.date.js')}"></script>
     101
     102      <script type="text/javascript">
     103       $(document).ready(function() {
     104           var options = {
     105               data: ${request.root.sports_json},
     106           };
     107           $("#sport").easyAutocomplete(options);
     108           $('#start_date').pickadate({
     109               format: 'dd/mm/yyyy',
     110               formatSubmit: 'dd/mm/yyyy',
     111           });
     112       });
     113      </script>
    91114  </metal:body-js>
    92115
Note: See TracChangeset for help on using the changeset viewer.