Changeset 67fc2ed in OpenWorkouts-current


Ignore:
Timestamp:
Jan 29, 2019, 6:39:18 PM (5 years ago)
Author:
Segundo Fdez <segun.2@…>
Branches:
current, feature/docs, master
Children:
10c8e6e
Parents:
594fbe8
Message:

Updated ui for profile basic interface

Location:
ow
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • ow/static/css/main.css

    r594fbe8 r67fc2ed  
    680680  color: #151515;
    681681}
     682.workout-options a.is-active {
     683  background-color: #959595;
     684  color: white;
     685}
    682686.owo-del a:hover {
    683687  color: red;
    … …  
    898902<a class="login-remember" href="#">Forgot your password?</a>
    899903*/
    900 .user-profile {
    901   padding: 2em  1em;
    902 }
    903 @media (min-width: 480px) {
    904   .user-profile {
    905     padding: 2em 6em;
    906   }
    907 }
    908904.user-profile img {
    909905  width: 140px;
    … …  
    911907  object-fit: cover;
    912908  border-radius: 50%;
     909  margin-bottom: 0.5em;
    913910}
    914911.user-profile .workout-options {
     912  font-size: 13px;
     913  font-size: 0.8125rem;
     914}
     915.user-profile-account {
     916  background-color: #fbfbfb;
     917  padding: 2em  1em;
     918}
     919@media (min-width: 480px) {
     920  .user-profile-account {
     921    padding: 2em 6em;
     922  }
     923}
     924.user-profile-account h2 {
     925  margin: 0 0 0.15em 0;
     926  font-size: 21px;
     927  font-size: 1.3125rem;
     928}
     929.user-profile-account p {
     930  color: #555555;
     931  font-size: 14px;
     932  font-size: 0.875rem;
     933  margin: 0;
     934}
     935.user-profile-account p span {
     936  color: #959595;
     937}
     938.user-profile-account .workouts {
     939  font-size: 18px;
     940  font-size: 1.125rem;
     941  font-weight: bold;
     942}
     943.profile-data {
     944  list-style-type: none;
     945  padding: 0;
     946  font-size: 14px;
     947  font-size: 0.875rem;
     948}
     949.profile-data li {
     950  margin-bottom: 0.25em;
     951}
     952.profile-bio {
     953  margin: 1em 0;
     954}
     955.month-stats,
     956.latest-workouts {
     957  max-width: 40vw;
     958  margin: 0 auto;
     959}
     960.latest-workouts h4 {
     961  margin: 0;
     962}
     963.latest-workouts h4 a {
     964  color: #151515;
     965  text-decoration: none;
     966}
     967.latest-workouts > span {
     968  font-size: 13px;
     969  font-size: 0.8125rem;
     970}
     971.latest-workouts p {
     972  margin-top: 0.25em;
     973  color: #959595;
    915974  font-size: 13px;
    916975  font-size: 0.8125rem;

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

    r594fbe8 r67fc2ed  
    136136        &:hover{
    137137            color: @color-main;
     138        }
     139        &.is-active {
     140            background-color: @color-main-medium;
     141            color: white;
    138142        }
    139143    }

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

    r594fbe8 r67fc2ed  
    11.user-profile {
    2     padding: 2em  1em;
    3     @media (min-width: @screen-s){
    4         padding: 2em 6em;
    5     }
    62    img {
    73        width: 140px;
    … …  
    95        object-fit: cover;
    106        border-radius: 50%;
     7        margin-bottom: .5em;
    118    }
    129    .workout-options {
    … …  
    1411    }
    1512}
     13
     14.user-profile-account {
     15        background-color: @color-main-xtralight;
     16    padding: 2em  1em;
     17    @media (min-width: @screen-s){
     18        padding: 2em 6em;
     19    }
     20        h2 {
     21                margin: 0 0 .15em 0;
     22                .font-size(21);
     23        }
     24        p{
     25                color: @color-main-dark;
     26                .font-size(14);
     27                margin: 0;
     28                span {
     29                        color: @color-main-medium;
     30                }
     31        }
     32        .workouts {
     33                .font-size(18);
     34                font-weight: bold;
     35        }
     36}
     37
     38.profile-data {
     39        list-style-type: none;
     40        padding: 0;
     41        .font-size(14);
     42        li {
     43                margin-bottom: .25em;
     44        }
     45}
     46
     47.profile-bio {
     48        margin: 1em 0;
     49}
     50
     51.month-stats,
     52.latest-workouts {
     53        max-width: 40vw;
     54        margin: 0 auto;
     55}
     56
     57.latest-workouts {
     58        h4 {
     59                margin:0;
     60                a {
     61                        color: @color-main;
     62                        text-decoration: none;
     63                }
     64        }
     65        >span {
     66                .font-size(13);
     67        }
     68        p {
     69                margin-top: .25em;
     70                color: @color-main-medium;
     71                .font-size(13);
     72        }
     73}

  • ow/templates/profile.pt

    r594fbe8 r67fc2ed  
    1515
    1616    <div class="user-profile">
    17       <tal:c tal:condition="getattr(context, 'picture', None)">
    18         <img tal:attributes="src request.resource_path(context, 'picture')"
    19              width="450" />
    20       </tal:c>
    21       <h2>
    22           <tal:fullname tal:content="context.fullname"></tal:fullname>
    23       </h2>
    24       <p>
    25         <tal:has-nickname tal:condition="context.nickname">
    26             <tal:nickname tal:content="context.nickname"></tal:nickname>
    27         </tal:has-nickname> (<tal:email tal:content="context.email"></tal:email>)
    28       </p>
    29       <ul class="workout-options">
    30         <li><a href=""
    31            tal:attributes="href request.resource_url(context, 'edit')"
    32            i18n:translate="">edit profile</a></li>
    33         <li><a href=""
    34            tal:attributes="href request.resource_url(context, 'passwd')"
    35            i18n:translate="">change password</a></li>
    36       </ul>
     17      <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>
    3731
    38       <div class="profile-info">
    39         <ul>
     32        <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
     33
     34        <ul class="profile-data">
    4035          <li>
    4136            <tal:t i18n:translate="">Gender:</tal:t>
    … …  
    5752          </li>
    5853        </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>
     62
     63        <div class="workouts">
     64          <tal:w tal:replace="context.num_workouts"></tal:w>
     65          <tal:t i18n:translate="">Workouts</tal:t>
     66        </div>
    5967      </div>
    6068
    61       <div class="profile-bio" tal:content="getattr(context, 'bio', '')">
    62       </div>
    63 
    64       <div class="workouts">
    65         <tal:t i18n:translate="">Total number of workouts</tal:t>:
    66         <tal:w tal:replace="context.num_workouts"></tal:w>
     69      <div class="month-stats js-month-stats">
     70        <div class="svg-cotent">
     71          <svg width="600" height="300" viewBox="0 0 600 300"></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>
    6778      </div>
    6879
    6980      <div class="latest-workouts">
    70         <p i18n:translate="">Latest workouts</p>
     81        <h3 i18n:translate="">Latest workouts</h3>
    7182        <tal:r tal:repeat="workout context.workouts()[:5]">
    7283          <div class="workout">
    73             <tal:c tal:content="workout.sport"></tal:c> -
    74             <a href="" tal:content="workout.title"
     84            <h4>
     85              <a href="" tal:content="workout.title"
    7586               tal:attributes="href request.resource_url(workout)"></a>
    76             (<tal:c tal:content="workout.start"></tal:c>,
     87            </h4>
     88            <span><tal:c tal:content="workout.sport"></tal:c></span>
     89            <p><tal:c tal:content="workout.start"></tal:c>,
    7790            <tal:c tal:content="workout.duration"></tal:c>,
    78             <tal:c tal:content="workout.rounded_distance"></tal:c> km)
     91            <tal:c tal:content="workout.rounded_distance"></tal:c> km
     92            </p>
    7993          </div>
    8094        </tal:r>
    81       </div>
    82 
    83       <div class="month-stats js-month-stats">
    84         <svg width="600" height="300"></svg>
    85         <ul class="filters js-filters">
    86           <li><a href="#" class="js-distance" i18n:translate="">distance</a></li>
    87           <li><a href="#" class="js-time" i18n:translate="">time</a></li>
    88           <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
    89         </ul>
    9095      </div>
    9196
Note: See TracChangeset for help on using the changeset viewer.