Changeset 01674ff in OpenWorkouts-current


Ignore:
Timestamp:
Feb 6, 2019, 7:11:48 PM (5 years ago)
Author:
Segundo Fdez <segun.2@…>
Branches:
current, feature/docs, master
Children:
0bf3bd6, b05824e
Parents:
978575d
Message:

Update forms and fix detail workout view

Location:
ow
Files:
3 added
11 edited

Legend:

Unmodified
Added
Removed

  • ow/static/css/main.css

    r978575d r01674ff  
    429429  box-sizing: inherit;
    430430}
     431/* ==========================================================================
     432   Wrappers
     433   ========================================================================== */
     434/**
     435 * Common wrappers to use in Scms-site.
     436 * To reducing css size you can use extends instead of mixins
     437 * to move the selector up to the properties you wish to use.
     438 *
     439 * Example LESS:
     440 * .myclass {
     441 *              &:extend(.wrapper);
     442 * }
     443 */
     444.wrapper,
     445.wrapper-s,
     446.wrapper-l,
     447.wrapper-xl,
     448.ow-forms {
     449  display: block;
     450  width: 100%;
     451  padding-left: 1rem;
     452  padding-right: 1rem;
     453  margin: 0 auto;
     454}
     455@media (min-width: 480px) {
     456  .wrapper,
     457  .wrapper-s,
     458  .wrapper-l,
     459  .wrapper-xl,
     460  .ow-forms {
     461    padding-left: 2rem;
     462    padding-right: 2rem;
     463  }
     464}
     465@media (min-width: 800px) {
     466  .wrapper,
     467  .wrapper-s,
     468  .wrapper-l,
     469  .wrapper-xl,
     470  .ow-forms {
     471    padding-left: 4rem;
     472    padding-right: 4rem;
     473  }
     474}
     475@media (min-width: 1024px) {
     476  .wrapper,
     477  .wrapper-s,
     478  .wrapper-l,
     479  .wrapper-xl,
     480  .ow-forms {
     481    padding-left: 5rem;
     482    padding-right: 5rem;
     483  }
     484}
     485@media (min-width: 1440px) {
     486  .wrapper,
     487  .wrapper-s,
     488  .wrapper-l,
     489  .wrapper-xl,
     490  .ow-forms {
     491    padding-left: 6rem;
     492    padding-right: 6rem;
     493  }
     494}
     495@media (min-width: 320px) {
     496  .wrapper-s,
     497  .ow-forms {
     498    max-width: 740px;
     499  }
     500}
     501@media (min-width: 320px) {
     502  .wrapper-l {
     503    max-width: 1280px;
     504  }
     505}
     506@media (min-width: 320px) {
     507  .wrapper-xl {
     508    max-width: 1440px;
     509  }
     510}
     511/* Layout */
     512.ly-flex {
     513  display: flex;
     514  justify-content: space-between;
     515}
     516.ly-flex.ly-center {
     517  align-items: center;
     518}
     519.ly-flex.ly-start {
     520  justify-content: flex-start;
     521}
     522.ly-flex.ly-2 {
     523  flex-flow: row wrap;
     524}
     525.ly-flex.ly-2 > div,
     526.ly-flex.ly-2 > li,
     527.ly-flex.ly-2 > p,
     528.ly-flex.ly-2 > a {
     529  width: 50%;
     530}
     531.ly-flex.ly-2.has-gap > div,
     532.ly-flex.ly-2.has-gap > li,
     533.ly-flex.ly-2.has-gap > p,
     534.ly-flex.ly-2.has-gap > a {
     535  width: 48%;
     536}
     537.ly-flex.ly-3 {
     538  flex-flow: row wrap;
     539}
     540.ly-flex.ly-3 > div,
     541.ly-flex.ly-3 > li,
     542.ly-flex.ly-3 > p {
     543  width: 33%;
     544}
     545.ly-flex.ly-3.has-gap > div,
     546.ly-flex.ly-3.has-gap > li,
     547.ly-flex.ly-3.has-gap > p {
     548  width: 31%;
     549}
     550.ly-flex.ly-4 {
     551  flex-flow: row wrap;
     552}
     553.ly-flex.ly-4 > div,
     554.ly-flex.ly-4 > li,
     555.ly-flex.ly-4 > p {
     556  width: 25%;
     557}
     558.ly-flex.ly-4.has-gap > div,
     559.ly-flex.ly-4.has-gap > li,
     560.ly-flex.ly-4.has-gap > p {
     561  width: 23%;
     562}
     563.ly-flex-end {
     564  align-items: flex-end;
     565}
    431566/* Generic default forms */
    432567form {
    … …  
    440575  padding: 0;
    441576}
    442 fieldset > div {
     577fieldset > div,
     578fieldset > p {
    443579  margin-bottom: 1.5em;
    444580}
    … …  
    453589  border: 1px solid transparent;
    454590  border-radius: 2px;
     591}
     592.ow-forms label {
     593  display: block;
     594  margin-bottom: 0.35em;
     595  color: #959595;
     596}
     597.ow-forms textarea {
     598  resize: vertical;
     599  height: 200px;
     600}
     601.ow-forms textarea,
     602.ow-forms input {
     603  width: 100%;
     604  padding: 0.65em;
     605  border-radius: 4px;
     606  border: 1px solid #e1e1e1;
    455607}
    456608/* Generic button */
    … …  
    475627  line-height: 1.25;
    476628  max-width: 100%;
     629  width: auto;
     630}
     631.button-normal {
     632  width: auto;
     633}
     634.button-normal:hover {
     635  background-color: #959595;
     636  color: white;
     637}
     638.button-important {
     639  background-color: #EE4056;
    477640}
    478641.header-content {
    … …  
    792955/* Workout detail */
    793956#map {
     957  width: 100%;
    794958  height: 400px;
    795959}
    796960@media (min-width: 480px) {
    797961  #map {
    798     height: calc(100vh - 380px);
     962    height: calc(100vh - 465px);
    799963  }
    800964}
    … …  
    10061170  background-color: #e1e1e1;
    10071171}
     1172.ow-forms {
     1173  padding-top: 2em;
     1174}
     1175.ow-forms h2 {
     1176  border-top: 1px solid #e1e1e1;
     1177  padding-top: 0.5em;
     1178}
     1179.back {
     1180  color: #EE4056;
     1181  text-decoration: none;
     1182  font-weight: 700;
     1183}
     1184.back:before {
     1185  content: "⬅";
     1186  margin-right: 0.5em;
     1187}
     1188.back:hover {
     1189  color: #151515;
     1190}
    10081191.login-content {
    10091192  background-image: url("../media/img/back-01.jpg");
    … …  
    11151298  font-weight: bold;
    11161299}
     1300.total-workouts span {
     1301  color: #959595;
     1302  margin-right: 0.5em;
     1303}
     1304.total-workouts span:first-child {
     1305  color: #151515;
     1306}
     1307.total-workouts span:first-child:after {
     1308  content: "|";
     1309  color: #e1e1e1;
     1310  margin-left: 0.5em;
     1311}
    11171312.profile-data {
    11181313  list-style-type: none;

  • ow/static/less/main.less

    r978575d r01674ff  
    1616@import "common.less";
    1717
     18// layout
     19@import "layout/wrapper.less";
     20@import "layout/layout.less";
     21
    1822// ui
    1923@import "ui/form.less";
    … …  
    2327@import "modules/header.less";
    2428@import "modules/workout.less";
     29@import "modules/forms.less";
    2530
    2631// Pages

  • ow/static/less/modules/workout.less

    r978575d r01674ff  
    191191/* Workout detail */
    192192#map {
     193    width: 100%;
    193194    height: 400px;
    194195    @media (min-width: @screen-s){
    195         height: calc(100vh - 380px);
     196        height: calc(100vh - 465px);
    196197    }
    197198}

  • ow/static/less/pages/profile.less

    r978575d r01674ff  
    4242        .font-size(13);
    4343        font-weight: bold;
     44        span {
     45                color: @color-main-medium;
     46                margin-right: .5em;
     47                &:first-child {
     48                        color: @color-main;
     49                        &:after {
     50                                content: "|";
     51                                color: @color-main-light;
     52                                margin-left:  .5em;
     53                        }
     54                }
     55        }
    4456}
    4557

  • ow/static/less/ui/buttons.less

    r978575d r01674ff  
    2020    line-height: 1.25;
    2121    max-width: 100%;
     22    width: auto;
    2223}
     24
     25.button-normal {
     26    width: auto;
     27    &:hover {
     28        background-color: @color-main-medium;
     29        color: white;
     30    }
     31}
     32.button-important {
     33    background-color: @color-app;
     34}

  • ow/static/less/ui/form.less

    r978575d r01674ff  
    1212    padding: 0;
    1313}
    14 fieldset > div {
     14
     15fieldset > div,
     16fieldset > p {
    1517    margin-bottom: 1.5em;
    1618}
    … …  
    2729    border-radius: 2px;
    2830}
     31
     32.ow-forms {
     33    label {
     34        display: block;
     35        margin-bottom: .35em;
     36        color: @color-main-medium;
     37    }
     38    textarea {
     39        resize: vertical;
     40        height: 200px;
     41    }
     42    textarea,
     43    input {
     44        width: 100%;
     45        padding: .65em;
     46        border-radius: 4px;
     47        border: 1px solid @color-main-light;
     48    }
     49}

  • ow/static/less/vendors/leaflet-elevation.less

    r978575d r01674ff  
    7272
    7373/* txt on map */
    74 
    7574.openworkouts-theme.height-focus-label {
    7675    display: none;
    … …  
    8281    stroke: @color-app;
    8382    stroke-width: 10px;
    84 
    8583}

  • ow/templates/add_manual_workout.pt

    r978575d r01674ff  
    2323
    2424  <metal:content metal:fill-slot="content">
    25       <h2 i18n:translate="">Add a new workout</h2>
     25
    2626    <div class="add_workout ow-forms">
     27      <a href="" class="back"
     28             tal:attributes="href request.resource_url(context)"
     29             i18n:translate="">Back</a>
     30        <h2 i18n:translate="">Add a new workout</h2>
    2731        ${form.begin()}
    2832        ${form.csrf_token()}
    2933
    3034        <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>
     35          <p>
     36              <label for="sport" i18n:translate="">Sport/Activity</label>
     37              ${form.errorlist('sport')}
     38              ${form.text('sport')}
     39          </p>
     40          <p>
     41              <label for="title" i18n:translate="">Title</label>
     42              ${form.errorlist('title')}
     43              ${form.text('title')}
     44          </p>
     45          <div class="input-container ly-flex ly-2 has-gap">
     46              <div>
     47                  <label for="start_date" i18n:translate="">Start date (dd/mm/yyyy)</label>
     48                  ${form.errorlist('start_date')}
     49                  ${form.text('start_date', size=10, **{'class': "date"})}
     50              </div>
     51              <div>
     52                  <label for="start_time" i18n:translate="">Start time (HH:MM)</label>
     53                  ${form.errorlist('start_time')}
     54                  ${form.text('start_time', size=5, **{'class': "time"})}
     55              </div>
     56          </div>
    4257
    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>
     58          <div class="input-container ly-flex ly-3 has-gap">
     59            <div>
     60              <label for="duration_hours" i18n:translate="">Hours</label>
     61              ${form.errorlist('duration_hours')}
     62              ${form.text('duration_hours', size=3, **{'class': "number"})}
    5563            </div>
     64            <div>
     65              <label for="duration_minutes" i18n:translate="">Minutes</label>
     66              ${form.errorlist('duration_minutes')}
     67              ${form.text('duration_minutes', size=3, **{'class': "number"})}
     68            </div>
     69            <div>
     70              <label for="duration_seconds" i18n:translate="">Seconds</label>
     71              ${form.errorlist('duration_seconds')}
     72              ${form.text('duration_seconds', size=3, **{'class': "number"})}
     73            </div>
     74          </div>
    5675
    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>
     76          <p>
     77              <label for="distance" i18n:translate="">Distance (Km):</label>
     78              ${form.errorlist('distance')}
     79              ${form.text('distance', size=4, **{'class': "number"})}
     80          </p>
     81          <div>
     82            <label for="notes" i18n:translate="">Notes:</label>
     83            ${form.errorlist('notes')}
     84            ${form.textarea('notes', rows=10, cols=50)}
     85          </div>
    7686      </fieldset>
    7787
    78       <fieldset>
    79           <label for="notes" i18n:translate="">Notes:</label>
    80           ${form.errorlist('notes')}
    81           ${form.textarea('notes', rows=10, cols=50)}
    82       </fieldset>
    83 
    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>
     88        ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
    9089
    9190      ${form.end()}

  • ow/templates/add_workout.pt

    r978575d r01674ff  
    1717
    1818  <metal:content metal:fill-slot="content">
    19     <h2 i18n:translate="">Upload workout file</h2>
    2019    <div class="upload-workout ow-forms">
     20      <a href="" class="back"
     21           tal:attributes="href request.resource_url(context)"
     22           i18n:translate="">Back</a>
     23      <h2 i18n:translate="">Upload workout file</h2>
    2124        ${form.begin(multipart=True)}
    2225        ${form.csrf_token()}
    2326
    2427        <fieldset>
    25             <p>
    26                 <label for="title" i18n:translate="">Title:</label>
    27                 ${form.errorlist('title')}
    28                 ${form.text('title')}
    29             </p>
     28          <p>
     29              <label for="title" i18n:translate="">Title</label>
     30              ${form.errorlist('title')}
     31              ${form.text('title')}
     32          </p>
     33          <p>
     34              <label for="notes" i18n:translate="">Notes</label>
     35              ${form.errorlist('notes')}
     36              ${form.textarea('notes', rows=10, cols=50)}
     37          </p>
     38          <p>
     39              <label for="tracking_file" i18n:translate="">
     40                  Workout file (gpx, fit)</label>
     41              ${form.errorlist('tracking_file')}
     42              ${form.file('tracking_file')}
     43          </p>
    3044        </fieldset>
    3145
    32         <fieldset>
    33             <p>
    34                 <label for="notes" i18n:translate="">Notes:</label>
    35                 ${form.errorlist('notes')}
    36                 ${form.textarea('notes', rows=10, cols=50)}
    37             </p>
    38         </fieldset>
    39 
    40         <fieldset>
    41             <p>
    42                 <label for="tracking_file" i18n:translate="">
    43                     Workout file (gpx, fit):</label>
    44                 ${form.errorlist('tracking_file')}
    45                 ${form.file('tracking_file')}
    46             </p>
    47         </fieldset>
    48 
    49         <p>
    50             ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
    51             <a href="" class="button button-important"
    52                tal:attributes="href request.resource_url(context)"
    53                i18n:translate="">Cancel</a>
    54         </p>
     46        ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
    5547
    5648      ${form.end()}

  • ow/templates/update_workout_from_file.pt

    r978575d r01674ff  
    1919
    2020  <metal:content metal:fill-slot="content">
    21     <div id="update_workout_file">
     21    <div id="update_workout_file" class="ow-forms">
     22
     23      <a class="back" href="" tal:attributes="href request.resource_url(request.root)"
     24         i18n:translate="">Back</a>
     25
    2226      ${form.begin(multipart=True)}
    2327      ${form.csrf_token()}
    … …  
    2529      <div tal:condition="context.has_tracking_file"
    2630           i18n:translate="">
    27         Existing
     31        <h2>Existing
    2832        <tal:filetype i18n:name="filetype"
    2933                      tal:content="context.tracking_filetype"></tal:filetype>
    30         tracking file data:
    31         <tal:data i18n:name="start"
    32                   tal:content="context.start"></tal:data> -
    33         <tal:data i18n:name="end"
    34                   tal:content="context.end"></tal:data> -
    35         <tal:data i18n:name="distance"
     34        tracking file data</h2>
     35        <p>
     36          <tal:data i18n:name="start"
     37                  tal:content="context.start"></tal:data>
     38        </p>
     39        <p>
     40          <tal:data i18n:name="end"
     41                  tal:content="context.end"></tal:data>
     42        </p>
     43        <p>
     44          <tal:data i18n:name="distance"
    3645                  tal:content="context.distance"></tal:data> kms
     46        </p>
    3747      </div>
    3848
    3949      <fieldset>
    4050        ${form.errorlist('tracking_file')}
    41         <label for="notes" i18n:translate="">Workout file (gpx, fit):</label>
    42         ${form.file('tracking_file')}
     51        <div>
     52          <label for="notes" i18n:translate="">Workout file (gpx, fit):</label>
     53          ${form.file('tracking_file')}
     54        </div>
    4355      </fieldset>
    4456
    45       ${form.submit("submit", "Save")}
    46       <a href="" tal:attributes="href request.resource_url(request.root)"
    47          i18n:translate="">Cancel</a>
    48 
     57      ${form.submit("submit", "Save",  **{'class':"button button-normal"})}
    4958      ${form.end()}
    5059    </div>

  • ow/templates/workout.pt

    r978575d r01674ff  
    103103        <div id="elevation"></div>
    104104      </div>
     105
    105106    </div>
     107        <div id="map" tal:condition="context.has_gpx"></div>
    106108
    107     <!--! Track map -->
    108     <div id="map" tal:condition="context.has_gpx"></div>
    109109  </metal:content>
    110110
Note: See TracChangeset for help on using the changeset viewer.