Changes in / [ded7d95:0b6c6fc] in OpenWorkouts-current


Ignore:
Location:
ow
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • ow/static/css/main.css

    rded7d95 r0b6c6fc  
    663663  border-radius: 4px;
    664664  padding: 0;
     665  width: auto;
     666  background-color: white;
    665667}
    666668.workout-options li {
    … …  
    10091011  font-size: 13px;
    10101012  font-size: 0.8125rem;
     1013  margin-right: 2em;
    10111014}
    10121015.user-profile-account {
    10131016  background-color: #fbfbfb;
     1017  border-bottom: 1px solid #e1e1e1;
    10141018  padding: 2em  1em;
    10151019}
    … …  
    10181022    padding: 2em 6em;
    10191023  }
     1024}
     1025.user-profile-account > div {
     1026  display: flex;
     1027  align-items: center;
    10201028}
    10211029.user-profile-account img {
    … …  
    10251033  border-radius: 50%;
    10261034  margin-bottom: 0.5em;
     1035  margin-right: 1em;
    10271036}
    10281037.user-profile-account h2 {
    … …  
    10301039  font-size: 21px;
    10311040  font-size: 1.3125rem;
     1041  font-weight: 400;
    10321042}
    10331043.user-profile-account p {
    … …  
    10501060  font-size: 14px;
    10511061  font-size: 0.875rem;
     1062  background-color: white;
     1063  padding: 0.5em 0.75em;
     1064  border-radius: 4px;
     1065  border: 1px solid #e1e1e1;
    10521066}
    10531067.profile-data li {
    1054   margin-bottom: 0.25em;
     1068  display: flex;
     1069  justify-content: space-between;
     1070  color: #959595;
     1071}
     1072.profile-data li:not(:last-child) {
     1073  margin-bottom: 0.5em;
     1074  padding-bottom: 0.5em;
     1075  border-bottom: 1px solid #e1e1e1;
     1076}
     1077.profile-data li span {
     1078  font-weight: bold;
     1079  color: #151515;
    10551080}
    10561081.profile-bio {
    1057   margin: 1em 0;
     1082  margin: 0.5em 0;
     1083  font-size: 14px;
     1084  font-size: 0.875rem;
    10581085}
    10591086.month-stats,
    10601087.latest-workouts {
    1061   max-width: 40vw;
    1062   margin: 0 auto;
     1088  max-width: 700px;
     1089}
     1090.center {
     1091  text-align: center;
     1092}
     1093.month-stats {
     1094  margin-bottom: 4em;
    10631095}
    10641096.latest-workouts h4 {

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

    rded7d95 r0b6c6fc  
    122122    border-radius: 4px;
    123123    padding: 0;
     124    width: auto;
     125    background-color: white;
    124126    li{
    125127        display: inline-block;

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

    rded7d95 r0b6c6fc  
    22    .workout-options {
    33        .font-size(13);
     4                margin-right: 2em;
    45    }
    56}
    … …  
    78.user-profile-account {
    89        background-color: @color-main-xtralight;
     10        border-bottom: 1px solid @color-main-light;
    911    padding: 2em  1em;
    1012    @media (min-width: @screen-s){
    1113        padding: 2em 6em;
     14    }
     15    >div {
     16        display: flex;
     17        align-items: center;
    1218    }
    1319    img {
    … …  
    1723        border-radius: 50%;
    1824        margin-bottom: .5em;
     25        margin-right: 1em;
    1926    }
    2027        h2 {
    2128                margin: 0 0 .15em 0;
    2229                .font-size(21);
     30                font-weight: 400;
    2331        }
    2432        p{
    … …  
    4048        padding: 0;
    4149        .font-size(14);
     50        background-color: white;
     51        padding: .5em .75em;
     52        border-radius: 4px;
     53        border: 1px solid @color-main-light;
    4254        li {
    43                 margin-bottom: .25em;
     55                display: flex;
     56                justify-content: space-between;
     57                color: @color-main-medium;
     58                &:not(:last-child) {
     59                        margin-bottom: .5em;
     60                        padding-bottom: .5em;
     61                        border-bottom: 1px solid @color-main-light;
     62                }
     63                span {
     64                        font-weight: bold;
     65                        color: @color-main;
     66                }
    4467        }
    4568}
    4669
    4770.profile-bio {
    48         margin: 1em 0;
     71        margin: .5em 0;
     72        .font-size(14);
    4973}
    5074
    5175.month-stats,
    5276.latest-workouts {
    53         max-width: 40vw;
    54         margin: 0 auto;
     77        max-width: 700px
     78}
     79
     80.center {
     81        text-align: center;
     82}
     83
     84.month-stats {
     85        margin-bottom: 4em;
    5586}
    5687

  • ow/templates/profile.pt

    rded7d95 r0b6c6fc  
    1616    <div class="user-profile">
    1717      <div class="user-profile-account">
    18         <tal:c tal:condition="getattr(context, 'picture', None)">
    19           <img tal:attributes="src request.resource_path(context, 'picture')"
    20                width="450" />
    21         </tal:c>
    22         <h2>
    23             <tal:fullname tal:content="context.fullname"></tal:fullname>
    24         </h2>
    25         <p>
    26           <tal:has-nickname tal:condition="context.nickname">
    27               <tal:nickname tal:content="context.nickname"></tal:nickname>
    28           </tal:has-nickname> |
    29           <span><tal:email tal:content="context.email"></tal:email></span>
    30         </p>
     18        <div>
     19          <tal:c tal:condition="getattr(context, 'picture', None)">
     20            <img tal:attributes="src request.resource_path(context, 'picture')"
     21                 width="450" />
     22          </tal:c>
     23          <div>
     24            <h2>
     25                <tal:fullname tal:content="context.fullname"></tal:fullname>
     26            </h2>
     27            <p>
     28              <tal:has-nickname tal:condition="context.nickname">
     29                  <tal:nickname tal:content="context.nickname"></tal:nickname>
     30              </tal:has-nickname> |
     31              <span><tal:email tal:content="context.email"></tal:email></span>
     32            </p>
     33            <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
     34            <ul class="workout-options">
     35              <li><a href=""
     36                 tal:attributes="href request.resource_url(context, 'edit')"
     37                 i18n:translate="">edit profile</a></li>
     38              <li><a href=""
     39                 tal:attributes="href request.resource_url(context, 'passwd')"
     40                 i18n:translate="">change password</a></li>
     41            </ul>
     42          </div>
     43        </div>
    3144
    32         <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
    33 
    34         <ul class="profile-data">
    35           <li>
    36             <tal:t i18n:translate="">Gender:</tal:t>
    37             <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
    38           </li>
    39           <li tal:define="birth_date getattr(context, 'birth_date', None)">
    40             <tal:t i18n:translate="">Birth date:</tal:t>
    41             <tal:c tal:condition="birth_date"
    42                    tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
    43             <tal:c tal:condition="birth_date is None">-</tal:c>
    44           </li>
    45           <li>
    46             <tal:t i18n:translate="">Height:</tal:t>
    47             <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
    48           </li>
    49           <li>
    50             <tal:t i18n:translate="">Weight:</tal:t>
    51             <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
    52           </li>
    53         </ul>
    54         <ul class="workout-options">
    55           <li><a href=""
    56              tal:attributes="href request.resource_url(context, 'edit')"
    57              i18n:translate="">edit profile</a></li>
    58           <li><a href=""
    59              tal:attributes="href request.resource_url(context, 'passwd')"
    60              i18n:translate="">change password</a></li>
    61         </ul>
    6245      </div>
    6346
    64       <div class="total-workouts">
    65         <tal:w tal:replace="context.num_workouts"></tal:w>
    66         <tal:t i18n:translate="">workouts</tal:t>
    67       </div>
     47      <div class="workout-content">
     48        <div class="workout-list">
     49          <div class="total-workouts">
     50            <tal:w tal:replace="context.num_workouts"></tal:w>
     51            <tal:t i18n:translate="">workouts</tal:t>
     52          </div>
    6853
    69       <div class="month-stats js-month-stats">
    70         <div class="svg-cotent">
    71           <svg width="800" height="180" viewBox="0 0 800 180"></svg>
    72         </div>
    73         <ul class="workout-options filters js-filters">
    74           <li><a href="#" class="js-distance is-active" i18n:translate="">distance</a></li>
    75           <li><a href="#" class="js-time" i18n:translate="">time</a></li>
    76           <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
    77         </ul>
     54          <div class="month-stats js-month-stats">
     55            <div class="svg-cotent">
     56              <svg width="900" height="180" viewBox="0 0 900 180"></svg>
     57            </div>
     58            <div class="center">
     59              <ul class="workout-options filters js-filters">
     60                <li><a href="#" class="js-distance is-active" i18n:translate="">distance</a></li>
     61                <li><a href="#" class="js-time" i18n:translate="">time</a></li>
     62                <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
     63              </ul>
    7864
    79         <ul class="workout-options switcher js-switcher">
    80           <li><a href="#" class="js-weekly" i18n:translate="">weekly</a></li>
    81           <li><a href="#" class="js-monthly is-active" i18n:translate="">monthly</a></li>
    82         </ul>
    83       </div>
     65              <ul class="workout-options switcher js-switcher">
     66                <li><a href="#" class="js-weekly" i18n:translate="">weekly</a></li>
     67                <li><a href="#" class="js-monthly is-active" i18n:translate="">monthly</a></li>
     68              </ul>
     69            </div>
     70          </div>
    8471
    8572
    86       <tal:r tal:repeat="workout workouts">
     73          <tal:r tal:repeat="workout workouts">
    8774
    88         <a name="workouts"></a>
     75            <article class="workout-resume">
    8976
     77              <h2 class="workout-title">
     78                <a href="" tal:content="workout.title"
     79                   tal:attributes="href request.resource_url(workout)"></a>
     80              </h2>
    9081
    91         <article class="workout-resume">
     82              <ul class="workout-info">
     83                <li>
     84                  <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
     85                </li>
     86                <li>
     87                  <!--! use the properly formatted duration instead of the timedelta object -->
     88                  <tal:c tal:content="workout._duration"></tal:c>
     89                </li>
     90                <li tal:condition="workout.distance">
     91                  <tal:c tal:content="workout.rounded_distance"></tal:c> km
     92                </li>
     93              </ul>
    9294
    93           <h2 class="workout-title">
    94             <a href="" tal:content="workout.title"
    95                tal:attributes="href request.resource_url(workout)"></a>
    96           </h2>
     95              <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
     96                <li tal:condition="hr">
     97                  <span i18n:translate="">HR (bpm)</span>:
     98                  <tal:c tal:content="hr['min']"></tal:c>
     99                  <tal:t i18n:translate="">Min.</tal:t>,
     100                  <tal:c tal:content="hr['avg']"></tal:c>
     101                  <tal:t i18n:translate="">Avg.</tal:t>,
     102                  <tal:c tal:content="hr['max']"></tal:c>
     103                  <tal:t i18n:translate="">Max.</tal:t>
     104                </li>
     105                <li tal:condition="cad">
     106                  <span i18n:translate="">Cad</span>:
     107                  <tal:c tal:content="cad['min']"></tal:c>
     108                  <tal:t i18n:translate="">Min.</tal:t>,
     109                  <tal:c tal:content="cad['avg']"></tal:c>
     110                  <tal:t i18n:translate="">Avg.</tal:t>,
     111                  <tal:c tal:content="cad['max']"></tal:c>
     112                  <tal:t i18n:translate="">Max.</tal:t>
     113                </li>
     114              </ul>
    97115
    98           <ul class="workout-info">
     116              <div class="workout-intro" tal:content="workout.notes"></div>
     117
     118              <div class="workout-map" tal:condition="workout.has_gpx">
     119                <a href="" tal:attributes="href request.resource_url(workout)">
     120                  <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
     121                            alt workout.title; title workout.title">
     122                </a>
     123              </div>
     124
     125            </article>
     126
     127          </tal:r>
     128        </div>
     129
     130        <div class="workout-aside">
     131          <ul class="profile-data">
    99132            <li>
    100               <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
     133              <span><tal:t i18n:translate="">Gender:</tal:t></span>
     134              <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
     135            </li>
     136            <li tal:define="birth_date getattr(context, 'birth_date', None)">
     137              <span><tal:t i18n:translate="">Birth date:</tal:t></span>
     138              <tal:c tal:condition="birth_date"
     139                     tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
     140              <tal:c tal:condition="birth_date is None">-</tal:c>
    101141            </li>
    102142            <li>
    103               <!--! use the properly formatted duration instead of the timedelta object -->
    104               <tal:c tal:content="workout._duration"></tal:c>
     143              <span><tal:t i18n:translate="">Height:</tal:t></span>
     144              <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
    105145            </li>
    106             <li tal:condition="workout.distance">
    107               <tal:c tal:content="workout.rounded_distance"></tal:c> km
     146            <li>
     147              <span><tal:t i18n:translate="">Weight:</tal:t></span>
     148              <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
    108149            </li>
    109150          </ul>
    110 
    111           <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
    112             <li tal:condition="hr">
    113               <span i18n:translate="">HR (bpm)</span>:
    114               <tal:c tal:content="hr['min']"></tal:c>
    115               <tal:t i18n:translate="">Min.</tal:t>,
    116               <tal:c tal:content="hr['avg']"></tal:c>
    117               <tal:t i18n:translate="">Avg.</tal:t>,
    118               <tal:c tal:content="hr['max']"></tal:c>
    119               <tal:t i18n:translate="">Max.</tal:t>
    120             </li>
    121             <li tal:condition="cad">
    122               <span i18n:translate="">Cad</span>:
    123               <tal:c tal:content="cad['min']"></tal:c>
    124               <tal:t i18n:translate="">Min.</tal:t>,
    125               <tal:c tal:content="cad['avg']"></tal:c>
    126               <tal:t i18n:translate="">Avg.</tal:t>,
    127               <tal:c tal:content="cad['max']"></tal:c>
    128               <tal:t i18n:translate="">Max.</tal:t>
    129             </li>
    130           </ul>
    131 
    132           <div class="workout-intro" tal:content="workout.notes"></div>
    133 
    134           <div class="workout-map" tal:condition="workout.has_gpx">
    135             <a href="" tal:attributes="href request.resource_url(workout)">
    136               <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
    137                         alt workout.title; title workout.title">
    138             </a>
    139           </div>
    140 
    141         </article>
    142 
    143       </tal:r>
     151        </div>
     152      </div>
    144153    </div>
    145154
Note: See TracChangeset for help on using the changeset viewer.