Changes in / [6993c72:3357e47] in OpenWorkouts-current


Ignore:
Files:
3 added
24 deleted
11 edited

Legend:

Unmodified
Added
Removed

  • .gitignore

    r6993c72 r3357e47  
    4242# JS static external components and libraries
    4343ow/static/components
    44 ow/static/maps

  • ow/static/css/main.css

    r6993c72 r3357e47  
     1img,legend {
     2    border:0
     3}
     4
     5legend,td,th {
     6    padding:0
     7}
     8
     9.add-workout,.button,sub,sup {
     10    position:relative
     11}
     12
     13.button,.header-content a,.workout-resume ul a,.workout-title a {
     14    text-decoration:none
     15}
     16
    117@font-face {
    2   font-family: 'Open Sans';
    3   font-style: italic;
    4   font-weight: 300;
    5   src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(http://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
    6 }
     18    font-family:'Open Sans';
     19    font-style:normal;
     20    font-weight:300;
     21    src:local('Open Sans Light'),local('OpenSans-Light'),url(http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTYnF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
     22}
     23
    724@font-face {
    8   font-family: 'Open Sans';
    9   font-style: italic;
    10   font-weight: 400;
    11   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v15/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
    12 }
     25    font-family:'Open Sans';
     26    font-style:normal;
     27    font-weight:400;
     28    src:local('Open Sans'),local('OpenSans'),url(http://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')
     29}
     30
    1331@font-face {
    14   font-family: 'Open Sans';
    15   font-style: italic;
    16   font-weight: 700;
    17   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
    18 }
     32    font-family:'Open Sans';
     33    font-style:normal;
     34    font-weight:700;
     35    src:local('Open Sans Bold'),local('OpenSans-Bold'),url(http://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
     36}
     37
    1938@font-face {
    20   font-family: 'Open Sans';
    21   font-style: normal;
    22   font-weight: 300;
    23   src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
    24 }
     39    font-family:'Open Sans';
     40    font-style:normal;
     41    font-weight:800;
     42    src:local('Open Sans Extrabold'),local('OpenSans-Extrabold'),url(http://fonts.gstatic.com/s/opensans/v13/EInbV5DfGHOiMmvb1Xr-honF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
     43}
     44
    2545@font-face {
    26   font-family: 'Open Sans';
    27   font-style: normal;
    28   font-weight: 400;
    29   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(http://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
    30 }
     46    font-family:'Open Sans';
     47    font-style:italic;
     48    font-weight:300;
     49    src:local('Open Sans Light Italic'),local('OpenSansLight-Italic'),url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxrfB31yxOzP-czbf6AAKCVo.ttf) format('truetype')
     50}
     51
    3152@font-face {
    32   font-family: 'Open Sans';
    33   font-style: normal;
    34   font-weight: 700;
    35   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
    36 }
     53    font-family:'Open Sans';
     54    font-style:italic;
     55    font-weight:400;
     56    src:local('Open Sans Italic'),local('OpenSans-Italic'),url(http://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBp0EAVxt0G0biEntp43Qt6E.ttf) format('truetype')
     57}
     58
    3759@font-face {
    38   font-family: 'Open Sans';
    39   font-style: normal;
    40   font-weight: 800;
    41   src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(http://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
    42 }
    43 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
    44 /* Document
    45    ========================================================================== */
    46 /**
    47  * 1. Correct the line height in all browsers.
    48  * 2. Prevent adjustments of font size after orientation changes in iOS.
    49  */
     60    font-family:'Open Sans';
     61    font-style:italic;
     62    font-weight:700;
     63    src:local('Open Sans Bold Italic'),local('OpenSans-BoldItalic'),url(http://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxp_TkvowlIOtbR7ePgFOpF4.ttf) format('truetype')
     64}
     65
    5066html {
    51   line-height: 1.15;
    52   /* 1 */
    53   -webkit-text-size-adjust: 100%;
    54   /* 2 */
    55 }
    56 /* Sections
    57    ========================================================================== */
    58 /**
    59  * Remove the margin in all browsers.
    60  */
     67    font-family:sans-serif;
     68    -ms-text-size-adjust:100%;
     69    -webkit-text-size-adjust:100%;
     70    box-sizing:border-box
     71}
     72
     73article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
     74    display:block
     75}
     76
     77audio,canvas,progress,video {
     78    display:inline-block;
     79    vertical-align:baseline
     80}
     81
     82audio:not([controls]) {
     83    display:none;
     84    height:0
     85}
     86
     87.hide,[hidden],template {
     88    display:none
     89}
     90
     91a {
     92    background-color:transparent
     93}
     94
     95a:active,a:hover {
     96    outline:0
     97}
     98
     99abbr[title] {
     100    border-bottom:1px dotted
     101}
     102
     103b,optgroup,strong {
     104    font-weight:700
     105}
     106
     107dfn {
     108    font-style:italic
     109}
     110
     111h1 {
     112    font-size:2em;
     113    margin:.67em 0
     114}
     115
     116mark {
     117    background:#ff0;
     118    color:#000
     119}
     120
     121small {
     122    font-size:80%
     123}
     124
     125sub,sup {
     126    font-size:75%;
     127    line-height:0;
     128    vertical-align:baseline
     129}
     130
     131sup {
     132    top:-.5em
     133}
     134
     135sub {
     136    bottom:-.25em
     137}
     138
     139svg:not(:root) {
     140    overflow:hidden
     141}
     142
     143figure {
     144    margin:1em 40px
     145}
     146
     147hr {
     148    box-sizing:content-box;
     149    height:0
     150}
     151
     152pre,textarea {
     153    overflow:auto
     154}
     155
     156code,kbd,pre,samp {
     157    font-family:monospace,monospace;
     158    font-size:1em
     159}
     160
     161button,input,optgroup,select,textarea {
     162    color:inherit;
     163    font:inherit;
     164    margin:0
     165}
     166
     167button {
     168    overflow:visible
     169}
     170
     171button,select {
     172    text-transform:none
     173}
     174
     175button,html input[type=button],input[type=reset],input[type=submit] {
     176    -webkit-appearance:button;
     177    cursor:pointer
     178}
     179
     180button[disabled],html input[disabled] {
     181    cursor:default
     182}
     183
     184button::-moz-focus-inner,input::-moz-focus-inner {
     185    border:0;
     186    padding:0
     187}
     188
     189input {
     190    line-height:normal
     191}
     192
     193input[type=checkbox],input[type=radio] {
     194    box-sizing:border-box;
     195    padding:0
     196}
     197
     198input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
     199    height:auto
     200}
     201
     202input[type=search] {
     203    -webkit-appearance:textfield;
     204    box-sizing:content-box
     205}
     206
     207input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
     208    -webkit-appearance:none
     209}
     210
     211fieldset {
     212    border:1px solid silver;
     213    margin:0 2px;
     214    padding:.35em .625em .75em
     215}
     216
     217table {
     218    border-collapse:collapse;
     219    border-spacing:0
     220}
     221
    61222body {
    62   margin: 0;
    63 }
    64 /**
    65  * Render the `main` element consistently in IE.
    66  */
    67 main {
    68   display: block;
    69 }
    70 /**
    71  * Correct the font size and margin on `h1` elements within `section` and
    72  * `article` contexts in Chrome, Firefox, and Safari.
    73  */
    74 h1 {
    75   font-size: 2em;
    76   margin: 0.67em 0;
    77 }
    78 /* Grouping content
    79    ========================================================================== */
    80 /**
    81  * 1. Add the correct box sizing in Firefox.
    82  * 2. Show the overflow in Edge and IE.
    83  */
    84 hr {
    85   box-sizing: content-box;
    86   /* 1 */
    87   height: 0;
    88   /* 1 */
    89   overflow: visible;
    90   /* 2 */
    91 }
    92 /**
    93  * 1. Correct the inheritance and scaling of font size in all browsers.
    94  * 2. Correct the odd `em` font sizing in all browsers.
    95  */
    96 pre {
    97   font-family: monospace, monospace;
    98   /* 1 */
    99   font-size: 1em;
    100   /* 2 */
    101 }
    102 /* Text-level semantics
    103    ========================================================================== */
    104 /**
    105  * Remove the gray background on active links in IE 10.
    106  */
    107 a {
    108   background-color: transparent;
    109 }
    110 /**
    111  * 1. Remove the bottom border in Chrome 57-
    112  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
    113  */
    114 abbr[title] {
    115   border-bottom: none;
    116   /* 1 */
    117   text-decoration: underline;
    118   /* 2 */
    119   text-decoration: underline dotted;
    120   /* 2 */
    121 }
    122 /**
    123  * Add the correct font weight in Chrome, Edge, and Safari.
    124  */
    125 b,
    126 strong {
    127   font-weight: bolder;
    128 }
    129 /**
    130  * 1. Correct the inheritance and scaling of font size in all browsers.
    131  * 2. Correct the odd `em` font sizing in all browsers.
    132  */
    133 code,
    134 kbd,
    135 samp {
    136   font-family: monospace, monospace;
    137   /* 1 */
    138   font-size: 1em;
    139   /* 2 */
    140 }
    141 /**
    142  * Add the correct font size in all browsers.
    143  */
    144 small {
    145   font-size: 80%;
    146 }
    147 /**
    148  * Prevent `sub` and `sup` elements from affecting the line height in
    149  * all browsers.
    150  */
    151 sub,
    152 sup {
    153   font-size: 75%;
    154   line-height: 0;
    155   position: relative;
    156   vertical-align: baseline;
    157 }
    158 sub {
    159   bottom: -0.25em;
    160 }
    161 sup {
    162   top: -0.5em;
    163 }
    164 /* Embedded content
    165    ========================================================================== */
    166 /**
    167  * Remove the border on images inside links in IE 10.
    168  */
    169 img {
    170   border-style: none;
    171 }
    172 /* Forms
    173    ========================================================================== */
    174 /**
    175  * 1. Change the font styles in all browsers.
    176  * 2. Remove the margin in Firefox and Safari.
    177  */
    178 button,
    179 input,
    180 optgroup,
    181 select,
    182 textarea {
    183   font-family: inherit;
    184   /* 1 */
    185   font-size: 100%;
    186   /* 1 */
    187   line-height: 1.15;
    188   /* 1 */
    189   margin: 0;
    190   /* 2 */
    191 }
    192 /**
    193  * Show the overflow in IE.
    194  * 1. Show the overflow in Edge.
    195  */
    196 button,
    197 input {
    198   /* 1 */
    199   overflow: visible;
    200 }
    201 /**
    202  * Remove the inheritance of text transform in Edge, Firefox, and IE.
    203  * 1. Remove the inheritance of text transform in Firefox.
    204  */
    205 button,
    206 select {
    207   /* 1 */
    208   text-transform: none;
    209 }
    210 /**
    211  * Correct the inability to style clickable types in iOS and Safari.
    212  */
    213 button,
    214 [type="button"],
    215 [type="reset"],
    216 [type="submit"] {
    217   -webkit-appearance: button;
    218 }
    219 /**
    220  * Remove the inner border and padding in Firefox.
    221  */
    222 button::-moz-focus-inner,
    223 [type="button"]::-moz-focus-inner,
    224 [type="reset"]::-moz-focus-inner,
    225 [type="submit"]::-moz-focus-inner {
    226   border-style: none;
    227   padding: 0;
    228 }
    229 /**
    230  * Restore the focus styles unset by the previous rule.
    231  */
    232 button:-moz-focusring,
    233 [type="button"]:-moz-focusring,
    234 [type="reset"]:-moz-focusring,
    235 [type="submit"]:-moz-focusring {
    236   outline: 1px dotted ButtonText;
    237 }
    238 /**
    239  * Correct the padding in Firefox.
    240  */
    241 fieldset {
    242   padding: 0.35em 0.75em 0.625em;
    243 }
    244 /**
    245  * 1. Correct the text wrapping in Edge and IE.
    246  * 2. Correct the color inheritance from `fieldset` elements in IE.
    247  * 3. Remove the padding so developers are not caught out when they zero out
    248  *    `fieldset` elements in all browsers.
    249  */
    250 legend {
    251   box-sizing: border-box;
    252   /* 1 */
    253   color: inherit;
    254   /* 2 */
    255   display: table;
    256   /* 1 */
    257   max-width: 100%;
    258   /* 1 */
    259   padding: 0;
    260   /* 3 */
    261   white-space: normal;
    262   /* 1 */
    263 }
    264 /**
    265  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
    266  */
    267 progress {
    268   vertical-align: baseline;
    269 }
    270 /**
    271  * Remove the default vertical scrollbar in IE 10+.
    272  */
    273 textarea {
    274   overflow: auto;
    275 }
    276 /**
    277  * 1. Add the correct box sizing in IE 10.
    278  * 2. Remove the padding in IE 10.
    279  */
    280 [type="checkbox"],
    281 [type="radio"] {
    282   box-sizing: border-box;
    283   /* 1 */
    284   padding: 0;
    285   /* 2 */
    286 }
    287 /**
    288  * Correct the cursor style of increment and decrement buttons in Chrome.
    289  */
    290 [type="number"]::-webkit-inner-spin-button,
    291 [type="number"]::-webkit-outer-spin-button {
    292   height: auto;
    293 }
    294 /**
    295  * 1. Correct the odd appearance in Chrome and Safari.
    296  * 2. Correct the outline style in Safari.
    297  */
    298 [type="search"] {
    299   -webkit-appearance: textfield;
    300   /* 1 */
    301   outline-offset: -2px;
    302   /* 2 */
    303 }
    304 /**
    305  * Remove the inner padding in Chrome and Safari on macOS.
    306  */
    307 [type="search"]::-webkit-search-decoration {
    308   -webkit-appearance: none;
    309 }
    310 /**
    311  * 1. Correct the inability to style clickable types in iOS and Safari.
    312  * 2. Change font properties to `inherit` in Safari.
    313  */
    314 ::-webkit-file-upload-button {
    315   -webkit-appearance: button;
    316   /* 1 */
    317   font: inherit;
    318   /* 2 */
    319 }
    320 /* Interactive
    321    ========================================================================== */
    322 /*
    323  * Add the correct display in Edge, IE 10+, and Firefox.
    324  */
    325 details {
    326   display: block;
    327 }
    328 /*
    329  * Add the correct display in all browsers.
    330  */
    331 summary {
    332   display: list-item;
    333 }
    334 /* Misc
    335    ========================================================================== */
    336 /**
    337  * Add the correct display in IE 10+.
    338  */
    339 template {
    340   display: none;
    341 }
    342 /**
    343  * Add the correct display in IE 10.
    344  */
    345 [hidden] {
    346   display: none;
    347 }
    348 .hidden,
    349 .hide {
    350   display: none;
    351 }
    352 body {
    353   font-family: 'Open Sans', sans-serif;
    354 }
    355 html {
    356   box-sizing: border-box;
    357 }
    358 *,
    359 *:before,
    360 *:after {
    361   box-sizing: inherit;
    362 }
    363 /* Generic default forms */
    364 form {
    365   width: 100%;
    366 }
    367 legend {
    368   display: none;
    369 }
    370 fieldset {
    371   border: none;
    372   padding: 0;
    373 }
    374 fieldset > div {
    375   margin-bottom: 1.5em;
    376 }
    377 label {
    378   display: block;
    379   font-size: 13px;
    380   margin-bottom: 0.25em;
    381 }
    382 input {
    383   width: 100%;
    384   padding: 0.5em 0.75em;
    385   border: 1px solid transparent;
    386   border-radius: 2px;
    387 }
    388 /* Generic button */
     223    margin:0;
     224    font-family:'Open Sans',sans-serif
     225}
     226
     227*,:after,:before {
     228    box-sizing:inherit
     229}
     230
    389231.button {
    390   box-sizing: border-box;
    391   display: inline-block;
    392   text-align: center;
    393   vertical-align: middle;
    394   cursor: pointer;
    395   border: 1px solid transparent;
    396   text-decoration: none;
    397   font-style: normal;
    398   white-space: nowrap;
    399   text-overflow: ellipsis;
    400   padding: 0.3em 1em;
    401   margin: 0;
    402   position: relative;
    403   overflow: hidden;
    404   background: #e1e1e1;
    405   color: #151515;
    406   font-size: 1em;
    407   line-height: 1.25;
    408   max-width: 100%;
    409 }
     232    box-sizing:border-box;
     233    display:inline-block;
     234    text-align:center;
     235    vertical-align:middle;
     236    cursor:pointer;
     237    border:1px solid transparent;
     238    font-style:normal;
     239    white-space:nowrap;
     240    text-overflow:ellipsis;
     241    padding:.3em 1em;
     242    margin:0;
     243    overflow:hidden;
     244    background:#e1e1e1;
     245    color:#151515;
     246    font-size:1em;
     247    line-height:1.25;
     248    max-width:100%
     249}
     250
     251.login-content {
     252    background-image:url(../media/img/back-01.jpg);
     253    background-size:cover;
     254    display:-webkit-flex;
     255    display:-ms-flexbox;
     256    display:flex;
     257    -webkit-justify-content:center;
     258    -ms-flex-pack:center;
     259    justify-content:center;
     260    -webkit-align-items:center;
     261    -ms-flex-align:center;
     262    align-items:center;
     263    min-height:300px;
     264    padding:1em 0;
     265    transition:all 250ms ease-in-out
     266}
     267
     268@media (min-width:1024px) {
     269    .login-content {
     270        min-height:550px
     271    }
     272
     273
     274}
     275
     276@media (min-width:1440px) {
     277    .login-content {
     278        min-height:650px
     279    }
     280
     281
     282}
     283
     284.login-content .message {
     285    padding:.5em;
     286    margin:0;
     287    text-align:center;
     288    font-size:13px;
     289    font-size:.8125rem
     290}
     291
     292.login-content .message.message-error {
     293    color:#fff;
     294    background-color:red
     295}
     296
     297.login-content form {
     298    width:100%;
     299    max-width:350px
     300}
     301
     302.login-content legend {
     303    display:none
     304}
     305
     306.login-content fieldset {
     307    border:none;
     308    background-color:rgba(21,21,21,.6);
     309    border-radius:6px;
     310    padding:2em
     311}
     312
     313.login-content fieldset>div {
     314    margin-bottom:1.5em
     315}
     316
     317.login-content input {
     318    width:100%;
     319    padding:.5em .75em;
     320    border:1px solid transparent;
     321    border-radius:2px
     322}
     323
     324.login-content input:focus {
     325    border-color:#EE4056
     326}
     327
     328.login-content label {
     329    display:block;
     330    font-size:14px;
     331    font-size:.875rem;
     332    color:#959595;
     333    margin-bottom:.25em
     334}
     335
     336.login-content .button {
     337    transition:all .5s ease-in-out;
     338    background-color:#EE4056;
     339    color:#fff;
     340    margin-bottom:1em;
     341    text-transform:uppercase
     342}
     343
     344.login-content .button:hover {
     345    background-color:#e6152f
     346}
     347
     348.signup-content {
     349    background-image:url(../media/img/signup-01.jpg);
     350    background-size:cover;
     351    display:-webkit-flex;
     352    display:-ms-flexbox;
     353    display:flex;
     354    -webkit-justify-content:center;
     355    -ms-flex-pack:center;
     356    justify-content:center;
     357    -webkit-align-items:center;
     358    -ms-flex-align:center;
     359    align-items:center;
     360    min-height:300px;
     361    padding:1em 0;
     362    transition:all 250ms ease-in-out
     363}
     364
     365@media (min-width:1024px) {
     366    .signup-content {
     367        min-height:550px
     368    }
     369
     370
     371}
     372
     373@media (min-width:1440px) {
     374    .signup-content {
     375        min-height:650px
     376    }
     377
     378
     379}
     380
     381.signup-content form {
     382    width:100%;
     383    max-width:40%
     384}
     385
     386.signup-content ul.error li {
     387    color:#fff;
     388    background-color:red
     389}
     390
     391.signup-content legend {
     392    display:none
     393}
     394
     395.signup-content fieldset {
     396    border:none;
     397    background-color:rgba(21,21,21,.6);
     398    border-radius:6px;
     399    padding:2em
     400}
     401
     402.signup-content fieldset>div {
     403    margin-bottom:1.5em
     404}
     405
     406.signup-content input {
     407    width:100%;
     408    padding:.5em .75em;
     409    border:1px solid transparent;
     410    border-radius:2px
     411}
     412
     413.signup-content input:focus {
     414    border-color:#EE4056
     415}
     416
     417.signup-content label {
     418    display:block;
     419    font-size:14px;
     420    font-size:.875rem;
     421    color:#959595;
     422    margin-bottom:.25em
     423}
     424
     425.signup-content .button {
     426    transition:all .5s ease-in-out;
     427    background-color:#EE4056;
     428    color:#fff;
     429    margin-bottom:1em;
     430    text-transform:uppercase
     431}
     432
     433.logo span,.workout-title:before {
     434    transition:all 250ms ease-in-out
     435}
     436
     437.logo-open,.logo:hover span {
     438    color:#EE4056
     439}
     440
     441.header-content .description,.logo {
     442    margin:0
     443}
     444
     445.signup-content .button:hover {
     446    background-color:#e6152f
     447}
     448
    410449.header-content {
    411   padding: 1em 1.5em;
    412 }
    413 .header-content a {
    414   text-decoration: none;
    415 }
    416 .header-content .description {
    417   margin: 0;
    418 }
    419 /* logo ----------------------------------------------------------------------*/
     450    padding:1em 1.5em
     451}
     452
    420453.logo {
    421   font-size: 24px;
    422   font-size: 1.5rem;
    423   line-height: 1em;
    424   font-weight: 800;
    425   text-transform: uppercase;
    426   margin: 0;
    427   display: inline-block;
    428 }
    429 .logo span {
    430   transition: all 250ms ease-in-out;
    431 }
    432 .logo:hover span {
    433   color: #EE4056;
    434 }
     454    font-size:24px;
     455    font-size:1.5rem;
     456    line-height:1em;
     457    font-weight:800;
     458    text-transform:uppercase;
     459    display:inline-block
     460}
     461
    435462.logo-open {
    436   display: block;
    437   color: #EE4056;
    438 }
    439 .logo-work,
    440 .logo-outs {
    441   color: #f8b5be;
    442 }
    443 /* menu navigation -----------------------------------------------------------*/
     463    display:block
     464}
     465
     466.logo-outs,.logo-work {
     467    color:#f8b5be
     468}
     469
    444470.nav-site {
    445   font-size: 13px;
    446   font-size: 0.8125rem;
    447 }
     471    font-size:13px;
     472    font-size:.8125rem
     473}
     474
    448475.nav-site ul {
    449   list-style-type: none;
    450   padding: 0;
    451   margin: 0;
    452   display: flex;
    453   flex-direction: row;
    454   justify-content: space-between;
    455 }
     476    list-style-type:none;
     477    padding:0;
     478    margin:0;
     479    display:-webkit-flex;
     480    display:-ms-flexbox;
     481    display:flex;
     482    -webkit-flex-direction:row;
     483    -ms-flex-direction:row;
     484    flex-direction:row;
     485    -webkit-justify-content:space-between;
     486    -ms-flex-pack:justify;
     487    justify-content:space-between
     488}
     489
    456490.nav-site li {
    457   border-left: 1px solid #e1e1e1;
    458   flex-grow: 1;
    459   text-align: center;
    460 }
     491    border-left:1px solid #e1e1e1;
     492    -webkit-flex-grow:1;
     493    -ms-flex-positive:1;
     494    flex-grow:1;
     495    text-align:center
     496}
     497
    461498.nav-site a {
    462   color: #959595;
    463   padding: 1.25em;
    464   display: block;
    465 }
    466 .nav-site a:hover {
    467   color: #151515;
    468 }
    469 .nav-site .is-active a {
    470   color: #151515;
    471 }
    472 /* Add workout button with submenu -------------------------------------------*/
    473 .add-workout {
    474   position: relative;
    475   /* submenu -------------------------------------------------------------- */
    476 }
    477 .add-workout > a {
    478   color: #EE4056;
    479 }
    480 .add-workout > a:before {
    481   content: "+";
    482   font-weight: 800;
    483   font-size: 32px;
    484   font-size: 2rem;
    485   line-height: 0;
    486   position: relative;
    487   top: 8px;
    488 }
    489 .add-workout > a span {
    490   display: none;
    491 }
    492 .add-workout > a:hover {
    493   background-color: #EE4056;
    494   color: white;
    495 }
     499    color:#959595;
     500    padding:1.25em;
     501    display:block
     502}
     503
     504.nav-site .is-active a,.nav-site a:hover {
     505    color:#151515
     506}
     507
     508.add-workout>a {
     509    color:#EE4056
     510}
     511
     512.add-workout>a:before {
     513    content:"+";
     514    font-weight:800;
     515    font-size:32px;
     516    font-size:2rem;
     517    line-height:0;
     518    position:relative;
     519    top:8px
     520}
     521
     522.add-workout:hover:after,.bike:before {
     523    content:""
     524}
     525
     526.add-workout>a span {
     527    display:none
     528}
     529
     530.add-workout>a:hover {
     531    background-color:#EE4056;
     532    color:#fff
     533}
     534
    496535.add-workout:hover:after {
    497   content: "";
    498   position: absolute;
    499   background-color: white;
    500   bottom: -1px;
    501   width: 100%;
    502   height: 1px;
    503   display: block;
    504   z-index: 20;
    505 }
     536    position:absolute;
     537    background-color:#fff;
     538    bottom:-1px;
     539    width:100%;
     540    height:1px;
     541    display:block;
     542    z-index:20
     543}
     544
    506545.add-workout:hover ul {
    507   display: inline-block;
    508 }
     546    display:inline-block
     547}
     548
    509549.add-workout ul {
    510   display: none;
    511   flex-direction: column;
    512   position: absolute;
    513   background-color: rgba(255, 255, 255, 0.95);
    514   right: -1px;
    515   border: 1px solid #e1e1e1;
    516   width: 153px;
    517 }
     550    display:none;
     551    -webkit-flex-direction:column;
     552    -ms-flex-direction:column;
     553    flex-direction:column;
     554    position:absolute;
     555    background-color:rgba(255,255,255,.95);
     556    right:-1px;
     557    border:1px solid #e1e1e1;
     558    width:153px;
     559    z-index:10;
     560}
     561
    518562.add-workout ul li {
    519   border-left: transparent;
    520   text-align: left;
    521 }
     563    border-left:transparent;
     564    text-align:left
     565}
     566
    522567.add-workout ul a:hover {
    523   background-color: #fbfbfb;
    524 }
    525 /* description ---------------------------------------------------------------*/
     568    background-color:#fbfbfb
     569}
     570
    526571.description {
    527   font-size: 14px;
    528   font-size: 0.875rem;
    529   font-weight: 300;
    530   letter-spacing: 0.025em;
    531   color: #959595;
    532 }
    533 /* ------------------------------ STATES ------------------------------------ */
    534 /* when user is login --------------------------------------------------------*/
     572    font-size:14px;
     573    font-size:.875rem;
     574    font-weight:300;
     575    letter-spacing:.025em;
     576    color:#959595
     577}
     578
    535579.is-login .header-content {
    536   border-bottom: 1px solid #e1e1e1;
    537   display: flex;
    538   padding: 0em 1.5em;
    539   justify-content: space-between;
    540   align-items: center;
    541 }
     580    border-bottom:1px solid #e1e1e1;
     581    display:-webkit-flex;
     582    display:-ms-flexbox;
     583    display:flex;
     584    padding:0 1.5em;
     585    -webkit-justify-content:space-between;
     586    -ms-flex-pack:justify;
     587    justify-content:space-between;
     588    -webkit-align-items:center;
     589    -ms-flex-align:center;
     590    align-items:center
     591}
     592
    542593.is-login .description {
    543   display: none;
    544 }
     594    display:none
     595}
     596
    545597.is-login .logo-open {
    546   display: inline-block;
    547 }
     598    display:inline-block
     599}
     600
    548601.workout-content {
    549   padding: 2em  1em;
    550 }
    551 @media (min-width: 480px) {
    552   .workout-content {
    553     padding: 2em 6em;
    554   }
    555 }
    556 @media (min-width: 800px) {
    557   .workout-content {
    558     display: flex;
    559     justify-content: space-between;
    560   }
    561 }
    562 /* list mode */
     602    padding:2em 1em
     603}
     604
     605@media (min-width:480px) {
     606    .workout-content {
     607        padding:2em 6em
     608    }
     609
     610
     611}
     612
    563613.workout-list {
    564   margin-right: 2em;
    565   width: 100%;
    566   /* provisional layout, replace this with grid layout system based on final content */
    567 }
    568 .workout-list > h2 {
    569   font-weight: 300;
    570   margin: 0 0 1.5em;
    571 }
    572 /* Module resume on dashboard workouts */
     614    margin-right:2em
     615}
     616
     617.workout-list>h2 {
     618    font-weight:300;
     619    margin:0 0 1.5em
     620}
     621
    573622.workout-resume {
    574   padding: 1.5em 0;
    575   position: relative;
    576   max-width: 700px;
    577 }
    578 @media (min-width: 800px) {
    579   .workout-resume {
    580     padding-left: 2em;
    581     border-left: 1px solid #e1e1e1;
    582     transition: all 250ms ease-in-out;
    583   }
    584 }
     623    max-width:540px;
     624    padding:1.5em 0;
     625    position:relative
     626}
     627
     628@media (min-width:800px) {
     629    .workout-content {
     630        display:-webkit-flex;
     631        display:-ms-flexbox;
     632        display:flex;
     633        -webkit-justify-content:space-between;
     634        -ms-flex-pack:justify;
     635        justify-content:space-between
     636    }
     637
     638    .workout-resume {
     639        padding-left:2em;
     640        border-left:1px solid #e1e1e1;
     641        transition:all 250ms ease-in-out
     642    }
     643
     644
     645}
     646
    585647.workout-resume:hover {
    586   border-color: #151515;
    587 }
     648    border-color:#151515
     649}
     650
    588651.workout-resume:hover .workout-title:before {
    589   color: #151515;
    590 }
     652    color:#151515
     653}
     654
    591655.workout-resume ul {
    592   padding: 0;
    593   list-style-type: none;
    594   font-size: 13px;
    595   font-size: 0.8125rem;
    596 }
     656    padding:0;
     657    list-style-type:none;
     658    font-size:13px;
     659    font-size:.8125rem
     660}
     661
    597662.workout-resume ul a {
    598   display: block;
    599   text-decoration: none;
    600 }
     663    display:block
     664}
     665
    601666.bike:before {
    602   display: block;
    603   content: "";
    604   width: 30px;
    605   height: 30px;
    606   background-image: url('../media/img/bike.svg');
    607   background-size: 100%;
    608 }
     667    display:block;
     668    width:30px;
     669    height:30px;
     670    background-image:url(../media/img/bike.svg);
     671    background-size:100%
     672}
     673
    609674.workout-title {
    610   font-size: 14px;
    611   font-size: 0.875rem;
    612   margin: 0 0 0em 0;
    613   position: relative;
    614 }
     675    font-size:14px;
     676    font-size:.875rem;
     677    margin:0;
     678    position:relative
     679}
     680
    615681.workout-title:before {
    616   transition: all 250ms ease-in-out;
    617   content: "▶";
    618   position: absolute;
    619   left: -3.25em;
    620   top: 0.35em;
    621   color: #e1e1e1;
    622   font-size: 10px;
    623   font-size: 0.625rem;
    624 }
     682    content:"▶";
     683    position:absolute;
     684    left:-3.25em;
     685    top:.35em;
     686    color:#e1e1e1;
     687    font-size:10px;
     688    font-size:.625rem
     689}
     690
    625691.workout-title a {
    626   color: #151515;
    627   text-decoration: none;
    628 }
     692    color:#151515
     693}
     694
    629695.workout-title a:hover {
    630   color: #EE4056;
    631 }
     696    color:#EE4056
     697}
     698
    632699.workout-info {
    633   display: flex;
    634   align-items: center;
    635   margin: 0.25em 0;
    636 }
     700    display:-webkit-flex;
     701    display:-ms-flexbox;
     702    display:flex;
     703    -webkit-align-items:center;
     704    -ms-flex-align:center;
     705    align-items:center;
     706    margin:.25em 0
     707}
     708
    637709.workout-info li {
    638   color: #959595;
    639 }
     710    color:#959595
     711}
     712
    640713.workout-info li:after {
    641   content: "|";
    642   margin: 0 0.5em;
    643 }
     714    content:"|";
     715    margin:0 .5em
     716}
     717
    644718.workout-info li:last-child:after {
    645   content: "";
    646   margin: 0;
    647 }
    648 .workout-map {
    649   margin-top: 1em;
    650 }
     719    content:"";
     720    margin:0
     721}
     722
     723.workout-intro {
     724    font-size:13px;
     725    font-size:.8125rem;
     726    color:#151515
     727}
     728
     729.workout-options {
     730    display:inline-block;
     731    border:1px solid #e1e1e1;
     732    margin-bottom:0;
     733    border-radius:4px
     734}
     735
     736.workout-options li {
     737    display:inline-block;
     738    border-right:1px solid #e1e1e1
     739}
     740
     741.workout-options li:last-child {
     742    border-right:none
     743}
     744
     745.workout-options a {
     746    color:#959595;
     747    padding:.5em .75em
     748}
     749
     750.workout-options a:hover {
     751    color:#151515
     752}
     753
    651754.workout-map img {
    652   width: 100%;
    653 }
    654 .workout-intro {
    655   font-size: 13px;
    656   font-size: 0.8125rem;
    657   color: #151515;
    658 }
    659 .workout-options {
    660   display: inline-block;
    661   border: 1px solid #e1e1e1;
    662   margin-bottom: 0;
    663   border-radius: 4px;
    664   padding: 0;
    665 }
    666 .workout-options li {
    667   display: inline-block;
    668   border-right: 1px solid #e1e1e1;
    669 }
    670 .workout-options li:last-child {
    671   border-right: none;
    672 }
    673 .workout-options a {
    674   display: block;
    675   color: #959595;
    676   padding: 0.5em 0.75em;
    677   text-decoration: none;
    678 }
    679 .workout-options a:hover {
    680   color: #151515;
    681 }
    682 .workout-options a.is-active {
    683   background-color: #959595;
    684   color: white;
    685 }
     755    width: 100%;
     756}
     757
    686758.owo-del a:hover {
    687   color: red;
    688 }
     759    color:red
     760}
     761
    689762.workout-aside {
    690   width: 100%;
    691 }
    692 @media (min-width: 800px) {
    693   .workout-aside {
    694     max-width: 300px;
    695     padding-left: 1.5em;
    696     border-left: 1px solid #e1e1e1;
    697   }
    698 }
    699 .aside-profile {
    700   margin-bottom: 1em;
    701 }
    702 .aside-profile img {
    703   width: 80px;
    704   height: 80px;
    705   object-fit: cover;
    706   border-radius: 50%;
    707 }
    708 .aside-profile h2 {
    709   font-weight: 400;
    710   font-size: 18px;
    711   font-size: 1.125rem;
    712   margin: 0 0 0.5em 0;
    713 }
    714 .aside-profile ul {
    715   list-style-type: none;
    716   margin: 0;
    717   padding: 0;
    718   font-size: 13px;
    719   font-size: 0.8125rem;
    720   color: #555555;
    721 }
    722 /* Workout detail */
    723 #map {
    724   height: 400px;
    725 }
    726 @media (min-width: 480px) {
    727   #map {
    728     height: calc(100vh - 380px);
    729   }
    730 }
    731 .workout-detail {
    732   padding: 0em  1em;
    733 }
    734 @media (min-width: 480px) {
    735   .workout-detail {
    736     max-width: 1280px;
    737     margin: 0 auto;
    738   }
    739 }
    740 @media (min-width: 800px) {
    741   .workout-detail {
    742     display: flex;
    743     justify-content: space-between;
    744   }
    745 }
    746 .workout-detail-resume {
    747   max-width: 500px;
    748   margin-bottom: 2em;
    749   padding-top: 2em;
    750 }
    751 @media (min-width: 800px) {
    752   .workout-detail-resume {
    753     margin-right: 6em;
    754   }
    755 }
    756 .workout-detail-resume h3 {
    757   margin-top: 0;
    758   margin-bottom: 0.5em;
    759 }
    760 .workout-detail-resume h3 + div {
    761   font-size: 14px;
    762   font-size: 0.875rem;
    763   color: #959595;
    764   line-height: 1.35em;
    765 }
    766 .workout-detail-resume .workout-options {
    767   font-size: 13px;
    768   font-size: 0.8125rem;
    769 }
    770 .workout-detail-info {
    771   max-width: 600px;
    772 }
    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 }
    780 .workout-detail-info ul {
    781   list-style-type: none;
    782   padding: 0;
    783   margin: 0;
    784   display: flex;
    785   justify-content: space-between;
    786   flex-flow: row wrap;
    787 }
    788 .workout-detail-info ul span {
    789   display: block;
    790   font-size: 13px;
    791   font-size: 0.8125rem;
    792   color: #959595;
    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;
    813 }
    814 .workout-detail-info li {
    815   margin-bottom: 2em;
    816   margin-right: 1em;
    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;
    825 }
    826 /* Week report */
    827 .svg-cotent svg {
    828   width: 100%;
    829   height: 100%;
    830 }
    831 .svg-cotent .label {
    832   font-size: 13px;
    833   font-size: 0.8125rem;
    834   text-anchor: middle;
    835 }
    836 .svg-cotent .tick {
    837   font-size: 13px;
    838   font-size: 0.8125rem;
    839 }
    840 /* dashboard graphics*/
    841 .x-axis path,
    842 .x-axis line {
    843   fill: none;
    844   stroke: none;
    845 }
    846 .bar {
    847   fill: #f8b5be;
    848 }
    849 .bar:hover {
    850   fill: #ee4056;
    851 }
    852 .current {
    853   fill: #ee4056;
    854 }
    855 .week-stats {
    856   border: 1px solid #e1e1e1;
    857   background-color: rgba(225, 225, 225, 0.1);
    858   padding: 0.75em;
    859   border-radius: 4px;
    860   margin-bottom: 2em;
    861 }
    862 .week-stats h3 {
    863   margin: 0;
    864   font-size: 14px;
    865   font-size: 0.875rem;
    866 }
    867 .week-stats h3 + p {
    868   margin: 0.25em 0 2em 0;
    869   color: #959595;
    870   font-size: 13px;
    871   font-size: 0.8125rem;
    872 }
    873 .workout-activity-summary {
    874   list-style-type: none;
    875   padding: 0;
    876   margin: 0;
    877   background-color: rgba(21, 21, 21, 0.8);
    878   margin-bottom: 0.75em;
    879 }
    880 .workout-activity-summary li {
    881   color: #e1e1e1;
    882   border-bottom: 1px solid #959595;
    883   padding: 0.75em 1em;
    884   display: flex;
    885   justify-content: space-between;
    886 }
    887 .workout-activity-summary li:last-child {
    888   margin-bottom: 0;
    889   border: none;
    890 }
    891 .workout-activity-summary li span:first-child {
    892   font-weight: bold;
    893 }
     763    width:100%
     764}
     765
    894766.workout-activity-tree {
    895   list-style-type: none;
    896   padding: 0;
    897   margin: 0;
    898   transition: all 250ms ease-in-out;
    899   font-size: 13px;
    900   font-size: 0.8125rem;
    901 }
    902 .workout-activity-tree > li {
    903   margin-bottom: 0.5em;
    904   padding-bottom: 0.5em;
    905   border-bottom: 1px solid #e1e1e1;
    906 }
     767    padding:0;
     768    list-style-type: none;
     769    transition:all 250ms ease-in-out
     770                   list-style-type:none;
     771    font-size:13px;
     772    font-size:.8125rem;
     773    color: #959595;
     774}
     775
    907776.workout-activity-tree a {
    908   text-decoration: none;
    909   display: block;
    910   color: #EE4056;
    911 }
    912 .workout-activity-tree a:hover {
    913   color: #151515;
    914 }
    915 .workout-activity-tree a.viewing-year {
    916   color: #151515;
    917   font-weight: 700;
    918   margin-bottom: 0.5em;
    919   font-size: 16px;
    920   font-size: 1rem;
    921 }
    922 .workout-activity-tree a.viewing-month {
    923   background-color: #e1e1e1;
    924   color: #151515;
    925   font-weight: 700;
    926 }
     777    text-decoration: none;
     778    background-color: transparent;
     779    outline: 0;
     780    color: #959595;
     781}
     782
     783
     784.workout-activity-tree li a.viewing-year {
     785    font-size: 17px;
     786    color: #151515;
     787}
     788
     789.workout-activity-tree ul.hidden {
     790    display: none;
     791}
     792
    927793.workout-activity-tree-year {
    928   list-style-type: none;
    929   padding: 0;
    930   margin: 0;
    931 }
    932 .workout-activity-tree-year > li {
    933   display: block;
    934   margin-bottom: 0.5em;
    935 }
     794    list-style-type: none;
     795    padding: 0;
     796    padding-left: 15px;
     797    font-size:13px;
     798    font-size:.8125rem;
     799    color: #959595;
     800}
     801
    936802.workout-activity-tree-year a {
    937   display: flex;
    938   justify-content: space-between;
    939   padding: 0.5em;
    940   background-color: #fbfbfb;
    941   color: #555555;
    942 }
    943 .workout-activity-tree-year a:hover {
    944   background-color: #e1e1e1;
    945 }
    946 .login-content {
    947   background-image: url("../media/img/back-01.jpg");
    948   background-size: cover;
    949   display: flex;
    950   justify-content: center;
    951   align-items: center;
    952   min-height: calc(100vh - 98px);
    953   padding: 1em 0;
    954 }
    955 .login-content form {
    956   max-width: 380px;
    957   background-color: rgba(21, 21, 21, 0.6);
    958   border-radius: 6px;
    959   padding: 2em 1.5em;
    960 }
    961 .login-content form div {
    962   margin-bottom: 1.5em;
    963 }
    964 .login-content label {
    965   color: #e1e1e1;
    966 }
    967 .login-content a {
    968   color: #e1e1e1;
    969   font-size: 13px;
    970   text-decoration: none;
    971   margin-right: 0.75em;
    972 }
    973 .login-content a:hover {
    974   color: white;
    975 }
    976 .login-content .button {
    977   transition: all 500ms ease-in-out;
    978   background-color: #EE4056;
    979   color: white;
    980   text-transform: uppercase;
    981 }
    982 .login-content .button:hover {
    983   background-color: #e6152f;
    984 }
    985 .login-content .message {
    986   padding: 0.5em;
    987   margin: 0;
    988   text-align: center;
    989   font-size: 13px;
    990   font-size: 0.8125rem;
    991 }
    992 .login-content .message.message-error {
    993   color: white;
    994   background-color: red;
    995 }
    996 /*
    997 .login-remember {
    998     color: @color-main-medium;
    999     .font-size(14);
    1000803    text-decoration: none;
    1001     font-weight: 300;
    1002     &:hover{
    1003         color: @color-main-light;
     804    background-color: transparent;
     805    outline: 0;
     806    color: #959595;
     807}
     808
     809
     810.workout-activity-tree-year li a.viewing-month {
     811    font-size: 17px;
     812    color: #151515;
     813}
     814
     815.workout-activity-tree-month {
     816    list-style-type: none;
     817    padding: 0;
     818    padding-left: 15px;
     819    font-size:13px;
     820    font-size:.8125rem
     821    color: #959595;
     822}
     823
     824.workout-activity-tree-month a {
     825    text-decoration: none;
     826    background-color: transparent;
     827    outline: 0;
     828    color: #959595;
     829}
     830
     831
     832
     833@media (min-width:800px) {
     834    .workout-aside {
     835        max-width:300px;
     836        padding-left:1.5em;
     837        border-left:1px solid #e1e1e1
    1004838    }
    1005 }
    1006 <a class="login-remember" href="#">Forgot your password?</a>
    1007 */
    1008 .user-profile .workout-options {
    1009   font-size: 13px;
    1010   font-size: 0.8125rem;
    1011 }
    1012 .user-profile-account {
    1013   background-color: #fbfbfb;
    1014   padding: 2em  1em;
    1015 }
    1016 @media (min-width: 480px) {
    1017   .user-profile-account {
    1018     padding: 2em 6em;
    1019   }
    1020 }
    1021 .user-profile-account img {
    1022   width: 140px;
    1023   height: 140px;
    1024   object-fit: cover;
    1025   border-radius: 50%;
    1026   margin-bottom: 0.5em;
    1027 }
    1028 .user-profile-account h2 {
    1029   margin: 0 0 0.15em 0;
    1030   font-size: 21px;
    1031   font-size: 1.3125rem;
    1032 }
    1033 .user-profile-account p {
    1034   color: #555555;
    1035   font-size: 14px;
    1036   font-size: 0.875rem;
    1037   margin: 0;
    1038 }
    1039 .user-profile-account p span {
    1040   color: #959595;
    1041 }
    1042 .total-workouts {
    1043   font-size: 13px;
    1044   font-size: 0.8125rem;
    1045   font-weight: bold;
    1046 }
    1047 .profile-data {
    1048   list-style-type: none;
    1049   padding: 0;
    1050   font-size: 14px;
    1051   font-size: 0.875rem;
    1052 }
    1053 .profile-data li {
    1054   margin-bottom: 0.25em;
    1055 }
    1056 .profile-bio {
    1057   margin: 1em 0;
    1058 }
    1059 .month-stats,
    1060 .latest-workouts {
    1061   max-width: 40vw;
    1062   margin: 0 auto;
    1063 }
    1064 .latest-workouts h4 {
    1065   margin: 0;
    1066 }
    1067 .latest-workouts h4 a {
    1068   color: #151515;
    1069   text-decoration: none;
    1070 }
    1071 .latest-workouts > span {
    1072   font-size: 13px;
    1073   font-size: 0.8125rem;
    1074 }
    1075 .latest-workouts p {
    1076   margin-top: 0.25em;
    1077   color: #959595;
    1078   font-size: 13px;
    1079   font-size: 0.8125rem;
    1080 }
     839
     840
     841}

  • ow/static/js/ow.js

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

  • ow/templates/base_anonymous.pt

    r6993c72 r3357e47  
    2525
    2626    <link rel="stylesheet"
    27           href="${request.static_url('ow:static/css/main.css')}" />
     27          href="${request.static_url('ow:static/css/main.min.css')}" />
    2828
    2929  </head>
    … …  
    3737          <a href="#" tal:attributes="href request.resource_url(request.root)">
    3838            <span class="logo-open">Open</span><span class="logo-work">work</span><span class="logo-outs">outs</span>
    39           </a>
     39        </a>
    4040        </h1>
    4141        <p class="description">tracking your workouts openly</p>

  • ow/templates/dashboard.pt

    r6993c72 r3357e47  
    2525      <section class="workout-list">
    2626
     27        <h2 tal:content="context.fullname"></h2>
     28
    2729        <h3>
    28            <tal:n tal:content="len(workouts)"></tal:n> <tal:t i18n:translate="">Activities</tal:t>
     30            (<tal:n tal:content="len(workouts)"></tal:n>/<tal:n tal:content="context.num_workouts"></tal:n>) <tal:t i18n:translate="">workouts</tal:t>
    2931        </h3>
    3032
    … …  
    108110
    109111      <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>
    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 
    143112          <tal:activity_tree tal:condition="context.num_workouts > 0">
    144113              <ul class="workout-activity-tree" tal:define="tree context.activity_dates_tree">
    … …  
    149118                                             class 'js-year viewing-year' if is_viewing_year  else 'js-year'">
    150119                          </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>
    176120                          <ul class="workout-activity-tree-year"
    177121                              tal:attributes="class 'workout-activity-tree-year' if is_viewing_year  else 'workout-activity-tree-year hidden'">
    178122                              <tal:months tal:repeat="month sorted(tree[year].keys())">
    179123                                  <li tal:define="is_viewing_month is_viewing_year and month == viewing_month">
    180                                       <a href=""
     124                                      <a href="" tal:content="month_name[month]"
    181125                                         tal:attributes="href request.resource_url(context, query={'year': year, 'month': month});
    182126                                                         class 'viewing-month' if is_viewing_month else ''">
    183                                            <span tal:content="month_name[month]"></span>
    184                                            <span tal:content="sum([tree[year][month][sport] for sport in tree[year][month]])"></span>
    185127                                      </a>
     128                                      <ul class="workout-activity-tree-month">
     129                                          <tal:sports tal:repeat="sport sorted(tree[year][month].keys())">
     130                                              <li>
     131                                                  <a href="#">
     132                                                      <tal:sport tal:content="sport"></tal:sport> (<tal:workouts tal:content="tree[year][month][sport]"></tal:workouts>)
     133                                                  </a>
     134                                              </li>
     135                                          </tal:sports>
     136                                      </ul>
    186137                                  </li>
    187138                              </tal:months>
    … …  
    191142              </ul>
    192143          </tal:activity_tree>
     144
     145          <tal:stats>
     146
     147            <div class="week-stats js-week-stats">
     148              <h3><tal:t i18n:translate="">This week</tal:t></h3>
     149              <h4 tal:define="totals context.week_totals">
     150                <span class="week_totals_left">
     151                  <tal:d tal:content="round(totals['distance'])"></tal:d>
     152                  <tal:t i18n:translate="">kms</tal:t>
     153                </span>
     154                <span class="week_totals_right">
     155                  <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
     156                    <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
     157                    <tal:t i18n:translate="">hours</tal:t>,
     158                    <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
     159                    <tal:t i18n:translate="">min.</tal:t>
     160                  </tal:hms>
     161                </span>
     162              </h4>
     163              <svg width="300" height="200"></svg>
     164              <style>
     165
     166              </style>
     167            </div>
     168
     169            <div class="user-stats">
     170              <tal:year-stats tal:repeat="year context.activity_years">
     171                <h3><a href="" tal:content="year"></a></h3>
     172                <ul tal:define="stats context.stats(year)">
     173                  <li>
     174                    <span i18n:translate="">Workouts:</span>
     175                    <span tal:content="stats['workouts']"></span>
     176                  </li>
     177                  <li>
     178                    <span i18n:translate="">Distance:</span>
     179                    <span tal:content="round(stats['distance'])"></span> kms
     180                  </li>
     181                  <li>
     182                    <span i18n:translate="">Time:</span>
     183                    <tal:hms tal:define="hms timedelta_to_hms(stats['time'])">
     184                      <span>
     185                        <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
     186                        <tal:t i18n:translate="">hours</tal:t>,
     187                        <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
     188                        <tal:t i18n:translate="">min.</tal:t>
     189                      </span>
     190                    </tal:hms>
     191                  </li>
     192                  <li>
     193                    <span i18n:translate="">Elevation:</span>
     194                    <span tal:content="stats['elevation']"></span> m
     195                  </li>
     196                </ul>
     197              </tal:year-stats>
     198            </div>
     199          </tal:stats>
    193200
    194201      </aside>

  • ow/templates/login.pt

    r6993c72 r3357e47  
    3434                     type="password" i18n:attributes="placeholder">
    3535            </div>
    36             <div>
    37               <input class="button button-action" type="submit" name="submit" value="Login">
    38             </div>
     36            <input class="button" type="submit" name="submit" value="Login">
    3937            <a class="login-remember" href="#" i18n:translate="">
    40               Forgot your password?</a>
     38              Forgot your password?</a> |
    4139            <a class="join-now" href="" i18n:translate=""
    4240               tal:attributes="href request.resource_url(context, 'signup')">

  • ow/templates/profile.pt

    r6993c72 r3357e47  
    1515
    1616    <div class="user-profile">
    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>
     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>
    2623          <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>
    31 
    32         <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
    33 
    34         <ul class="profile-data">
     24              (<tal:nickname tal:content="context.nickname"></tal:nickname>)
     25          </tal:has-nickname>
     26      </h2>
     27      <h3>
     28        <tal:email tal:content="context.email"></tal:email>
     29      </h3>
     30      <h4>
     31        <a href=""
     32           tal:attributes="href request.resource_url(context, 'edit')"
     33           i18n:translate="">edit profile</a> |
     34        <a href=""
     35           tal:attributes="href request.resource_url(context, 'passwd')"
     36           i18n:translate="">change password</a>
     37      </h4>
     38      <div class="profile-info">
     39        <ul>
    3540          <li>
    3641            <tal:t i18n:translate="">Gender:</tal:t>
    … …  
    5257          </li>
    5358        </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>
    6259      </div>
    6360
    64       <div class="total-workouts">
     61      <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
     62
     63      <div class="profile-workouts">
     64        <tal:t i18n:translate="">Total number of workouts</tal:t>:
    6565        <tal:w tal:replace="context.num_workouts"></tal:w>
    66         <tal:t i18n:translate="">workouts</tal:t>
    6766      </div>
    6867
    6968      <div class="month-stats js-month-stats">
    70         <div class="svg-cotent">
    71           <svg width="800" height="180" viewBox="0 0 800 180"></svg>
     69        <svg width="600" height="300"></svg>
     70        <div class="filters js-filters">
     71          <a href="#" class="js-distance" i18n:translate="">distance</a>
     72          <a href="#" class="js-time" i18n:translate="">time</a>
     73          <a href="#" class="js-elevation" i18n:translate="">elevation</a>
    7274        </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>
    78 
    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>
     75        <div class="switcher js-switcher">
     76          <a href="#" class="js-weekly" i18n:translate="">weekly</a>
     77          <a href="#" class="js-monthly" i18n:translate="">monthly</a>
     78        </div>
    8379      </div>
    8480
    … …  
    142138
    143139      </tal:r>
     140
    144141    </div>
    145142
    … …  
    159156
    160157     var year_chart = owjs.year_chart({
    161          chart_selector: '.js-month-stats svg',
    162          filters_selector: '.js-month-stats .js-filters a',
    163          switcher_selector: '.js-month-stats .js-switcher a',
     158         chart_selector: 'div.js-month-stats svg',
     159         filters_selector: 'div.js-month-stats div.js-filters a',
     160         switcher_selector: 'div.js-month-stats div.js-switcher a',
    164161         urls: {"monthly": "${request.resource_url(context, 'monthly')}",
    165162                "weekly": "${request.resource_url(context, 'weekly')}"},

  • ow/templates/signup.pt

    r6993c72 r3357e47  
    1212      <!-- Login -->
    1313
    14       <div class="login-content">
     14      <div class="signup-content">
    1515
    1616        <form method="post" name="signup" action="">
    … …  
    5757          </fieldset>
    5858
    59           <input class="button button-action" type="submit" name="submit" value="Sign up!">
     59          <input class="button" type="submit" name="submit" value="Sign up!">
    6060
    6161        </form>

  • ow/templates/workout.pt

    r6993c72 r3357e47  
    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 class="important" 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 class="important">
    63             <span><tal:t i18n:translate="">Duration</tal:t></span>
    64             <!--! use the properly formatted duration instead of the timedelta object -->
    65             <tal:c tal:content="context._duration"></tal:c>
    66           </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>
    71           <li tal:condition="context.speed">
    72             <span><tal:t i18n:translate="">Speed</tal:t></span>
    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>
    77           </li>
    78           <li tal:condition="hr">
    79             <span><tal:t i18n:translate="">Heart Rate</tal:t></span>
    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>
    84           </li>
    85           <li tal:condition="cad">
    86             <span><tal:t i18n:translate="">Cadence</tal:t></span>
    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>
    91           </li>
    92           <li tal:condition="atemp">
    93             <span><tal:t i18n:translate="">Temperature</tal:t></span>
    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>
    100           </li>
    101         </ul>
    102       </div>
    103     </div>
    10428    <!--! Track map -->
    10529    <div id="map" tal:condition="context.has_gpx"></div>
    … …  
    12549      </tal:r>
    12650
     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>
    127128    </div>
    128129  </metal:content>

  • ow/views/user.py

    r6993c72 r3357e47  
    331331                query={'year': str(week[0]),
    332332                       'month': str(week[1]),
    333                        'week': str(week[2])})
     333                       'week': str(week[2])},
     334                anchor='workouts')
    334335        }
    335336        json_stats.append(week_stats)
Note: See TracChangeset for help on using the changeset viewer.