Changeset bf01534 in OpenWorkouts-current


Ignore:
Timestamp:
Feb 1, 2019, 1:25:00 PM (5 years ago)
Author:
Segundo Fdez <segun.2@…>
Branches:
current, feature/docs, master
Children:
6993c72
Parents:
10c8e6e
Message:

update workout detail layout and ui

Location:
ow
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • ow/static/css/main.css

    r10c8e6e rbf01534  
    722722/* Workout detail */
    723723#map {
    724   height: 50vh;
     724  height: 400px;
     725}
     726@media (min-width: 480px) {
     727  #map {
     728    height: calc(100vh - 380px);
     729  }
    725730}
    726731.workout-detail {
    727   padding: 2em  1em;
     732  padding: 0em  1em;
    728733}
    729734@media (min-width: 480px) {
    … …  
    741746.workout-detail-resume {
    742747  max-width: 500px;
    743   margin-right: 6em;
    744748  margin-bottom: 2em;
     749  padding-top: 2em;
     750}
     751@media (min-width: 800px) {
     752  .workout-detail-resume {
     753    margin-right: 6em;
     754  }
    745755}
    746756.workout-detail-resume h3 {
    … …  
    761771  max-width: 600px;
    762772}
     773@media (min-width: 800px) {
     774  .workout-detail-info {
     775    border-right: 1px solid #e1e1e1;
     776    border-left: 1px solid #e1e1e1;
     777    padding: 2em 1em 2em 2em;
     778  }
     779}
    763780.workout-detail-info ul {
    764781  list-style-type: none;
    … …  
    771788.workout-detail-info ul span {
    772789  display: block;
     790  font-size: 13px;
     791  font-size: 0.8125rem;
    773792  color: #959595;
    774   font-size: 13px;
    775   font-size: 0.8125rem;
     793  margin-bottom: 0.25em;
     794}
     795.workout-detail-info ul span.min,
     796.workout-detail-info ul span.avg,
     797.workout-detail-info ul span.max {
     798  display: inline-block;
     799  color: white;
     800  padding: 0.5em 0.85em;
     801  border-radius: 3px;
     802}
     803.workout-detail-info ul span.max {
     804  background-color: #EE4056;
     805}
     806.workout-detail-info ul span.min {
     807  background-color: #1395CA;
     808  margin-right: 0.5em;
     809}
     810.workout-detail-info ul span.avg {
     811  background-color: #17C898;
     812  margin-right: 0.5em;
    776813}
    777814.workout-detail-info li {
    778815  margin-bottom: 2em;
    779816  margin-right: 1em;
    780   font-size: 16px;
    781   font-size: 1rem;
     817  color: #959595;
     818  font-size: 15px;
     819  font-size: 0.9375rem;
     820}
     821.workout-detail-info li.important {
     822  font-size: 21px;
     823  font-size: 1.3125rem;
     824  color: #151515;
    782825}
    783826/* Week report */

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

    r10c8e6e rbf01534  
    189189/* Workout detail */
    190190#map {
    191     height: 50vh;
     191    height: 400px;
     192    @media (min-width: @screen-s){
     193        height: calc(100vh - 380px);
     194    }
    192195}
    193196
    194197.workout-detail {
    195     padding: 2em  1em;
     198    padding: 0em  1em;
    196199    @media (min-width: @screen-s){
    197200        max-width: 1280px;
    … …  
    206209.workout-detail-resume {
    207210    max-width: 500px;
    208     margin-right: 6em;
    209211    margin-bottom: 2em;
     212    padding-top: 2em;
     213    @media (min-width: @screen-m){
     214        margin-right: 6em;
     215    }
    210216    h3 {
    211217        margin-top: 0;
    … …  
    224230.workout-detail-info {
    225231    max-width: 600px;
     232    @media (min-width: @screen-m){
     233        border-right: 1px solid @color-main-light;
     234        border-left: 1px solid @color-main-light;
     235        padding:2em 1em 2em 2em;
     236    }
    226237    ul {
    227238        list-style-type: none;
    … …  
    233244        span {
    234245            display: block;
     246            .font-size(13);
    235247            color: @color-main-medium;
    236             .font-size(13);
     248            margin-bottom: .25em;
     249            &.min,
     250            &.avg,
     251            &.max {
     252                display: inline-block;
     253                color: white;
     254                padding: .5em .85em;
     255                border-radius: 3px;
     256            }
     257            &.max {
     258                background-color: @color-app;
     259            }
     260            &.min {
     261                background-color: #1395CA;
     262                margin-right: .5em;
     263            }
     264
     265            &.avg {
     266                background-color: #17C898;
     267                margin-right: .5em;
     268            }
    237269        }
    238270    }
    … …  
    240272        margin-bottom: 2em;
    241273        margin-right: 1em;
    242         .font-size(16);
     274        color: @color-main-medium;
     275        .font-size(15);
     276        &.important {
     277            .font-size(21);
     278            color: @color-main;
     279        }
    243280    }
    244281}

  • ow/templates/workout.pt

    r10c8e6e rbf01534  
    5656        <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
    5757            tal:define="hr context.hr; cad context.cad; atemp context.atemp; timezone context.owner.timezone">
    58           <li tal:condition="context.distance">
     58          <li class="important" tal:condition="context.distance">
    5959            <span><tal:t i18n:translate="">Distance</tal:t></span>
    6060            <tal:c tal:content="context.rounded_distance"></tal:c> km
    6161          </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>
     62          <li class="important">
    7163            <span><tal:t i18n:translate="">Duration</tal:t></span>
    7264            <!--! use the properly formatted duration instead of the timedelta object -->
    7365            <tal:c tal:content="context._duration"></tal:c>
    7466          </li>
     67          <li class="important">
     68            <span><tal:t i18n:translate="">Start</tal:t></span>
     69            <tal:c tal:content="context.start_in_timezone(timezone)"></tal:c>
     70          </li>
    7571          <li tal:condition="context.speed">
    7672            <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
     73            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
     74            <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c>km/h</span>
     75            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
     76            <tal:c tal:content="round(context.speed['max'], 1)"></tal:c>km/h</span>
    8177          </li>
    8278          <li tal:condition="hr">
    8379            <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
     80            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
     81            <tal:c tal:content="hr['avg']"></tal:c>bpm</span>
     82            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
     83            <tal:c tal:content="hr['max']"></tal:c> bpm</span>
    9084          </li>
    9185          <li tal:condition="cad">
    9286            <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>
     87            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
     88            <tal:c tal:content="cad['avg']"></tal:c></span>
     89            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
     90            <tal:c tal:content="cad['max']"></tal:c></span>
    9991          </li>
    10092          <li tal:condition="atemp">
    10193            <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>
     94            <span class="min"><tal:t i18n:translate="">Min.</tal:t>
     95            <tal:c tal:content="atemp['min']"></tal:c>℃</span>
     96            <span class="avg"><tal:t i18n:translate="">Avg.</tal:t>
     97            <tal:c tal:content="atemp['avg']"></tal:c>℃</span>
     98            <span class="max"><tal:t i18n:translate="">Max.</tal:t>
     99            <tal:c tal:content="atemp['max']"></tal:c>℃</span>
    108100          </li>
    109101        </ul>
Note: See TracChangeset for help on using the changeset viewer.