Changeset 10c8e6e in OpenWorkouts-current


Ignore:
Timestamp:
Jan 30, 2019, 1:54:50 PM (5 years ago)
Author:
Segundo Fdez <segun.2@…>
Branches:
current, feature/docs, master
Children:
bf01534
Parents:
67fc2ed
Message:

update basic layout on workout detail

Location:
ow
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • ow/static/css/main.css

    r67fc2ed r10c8e6e  
    720720  color: #555555;
    721721}
     722/* Workout detail */
     723#map {
     724  height: 50vh;
     725}
     726.workout-detail {
     727  padding: 2em  1em;
     728}
     729@media (min-width: 480px) {
     730  .workout-detail {
     731    max-width: 1280px;
     732    margin: 0 auto;
     733  }
     734}
     735@media (min-width: 800px) {
     736  .workout-detail {
     737    display: flex;
     738    justify-content: space-between;
     739  }
     740}
     741.workout-detail-resume {
     742  max-width: 500px;
     743  margin-right: 6em;
     744  margin-bottom: 2em;
     745}
     746.workout-detail-resume h3 {
     747  margin-top: 0;
     748  margin-bottom: 0.5em;
     749}
     750.workout-detail-resume h3 + div {
     751  font-size: 14px;
     752  font-size: 0.875rem;
     753  color: #959595;
     754  line-height: 1.35em;
     755}
     756.workout-detail-resume .workout-options {
     757  font-size: 13px;
     758  font-size: 0.8125rem;
     759}
     760.workout-detail-info {
     761  max-width: 600px;
     762}
     763.workout-detail-info ul {
     764  list-style-type: none;
     765  padding: 0;
     766  margin: 0;
     767  display: flex;
     768  justify-content: space-between;
     769  flex-flow: row wrap;
     770}
     771.workout-detail-info ul span {
     772  display: block;
     773  color: #959595;
     774  font-size: 13px;
     775  font-size: 0.8125rem;
     776}
     777.workout-detail-info li {
     778  margin-bottom: 2em;
     779  margin-right: 1em;
     780  font-size: 16px;
     781  font-size: 1rem;
     782}
    722783/* Week report */
    723784.svg-cotent svg {
    … …  
    9751036  font-size: 0.8125rem;
    9761037}
    977 /* Workout detail */
    978 #map {
    979   height: 50vh;
    980 }

  • ow/static/less/main.less

    r67fc2ed r10c8e6e  
    2525@import "pages/login.less";
    2626@import "pages/profile.less";
    27 
    28 
    29 /* Workout detail */
    30 #map {
    31     height: 50vh;
    32 }

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

    r67fc2ed r10c8e6e  
    182182        .font-size(13);
    183183        color: @color-main-dark;
     184    }
     185}
     186
     187
     188
     189/* Workout detail */
     190#map {
     191    height: 50vh;
     192}
     193
     194.workout-detail {
     195    padding: 2em  1em;
     196    @media (min-width: @screen-s){
     197        max-width: 1280px;
     198        margin: 0 auto;
     199    }
     200     @media (min-width: @screen-m){
     201        display: flex;
     202        justify-content:space-between;
     203    }
     204}
     205
     206.workout-detail-resume {
     207    max-width: 500px;
     208    margin-right: 6em;
     209    margin-bottom: 2em;
     210    h3 {
     211        margin-top: 0;
     212        margin-bottom: .5em;
     213        & + div {
     214            .font-size(14);
     215            color: @color-main-medium;
     216            line-height: 1.35em;
     217        }
     218    }
     219    .workout-options {
     220        .font-size(13);
     221    }
     222}
     223
     224.workout-detail-info {
     225    max-width: 600px;
     226    ul {
     227        list-style-type: none;
     228        padding:0;
     229        margin: 0;
     230        display: flex;
     231        justify-content:space-between;
     232        flex-flow: row wrap;
     233        span {
     234            display: block;
     235            color: @color-main-medium;
     236            .font-size(13);
     237        }
     238    }
     239    li {
     240        margin-bottom: 2em;
     241        margin-right: 1em;
     242        .font-size(16);
    184243    }
    185244}

  • ow/templates/workout.pt

    r67fc2ed r10c8e6e  
    2626  <metal:content metal:fill-slot="content">
    2727
     28
     29    <div class="workout-detail" id="workout">
     30      <div class="workout-detail-resume">
     31        <h3 tal:content="context.title"></h3>
     32        <div id="" tal:content="context.notes"
     33             tal:attributes="id 'workout-' + context.workout_id + '-notes'">
     34        </div>
     35        <ul class="workout-options">
     36          <li>
     37            <a href="" i18n:translate=""
     38             tal:attributes="href request.resource_url(context, 'edit')">
     39            edit workout
     40            </a>
     41          </li>
     42          <li>
     43            <a href="" i18n:translate=""
     44             tal:attributes="href request.resource_url(context, 'update-from-file')">
     45            update with tracking file
     46            </a>
     47          </li>
     48          <li class="owo-del"><a href="" i18n:translate=""
     49             tal:attributes="href request.resource_url(context, 'delete')">
     50            delete
     51            </a>
     52          </li>
     53        </ul>
     54      </div>
     55      <div class="workout-detail-info">
     56        <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
     57            tal:define="hr context.hr; cad context.cad; atemp context.atemp; timezone context.owner.timezone">
     58          <li tal:condition="context.distance">
     59            <span><tal:t i18n:translate="">Distance</tal:t></span>
     60            <tal:c tal:content="context.rounded_distance"></tal:c> km
     61          </li>
     62          <li>
     63            <span><tal:t i18n:translate="">Start</tal:t></span>
     64            <tal:c tal:content="context.start_in_timezone(timezone)"></tal:c>
     65          </li>
     66          <li>
     67            <span><tal:t i18n:translate="">End</tal:t></span>
     68            <tal:c tal:content="context.end_in_timezone(timezone)"></tal:c>
     69          </li>
     70          <li>
     71            <span><tal:t i18n:translate="">Duration</tal:t></span>
     72            <!--! use the properly formatted duration instead of the timedelta object -->
     73            <tal:c tal:content="context._duration"></tal:c>
     74          </li>
     75          <li tal:condition="context.speed">
     76            <span><tal:t i18n:translate="">Speed</tal:t></span>
     77            <tal:t i18n:translate="">Avg.</tal:t>
     78            <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c> km/h |
     79            <tal:t i18n:translate="">Max.</tal:t>
     80            <tal:c tal:content="round(context.speed['max'], 1)"></tal:c> km/h
     81          </li>
     82          <li tal:condition="hr">
     83            <span><tal:t i18n:translate="">Heart Rate</tal:t></span>
     84            <tal:t i18n:translate="">Min.</tal:t>
     85            <tal:c tal:content="hr['min']"></tal:c> bpm |
     86            <tal:t i18n:translate="">Avg.</tal:t>
     87            <tal:c tal:content="hr['avg']"></tal:c> bpm |
     88            <tal:t i18n:translate="">Max.</tal:t>
     89            <tal:c tal:content="hr['max']"></tal:c> bpm
     90          </li>
     91          <li tal:condition="cad">
     92            <span><tal:t i18n:translate="">Cadence</tal:t></span>
     93            <tal:t i18n:translate="">Min.</tal:t>
     94            <tal:c tal:content="cad['min']"></tal:c> |
     95            <tal:t i18n:translate="">Avg.</tal:t>
     96            <tal:c tal:content="cad['avg']"></tal:c> |
     97            <tal:t i18n:translate="">Max.</tal:t>
     98            <tal:c tal:content="cad['max']"></tal:c>
     99          </li>
     100          <li tal:condition="atemp">
     101            <span><tal:t i18n:translate="">Temperature</tal:t></span>
     102            <tal:t i18n:translate="">Min.</tal:t>
     103            <tal:c tal:content="atemp['min']"></tal:c> |
     104            <tal:t i18n:translate="">Avg.</tal:t>
     105            <tal:c tal:content="atemp['avg']"></tal:c> |
     106            <tal:t i18n:translate="">Max.</tal:t>
     107            <tal:c tal:content="atemp['max']"></tal:c>
     108          </li>
     109        </ul>
     110      </div>
     111    </div>
    28112    <!--! Track map -->
    29113    <div id="map" tal:condition="context.has_gpx"></div>
    … …  
    49133      </tal:r>
    50134
    51     </div>
    52 
    53     <div id="workout">
    54       <h3 tal:content="context.title"></h3>
    55       <h4>
    56         <a href="" i18n:translate=""
    57            tal:attributes="href request.resource_url(context, 'edit')">
    58           (edit workout)
    59         </a> |
    60         <a href="" i18n:translate=""
    61            tal:attributes="href request.resource_url(context, 'update-from-file')">
    62           (update with tracking file)
    63         </a> |
    64         <a href="" i18n:translate=""
    65            tal:attributes="href request.resource_url(context, 'delete')">
    66           (delete)
    67         </a>
    68       </h4>
    69 
    70       <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
    71           tal:define="hr context.hr; cad context.cad; atemp context.atemp; timezone context.owner.timezone">
    72         <li>
    73           <tal:t i18n:translate="">Start:</tal:t>
    74           <tal:c tal:content="context.start_in_timezone(timezone)"></tal:c>
    75         </li>
    76         <li>
    77           <tal:t i18n:translate="">End:</tal:t>
    78           <tal:c tal:content="context.end_in_timezone(timezone)"></tal:c>
    79         </li>
    80         <li>
    81           <tal:t i18n:translate="">Duration:</tal:t>
    82           <!--! use the properly formatted duration instead of the timedelta object -->
    83           <tal:c tal:content="context._duration"></tal:c>
    84         </li>
    85         <li tal:condition="context.distance">
    86           <tal:t i18n:translate="">Distance:</tal:t>
    87           <tal:c tal:content="context.rounded_distance"></tal:c> km
    88         </li>
    89         <li tal:condition="context.speed">
    90           <tal:t i18n:translate="">Speed:</tal:t>
    91           <tal:t i18n:translate="">Avg.</tal:t>
    92           <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c> km/h |
    93           <tal:t i18n:translate="">Max.</tal:t>
    94           <tal:c tal:content="round(context.speed['max'], 1)"></tal:c> km/h
    95         </li>
    96         <li tal:condition="hr">
    97           <tal:t i18n:translate="">Heart Rate:</tal:t>
    98           <tal:t i18n:translate="">Min.</tal:t>
    99           <tal:c tal:content="hr['min']"></tal:c> bpm |
    100           <tal:t i18n:translate="">Avg.</tal:t>
    101           <tal:c tal:content="hr['avg']"></tal:c> bpm |
    102           <tal:t i18n:translate="">Max.</tal:t>
    103           <tal:c tal:content="hr['max']"></tal:c> bpm
    104         </li>
    105         <li tal:condition="cad">
    106           <tal:t i18n:translate="">Cadence:</tal:t>
    107           <tal:t i18n:translate="">Min.</tal:t>
    108           <tal:c tal:content="cad['min']"></tal:c> |
    109           <tal:t i18n:translate="">Avg.</tal:t>
    110           <tal:c tal:content="cad['avg']"></tal:c> |
    111           <tal:t i18n:translate="">Max.</tal:t>
    112           <tal:c tal:content="cad['max']"></tal:c>
    113         </li>
    114         <li tal:condition="atemp">
    115           <tal:t i18n:translate="">Temperature:</tal:t>
    116           <tal:t i18n:translate="">Min.</tal:t>
    117           <tal:c tal:content="atemp['min']"></tal:c> |
    118           <tal:t i18n:translate="">Avg.</tal:t>
    119           <tal:c tal:content="atemp['avg']"></tal:c> |
    120           <tal:t i18n:translate="">Max.</tal:t>
    121           <tal:c tal:content="atemp['max']"></tal:c>
    122         </li>
    123 
    124       </ul>
    125       <div id="" tal:content="context.notes"
    126            tal:attributes="id 'workout-' + context.workout_id + '-notes'">
    127       </div>
    128135    </div>
    129136  </metal:content>
Note: See TracChangeset for help on using the changeset viewer.