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


Ignore:
Files:
24 added
3 deleted
11 edited

Legend:

Unmodified
Added
Removed

  • .gitignore

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

  • ow/static/css/main.css

    r3357e47 r6993c72  
    1 img,legend {
    2     border:0
    3 }
    4 
    5 legend,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 
    171@font-face {
    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 
     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}
    247@font-face {
    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 
     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}
    3113@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/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype')
    36 }
    37 
     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}
    3819@font-face {
    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 
     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}
    4525@font-face {
    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 
     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}
    5231@font-face {
    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 
     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}
    5937@font-face {
    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 
     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 */
    6650html {
    67     font-family:sans-serif;
    68     -ms-text-size-adjust:100%;
    69     -webkit-text-size-adjust:100%;
    70     box-sizing:border-box
    71 }
    72 
    73 article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary {
    74     display:block
    75 }
    76 
    77 audio,canvas,progress,video {
    78     display:inline-block;
    79     vertical-align:baseline
    80 }
    81 
    82 audio:not([controls]) {
    83     display:none;
    84     height:0
    85 }
    86 
    87 .hide,[hidden],template {
    88     display:none
    89 }
    90 
     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 */
     61body {
     62  margin: 0;
     63}
     64/**
     65 * Render the `main` element consistently in IE.
     66 */
     67main {
     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 */
     74h1 {
     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 */
     84hr {
     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 */
     96pre {
     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 */
    91107a {
    92     background-color:transparent
    93 }
    94 
    95 a:active,a:hover {
    96     outline:0
    97 }
    98 
     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 */
    99114abbr[title] {
    100     border-bottom:1px dotted
    101 }
    102 
    103 b,optgroup,strong {
    104     font-weight:700
    105 }
    106 
    107 dfn {
    108     font-style:italic
    109 }
    110 
    111 h1 {
    112     font-size:2em;
    113     margin:.67em 0
    114 }
    115 
    116 mark {
    117     background:#ff0;
    118     color:#000
    119 }
    120 
     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 */
     125b,
     126strong {
     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 */
     133code,
     134kbd,
     135samp {
     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 */
    121144small {
    122     font-size:80%
    123 }
    124 
    125 sub,sup {
    126     font-size:75%;
    127     line-height:0;
    128     vertical-align:baseline
    129 }
    130 
     145  font-size: 80%;
     146}
     147/**
     148 * Prevent `sub` and `sup` elements from affecting the line height in
     149 * all browsers.
     150 */
     151sub,
    131152sup {
    132     top:-.5em
    133 }
    134 
     153  font-size: 75%;
     154  line-height: 0;
     155  position: relative;
     156  vertical-align: baseline;
     157}
    135158sub {
    136     bottom:-.25em
    137 }
    138 
    139 svg:not(:root) {
    140     overflow:hidden
    141 }
    142 
    143 figure {
    144     margin:1em 40px
    145 }
    146 
    147 hr {
    148     box-sizing:content-box;
    149     height:0
    150 }
    151 
    152 pre,textarea {
    153     overflow:auto
    154 }
    155 
    156 code,kbd,pre,samp {
    157     font-family:monospace,monospace;
    158     font-size:1em
    159 }
    160 
    161 button,input,optgroup,select,textarea {
    162     color:inherit;
    163     font:inherit;
    164     margin:0
    165 }
    166 
    167 button {
    168     overflow:visible
    169 }
    170 
    171 button,select {
    172     text-transform:none
    173 }
    174 
    175 button,html input[type=button],input[type=reset],input[type=submit] {
    176     -webkit-appearance:button;
    177     cursor:pointer
    178 }
    179 
    180 button[disabled],html input[disabled] {
    181     cursor:default
    182 }
    183 
    184 button::-moz-focus-inner,input::-moz-focus-inner {
    185     border:0;
    186     padding:0
    187 }
    188 
     159  bottom: -0.25em;
     160}
     161sup {
     162  top: -0.5em;
     163}
     164/* Embedded content
     165   ========================================================================== */
     166/**
     167 * Remove the border on images inside links in IE 10.
     168 */
     169img {
     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 */
     178button,
     179input,
     180optgroup,
     181select,
     182textarea {
     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 */
     196button,
    189197input {
    190     line-height:normal
    191 }
    192 
    193 input[type=checkbox],input[type=radio] {
    194     box-sizing:border-box;
    195     padding:0
    196 }
    197 
    198 input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    199     height:auto
    200 }
    201 
    202 input[type=search] {
    203     -webkit-appearance:textfield;
    204     box-sizing:content-box
    205 }
    206 
    207 input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration {
    208     -webkit-appearance:none
    209 }
    210 
     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 */
     205button,
     206select {
     207  /* 1 */
     208  text-transform: none;
     209}
     210/**
     211 * Correct the inability to style clickable types in iOS and Safari.
     212 */
     213button,
     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 */
     222button::-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 */
     232button:-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 */
    211241fieldset {
    212     border:1px solid silver;
    213     margin:0 2px;
    214     padding:.35em .625em .75em
    215 }
    216 
    217 table {
    218     border-collapse:collapse;
    219     border-spacing:0
    220 }
    221 
     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 */
     250legend {
     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 */
     267progress {
     268  vertical-align: baseline;
     269}
     270/**
     271 * Remove the default vertical scrollbar in IE 10+.
     272 */
     273textarea {
     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 */
     325details {
     326  display: block;
     327}
     328/*
     329 * Add the correct display in all browsers.
     330 */
     331summary {
     332  display: list-item;
     333}
     334/* Misc
     335   ========================================================================== */
     336/**
     337 * Add the correct display in IE 10+.
     338 */
     339template {
     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}
    222352body {
    223     margin:0;
    224     font-family:'Open Sans',sans-serif
    225 }
    226 
    227 *,:after,:before {
    228     box-sizing:inherit
    229 }
    230 
     353  font-family: 'Open Sans', sans-serif;
     354}
     355html {
     356  box-sizing: border-box;
     357}
     358*,
     359*:before,
     360*:after {
     361  box-sizing: inherit;
     362}
     363/* Generic default forms */
     364form {
     365  width: 100%;
     366}
     367legend {
     368  display: none;
     369}
     370fieldset {
     371  border: none;
     372  padding: 0;
     373}
     374fieldset > div {
     375  margin-bottom: 1.5em;
     376}
     377label {
     378  display: block;
     379  font-size: 13px;
     380  margin-bottom: 0.25em;
     381}
     382input {
     383  width: 100%;
     384  padding: 0.5em 0.75em;
     385  border: 1px solid transparent;
     386  border-radius: 2px;
     387}
     388/* Generic button */
    231389.button {
    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 
     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}
     410.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 ----------------------------------------------------------------------*/
     420.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}
     435.logo-open {
     436  display: block;
     437  color: #EE4056;
     438}
     439.logo-work,
     440.logo-outs {
     441  color: #f8b5be;
     442}
     443/* menu navigation -----------------------------------------------------------*/
     444.nav-site {
     445  font-size: 13px;
     446  font-size: 0.8125rem;
     447}
     448.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}
     456.nav-site li {
     457  border-left: 1px solid #e1e1e1;
     458  flex-grow: 1;
     459  text-align: center;
     460}
     461.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}
     496.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}
     506.add-workout:hover ul {
     507  display: inline-block;
     508}
     509.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}
     518.add-workout ul li {
     519  border-left: transparent;
     520  text-align: left;
     521}
     522.add-workout ul a:hover {
     523  background-color: #fbfbfb;
     524}
     525/* description ---------------------------------------------------------------*/
     526.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 --------------------------------------------------------*/
     535.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}
     542.is-login .description {
     543  display: none;
     544}
     545.is-login .logo-open {
     546  display: inline-block;
     547}
     548.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 */
     563.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 */
     573.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}
     585.workout-resume:hover {
     586  border-color: #151515;
     587}
     588.workout-resume:hover .workout-title:before {
     589  color: #151515;
     590}
     591.workout-resume ul {
     592  padding: 0;
     593  list-style-type: none;
     594  font-size: 13px;
     595  font-size: 0.8125rem;
     596}
     597.workout-resume ul a {
     598  display: block;
     599  text-decoration: none;
     600}
     601.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}
     609.workout-title {
     610  font-size: 14px;
     611  font-size: 0.875rem;
     612  margin: 0 0 0em 0;
     613  position: relative;
     614}
     615.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}
     625.workout-title a {
     626  color: #151515;
     627  text-decoration: none;
     628}
     629.workout-title a:hover {
     630  color: #EE4056;
     631}
     632.workout-info {
     633  display: flex;
     634  align-items: center;
     635  margin: 0.25em 0;
     636}
     637.workout-info li {
     638  color: #959595;
     639}
     640.workout-info li:after {
     641  content: "|";
     642  margin: 0 0.5em;
     643}
     644.workout-info li:last-child:after {
     645  content: "";
     646  margin: 0;
     647}
     648.workout-map {
     649  margin-top: 1em;
     650}
     651.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}
     686.owo-del a:hover {
     687  color: red;
     688}
     689.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}
     894.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}
     907.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}
     927.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}
     936.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}
    251946.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
     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);
     1000    text-decoration: none;
     1001    font-weight: 300;
     1002    &:hover{
     1003        color: @color-main-light;
    2711004    }
    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 
    449 .header-content {
    450     padding:1em 1.5em
    451 }
    452 
    453 .logo {
    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 
    462 .logo-open {
    463     display:block
    464 }
    465 
    466 .logo-outs,.logo-work {
    467     color:#f8b5be
    468 }
    469 
    470 .nav-site {
    471     font-size:13px;
    472     font-size:.8125rem
    473 }
    474 
    475 .nav-site ul {
    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 
    490 .nav-site li {
    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 
    498 .nav-site a {
    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 
    535 .add-workout:hover:after {
    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 
    545 .add-workout:hover ul {
    546     display:inline-block
    547 }
    548 
    549 .add-workout ul {
    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 
    562 .add-workout ul li {
    563     border-left:transparent;
    564     text-align:left
    565 }
    566 
    567 .add-workout ul a:hover {
    568     background-color:#fbfbfb
    569 }
    570 
    571 .description {
    572     font-size:14px;
    573     font-size:.875rem;
    574     font-weight:300;
    575     letter-spacing:.025em;
    576     color:#959595
    577 }
    578 
    579 .is-login .header-content {
    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 
    593 .is-login .description {
    594     display:none
    595 }
    596 
    597 .is-login .logo-open {
    598     display:inline-block
    599 }
    600 
    601 .workout-content {
    602     padding:2em 1em
    603 }
    604 
    605 @media (min-width:480px) {
    606     .workout-content {
    607         padding:2em 6em
    608     }
    609 
    610 
    611 }
    612 
    613 .workout-list {
    614     margin-right:2em
    615 }
    616 
    617 .workout-list>h2 {
    618     font-weight:300;
    619     margin:0 0 1.5em
    620 }
    621 
    622 .workout-resume {
    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 
    647 .workout-resume:hover {
    648     border-color:#151515
    649 }
    650 
    651 .workout-resume:hover .workout-title:before {
    652     color:#151515
    653 }
    654 
    655 .workout-resume ul {
    656     padding:0;
    657     list-style-type:none;
    658     font-size:13px;
    659     font-size:.8125rem
    660 }
    661 
    662 .workout-resume ul a {
    663     display:block
    664 }
    665 
    666 .bike:before {
    667     display:block;
    668     width:30px;
    669     height:30px;
    670     background-image:url(../media/img/bike.svg);
    671     background-size:100%
    672 }
    673 
    674 .workout-title {
    675     font-size:14px;
    676     font-size:.875rem;
    677     margin:0;
    678     position:relative
    679 }
    680 
    681 .workout-title:before {
    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 
    691 .workout-title a {
    692     color:#151515
    693 }
    694 
    695 .workout-title a:hover {
    696     color:#EE4056
    697 }
    698 
    699 .workout-info {
    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 
    709 .workout-info li {
    710     color:#959595
    711 }
    712 
    713 .workout-info li:after {
    714     content:"|";
    715     margin:0 .5em
    716 }
    717 
    718 .workout-info li:last-child:after {
    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 
    754 .workout-map img {
    755     width: 100%;
    756 }
    757 
    758 .owo-del a:hover {
    759     color:red
    760 }
    761 
    762 .workout-aside {
    763     width:100%
    764 }
    765 
    766 .workout-activity-tree {
    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 
    776 .workout-activity-tree a {
    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 
    793 .workout-activity-tree-year {
    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 
    802 .workout-activity-tree-year a {
    803     text-decoration: none;
    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
    838     }
    839 
    840 
    841 }
     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}

  • ow/static/js/ow.js

    r3357e47 r6993c72  
    148148         */
    149149        var chart = d3.select(chart_selector),
    150             margin = {top: 20, right: 20, bottom: 30, left: 50},
     150            margin = {top: 17, right: 0, bottom: 20, left: 0},
     151
    151152            width = +chart.attr("width") - margin.left - margin.right,
    152153            height = +chart.attr("height") - margin.top - margin.bottom,
    … …  
    211212                })
    212213                .attr("y", function (d) {
    213                     return y(Number(d.distance) + 5);
    214                 })
     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            })
    215223                .text(function(d) {
    216224                    if (Number(d.distance) > 0) {

  • ow/templates/base_anonymous.pt

    r3357e47 r6993c72  
    2525
    2626    <link rel="stylesheet"
    27           href="${request.static_url('ow:static/css/main.min.css')}" />
     27          href="${request.static_url('ow:static/css/main.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

    r3357e47 r6993c72  
    2525      <section class="workout-list">
    2626
    27         <h2 tal:content="context.fullname"></h2>
    28 
    2927        <h3>
    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>
     28           <tal:n tal:content="len(workouts)"></tal:n> <tal:t i18n:translate="">Activities</tal:t>
    3129        </h3>
    3230
    … …  
    110108
    111109      <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
    112143          <tal:activity_tree tal:condition="context.num_workouts > 0">
    113144              <ul class="workout-activity-tree" tal:define="tree context.activity_dates_tree">
    … …  
    118149                                             class 'js-year viewing-year' if is_viewing_year  else 'js-year'">
    119150                          </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>
    120176                          <ul class="workout-activity-tree-year"
    121177                              tal:attributes="class 'workout-activity-tree-year' if is_viewing_year  else 'workout-activity-tree-year hidden'">
    122178                              <tal:months tal:repeat="month sorted(tree[year].keys())">
    123179                                  <li tal:define="is_viewing_month is_viewing_year and month == viewing_month">
    124                                       <a href="" tal:content="month_name[month]"
     180                                      <a href=""
    125181                                         tal:attributes="href request.resource_url(context, query={'year': year, 'month': month});
    126182                                                         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>
    127185                                      </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>
    137186                                  </li>
    138187                              </tal:months>
    … …  
    142191              </ul>
    143192          </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>
    200193
    201194      </aside>

  • ow/templates/login.pt

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

  • ow/templates/profile.pt

    r3357e47 r6993c72  
    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>
     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>
    2326          <tal:has-nickname tal:condition="context.nickname">
    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>
     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">
    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>
    5962      </div>
    6063
    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>:
     64      <div class="total-workouts">
    6565        <tal:w tal:replace="context.num_workouts"></tal:w>
     66        <tal:t i18n:translate="">workouts</tal:t>
    6667      </div>
    6768
    6869      <div class="month-stats js-month-stats">
    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>
     70        <div class="svg-cotent">
     71          <svg width="800" height="180" viewBox="0 0 800 180"></svg>
    7472        </div>
    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>
     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>
    7983      </div>
    8084
    … …  
    138142
    139143      </tal:r>
    140 
    141144    </div>
    142145
    … …  
    156159
    157160     var year_chart = owjs.year_chart({
    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',
     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',
    161164         urls: {"monthly": "${request.resource_url(context, 'monthly')}",
    162165                "weekly": "${request.resource_url(context, 'weekly')}"},

  • ow/templates/signup.pt

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

  • ow/templates/workout.pt

    r3357e47 r6993c72  
    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>
    28104    <!--! Track map -->
    29105    <div id="map" tal:condition="context.has_gpx"></div>
    … …  
    49125      </tal:r>
    50126
    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>
    128127    </div>
    129128  </metal:content>

  • ow/views/user.py

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