Changeset 1fe89ea in OpenWorkouts-current


Ignore:
Timestamp:
Jan 29, 2019, 12:54:29 PM (5 years ago)
Author:
Segundo Fdez <segun.2@…>
Branches:
current, feature/docs, master
Children:
3e48af6
Parents:
d0fc76b
Message:

update dashboard layout ui

Location:
ow
Files:
5 edited

Legend:

Unmodified
Added
Removed

  • ow/static/css/main.css

    rd0fc76b r1fe89ea  
    753753}
    754754.aside-profile {
    755   margin-bottom: 2em;
     755  margin-bottom: 1em;
    756756}
    757757.aside-profile img {
    … …  
    775775  color: #555555;
    776776}
     777/* Week report */
     778.svg-cotent svg {
     779  width: 100%;
     780  height: 100%;
     781}
     782.svg-cotent .label {
     783  font-size: 13px;
     784  font-size: 0.8125rem;
     785  text-anchor: middle;
     786}
     787.svg-cotent .tick {
     788  font-size: 13px;
     789  font-size: 0.8125rem;
     790}
     791.week-stats {
     792  border: 1px solid #e1e1e1;
     793  background-color: rgba(225, 225, 225, 0.1);
     794  padding: 0.75em;
     795  border-radius: 4px;
     796  margin-bottom: 2em;
     797}
     798.week-stats h3 {
     799  margin: 0;
     800  font-size: 14px;
     801  font-size: 0.875rem;
     802}
     803.week-stats h3 + p {
     804  margin: 0.25em 0 2em 0;
     805  color: #959595;
     806  font-size: 13px;
     807  font-size: 0.8125rem;
     808}
     809.workout-activity-summary {
     810  list-style-type: none;
     811  padding: 0;
     812  margin: 0;
     813  background-color: rgba(21, 21, 21, 0.8);
     814  margin-bottom: 0.75em;
     815}
     816.workout-activity-summary li {
     817  color: #e1e1e1;
     818  border-bottom: 1px solid #959595;
     819  padding: 0.75em 1em;
     820  display: flex;
     821  justify-content: space-between;
     822}
     823.workout-activity-summary li:last-child {
     824  margin-bottom: 0;
     825  border: none;
     826}
     827.workout-activity-summary li span:first-child {
     828  font-weight: bold;
     829}
    777830.workout-activity-tree {
    778831  list-style-type: none;
    … …  
    800853  font-weight: 700;
    801854  margin-bottom: 0.5em;
     855  font-size: 16px;
     856  font-size: 1rem;
    802857}
    803858.workout-activity-tree a.viewing-month {
    … …  
    825880  background-color: #e1e1e1;
    826881}
     882/* Workout detail */
     883#map {
     884  height: 50vh;
     885}
     886/* dashboard graphics*/
     887.x-axis path,
     888.x-axis line {
     889  fill: none;
     890  stroke: none;
     891}
     892.bar {
     893  fill: #f8b5be;
     894}
     895.bar:hover {
     896  fill: #ee4056;
     897}
     898.current {
     899  fill: #ee4056;
     900}

  • ow/static/js/ow.js

    rd0fc76b r1fe89ea  
    148148         */
    149149        var chart = d3.select("svg"),
    150             margin = {top: 20, right: 20, bottom: 30, left: 50},
     150            margin = {top: 17, right: 0, bottom: 20, left: 0},
    151151            width = +chart.attr("width") - margin.left - margin.right,
    152152            height = +chart.attr("height") - margin.top - margin.bottom,
    … …  
    211211                })
    212212                .attr("y", function (d) {
    213                     return y(Number(d.distance) + 5);
    214                 })
     213                    /*
     214                      Get the value for the current bar, then get the maximum
     215                      value to be displayed in the bar, which is used to
     216                      calculate the proper position of the label for this bar,
     217                      relatively to its height (1% above the bar)
     218                     */
     219                    var max = y.domain()[1];
     220                    return y(d.distance + y.domain()[1] * 0.02);
     221            })
    215222                .text(function(d) {
    216223                    if (Number(d.distance) > 0) {

  • ow/static/less/main.less

    rd0fc76b r1fe89ea  
    2525@import "modules/workout.less";
    2626
     27
     28
     29/* Workout detail */
     30#map {
     31    height: 50vh;
     32}
     33
     34/* dashboard graphics*/
     35
     36.x-axis path, .x-axis line {
     37    fill: none;
     38    stroke: none;
     39}
     40
     41.bar {
     42    fill: #f8b5be;
     43}
     44
     45.bar:hover {
     46    fill: #ee4056;
     47}
     48
     49.current {
     50    fill: #ee4056;
     51}

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

    rd0fc76b r1fe89ea  
    154154}
    155155
     156
     157
    156158.aside-profile {
    157     margin-bottom: 2em;
     159    margin-bottom: 1em;
    158160    img {
    159161        width: 80px;
    … …  
    177179
    178180
     181
     182/* Week report */
     183
     184.svg-cotent {
     185    svg {
     186        width: 100%;
     187        height: 100%;
     188    }
     189
     190    .label {
     191        .font-size(13);
     192        text-anchor: middle;
     193    }
     194    .tick {
     195        .font-size(13);
     196    }
     197
     198}
     199.week-stats {
     200    border: 1px solid @color-main-light;
     201    background-color: fade(@color-main-light, 10%);
     202    padding: .75em;
     203    border-radius: 4px;
     204    margin-bottom: 2em;
     205    h3 {
     206        margin: 0;
     207        .font-size(14);
     208        & + p {
     209            margin: .25em 0 2em 0;
     210            color: @color-main-medium;
     211            .font-size(13);
     212        }
     213    }
     214}
     215
     216.workout-activity-summary {
     217    list-style-type: none;
     218    padding: 0;
     219    margin: 0;
     220    background-color: fade(@color-main, 80%);
     221    margin-bottom: .75em;
     222    li {
     223        color: @color-main-light;
     224        border-bottom: 1px solid @color-main-medium;
     225        padding: .75em 1em;
     226        display: flex;
     227        justify-content: space-between;
     228        &:last-child {
     229            margin-bottom: 0;
     230            border: none;
     231        }
     232        span {
     233            &:first-child {
     234                font-weight: bold;
     235            }
     236        }
     237    }
     238}
    179239
    180240.workout-activity-tree {
    … …  
    201261            font-weight: 700;
    202262            margin-bottom: .5em;
     263            .font-size(16);
    203264        }
    204265        &.viewing-month {

  • ow/templates/dashboard.pt

    rd0fc76b r1fe89ea  
    108108
    109109      <aside class="workout-aside">
    110       <div class="aside-profile">
    111         <tal:c tal:condition="getattr(context, 'picture', None)">
    112           <img tal:attributes="src request.resource_path(context, 'picture')"
    113                width="450" />
    114         </tal:c>
    115         <h2 tal:content="context.fullname"></h2>
    116         <ul>
    117           <Li>
    118             <tal:n tal:content="context.num_workouts"></tal:n> <tal:t i18n:translate="">workouts</tal:t>
    119           </Li>
    120         </ul>
    121       </div>
     110        <div class="aside-profile">
     111          <tal:c tal:condition="getattr(context, 'picture', None)">
     112            <img tal:attributes="src request.resource_path(context, 'picture')"
     113                 width="450" />
     114          </tal:c>
     115          <h2 tal:content="context.fullname"></h2>
     116          <ul>
     117            <Li>
     118              <tal:n tal:content="context.num_workouts"></tal:n> <tal:t i18n:translate="">workouts</tal:t>
     119            </Li>
     120          </ul>
     121        </div>
     122          <div class="week-stats js-week-stats">
     123            <h3><tal:t i18n:translate="">This week</tal:t></h3>
     124            <p tal:define="totals context.week_totals">
     125              <span class="week-stats-distance">
     126                <tal:d tal:content="round(totals['distance'])"></tal:d>
     127                <tal:t i18n:translate="">kms</tal:t>
     128              </span>
     129              <span class="week-stats-time">
     130                <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
     131                  <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
     132                  <tal:t i18n:translate="">hours</tal:t>,
     133                  <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
     134                  <tal:t i18n:translate="">min.</tal:t>
     135                </tal:hms>
     136              </span>
     137            </p>
     138            <div class="svg-cotent">
     139              <svg width="300" height="200" viewBox="0 0 300 200"></svg>
     140            </div>
     141          </div>
     142
    122143          <tal:activity_tree tal:condition="context.num_workouts > 0">
    123144              <ul class="workout-activity-tree" tal:define="tree context.activity_dates_tree">
    … …  
    128149                                             class 'js-year viewing-year' if is_viewing_year  else 'js-year'">
    129150                          </a>
     151                          <ul tal:define="stats context.stats(year)" tal:attributes="class 'workout-activity-summary' if is_viewing_year  else 'workout-activity-summary hidden'">
     152                            <li>
     153                              <span i18n:translate="">Workouts:</span>
     154                              <span tal:content="stats['workouts']"></span>
     155                            </li>
     156                            <li>
     157                              <span i18n:translate="">Distance:</span>
     158                              <span> <tal:kms tal:content="round(stats['distance'])"></tal:kms> km</span>
     159                            </li>
     160                            <li>
     161                              <span i18n:translate="">Time:</span>
     162                              <tal:hms tal:define="hms timedelta_to_hms(stats['time'])">
     163                                <span>
     164                                  <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
     165                                  <tal:t i18n:translate="">hours</tal:t>,
     166                                  <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
     167                                  <tal:t i18n:translate="">min.</tal:t>
     168                                </span>
     169                              </tal:hms>
     170                            </li>
     171                            <li>
     172                              <span i18n:translate="">Elevation:</span>
     173                              <span> <tal:m tal:content="stats['elevation']"></tal:m> m</span>
     174                            </li>
     175                          </ul>
    130176                          <ul class="workout-activity-tree-year"
    131177                              tal:attributes="class 'workout-activity-tree-year' if is_viewing_year  else 'workout-activity-tree-year hidden'">
    … …  
    146192          </tal:activity_tree>
    147193
    148           <tal:stats>
    149 
    150             <div class="week-stats js-week-stats">
    151               <h3><tal:t i18n:translate="">This week</tal:t></h3>
    152               <h4 tal:define="totals context.week_totals">
    153                 <span class="week_totals_left">
    154                   <tal:d tal:content="round(totals['distance'])"></tal:d>
    155                   <tal:t i18n:translate="">kms</tal:t>
    156                 </span>
    157                 <span class="week_totals_right">
    158                   <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
    159                     <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
    160                     <tal:t i18n:translate="">hours</tal:t>,
    161                     <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
    162                     <tal:t i18n:translate="">min.</tal:t>
    163                   </tal:hms>
    164                 </span>
    165               </h4>
    166               <svg width="300" height="200"></svg>
    167               <style>
    168 
    169               </style>
    170             </div>
    171 
    172             <div class="user-stats">
    173               <tal:year-stats tal:repeat="year context.activity_years">
    174                 <h3><a href="" tal:content="year"></a></h3>
    175                 <ul tal:define="stats context.stats(year)">
    176                   <li>
    177                     <span i18n:translate="">Workouts:</span>
    178                     <span tal:content="stats['workouts']"></span>
    179                   </li>
    180                   <li>
    181                     <span i18n:translate="">Distance:</span>
    182                     <span tal:content="round(stats['distance'])"></span> kms
    183                   </li>
    184                   <li>
    185                     <span i18n:translate="">Time:</span>
    186                     <tal:hms tal:define="hms timedelta_to_hms(stats['time'])">
    187                       <span>
    188                         <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
    189                         <tal:t i18n:translate="">hours</tal:t>,
    190                         <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
    191                         <tal:t i18n:translate="">min.</tal:t>
    192                       </span>
    193                     </tal:hms>
    194                   </li>
    195                   <li>
    196                     <span i18n:translate="">Elevation:</span>
    197                     <span tal:content="stats['elevation']"></span> m
    198                   </li>
    199                 </ul>
    200               </tal:year-stats>
    201             </div>
    202           </tal:stats>
    203 
    204194      </aside>
    205195
Note: See TracChangeset for help on using the changeset viewer.