Index: ow/static/css/main.css =================================================================== --- ow/static/css/main.css (revision 22eb5de6e2dfc8f8390337b3b72fb0efafad28ca) +++ ow/static/css/main.css (revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6) @@ -408,4 +408,432 @@ max-width: 100%; } +.header-content { + padding: 1em 1.5em; +} +.header-content a { + text-decoration: none; +} +.header-content .description { + margin: 0; +} +/* logo ----------------------------------------------------------------------*/ +.logo { + font-size: 24px; + font-size: 1.5rem; + line-height: 1em; + font-weight: 800; + text-transform: uppercase; + margin: 0; + display: inline-block; +} +.logo span { + transition: all 250ms ease-in-out; +} +.logo:hover span { + color: #EE4056; +} +.logo-open { + display: block; + color: #EE4056; +} +.logo-work, +.logo-outs { + color: #f8b5be; +} +/* menu navigation -----------------------------------------------------------*/ +.nav-site { + font-size: 13px; + font-size: 0.8125rem; +} +.nav-site ul { + list-style-type: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: row; + justify-content: space-between; +} +.nav-site li { + border-left: 1px solid #e1e1e1; + flex-grow: 1; + text-align: center; +} +.nav-site a { + color: #959595; + padding: 1.25em; + display: block; +} +.nav-site a:hover { + color: #151515; +} +.nav-site .is-active a { + color: #151515; +} +/* Add workout button with submenu -------------------------------------------*/ +.add-workout { + position: relative; + /* submenu -------------------------------------------------------------- */ +} +.add-workout > a { + color: #EE4056; +} +.add-workout > a:before { + content: "+"; + font-weight: 800; + font-size: 32px; + font-size: 2rem; + line-height: 0; + position: relative; + top: 8px; +} +.add-workout > a span { + display: none; +} +.add-workout > a:hover { + background-color: #EE4056; + color: white; +} +.add-workout:hover:after { + content: ""; + position: absolute; + background-color: white; + bottom: -1px; + width: 100%; + height: 1px; + display: block; + z-index: 20; +} +.add-workout:hover ul { + display: inline-block; +} +.add-workout ul { + display: none; + flex-direction: column; + position: absolute; + background-color: rgba(255, 255, 255, 0.95); + right: -1px; + border: 1px solid #e1e1e1; + width: 153px; +} +.add-workout ul li { + border-left: transparent; + text-align: left; +} +.add-workout ul a:hover { + background-color: #fbfbfb; +} +/* description ---------------------------------------------------------------*/ +.description { + font-size: 14px; + font-size: 0.875rem; + font-weight: 300; + letter-spacing: 0.025em; + color: #959595; +} +/* ------------------------------ STATES ------------------------------------ */ +/* when user is login --------------------------------------------------------*/ +.is-login .header-content { + border-bottom: 1px solid #e1e1e1; + display: flex; + padding: 0em 1.5em; + justify-content: space-between; + align-items: center; +} +.is-login .description { + display: none; +} +.is-login .logo-open { + display: inline-block; +} +.workout-content { + padding: 2em 1em; +} +@media (min-width: 480px) { + .workout-content { + padding: 2em 6em; + } +} +@media (min-width: 800px) { + .workout-content { + display: flex; + justify-content: space-between; + } +} +/* list mode */ +.workout-list { + margin-right: 2em; + width: 100%; + /* provisional layout, replace this with grid layout system based on final content */ +} +.workout-list > h2 { + font-weight: 300; + margin: 0 0 1.5em; +} +/* Module resume on dashboard workouts */ +.workout-resume { + padding: 1.5em 0; + position: relative; + max-width: 700px; +} +@media (min-width: 800px) { + .workout-resume { + padding-left: 2em; + border-left: 1px solid #e1e1e1; + transition: all 250ms ease-in-out; + } +} +.workout-resume:hover { + border-color: #151515; +} +.workout-resume:hover .workout-title:before { + color: #151515; +} +.workout-resume ul { + padding: 0; + list-style-type: none; + font-size: 13px; + font-size: 0.8125rem; +} +.workout-resume ul a { + display: block; + text-decoration: none; +} +.bike:before { + display: block; + content: ""; + width: 30px; + height: 30px; + background-image: url('../media/img/bike.svg'); + background-size: 100%; +} +.workout-title { + font-size: 14px; + font-size: 0.875rem; + margin: 0 0 0em 0; + position: relative; +} +.workout-title:before { + transition: all 250ms ease-in-out; + content: "▶"; + position: absolute; + left: -3.25em; + top: 0.35em; + color: #e1e1e1; + font-size: 10px; + font-size: 0.625rem; +} +.workout-title a { + color: #151515; + text-decoration: none; +} +.workout-title a:hover { + color: #EE4056; +} +.workout-info { + display: flex; + align-items: center; + margin: 0.25em 0; +} +.workout-info li { + color: #959595; +} +.workout-info li:after { + content: "|"; + margin: 0 0.5em; +} +.workout-info li:last-child:after { + content: ""; + margin: 0; +} +.workout-map { + margin-top: 1em; +} +.workout-map img { + width: 100%; +} +.workout-intro { + font-size: 13px; + font-size: 0.8125rem; + color: #151515; +} +.workout-options { + display: inline-block; + border: 1px solid #e1e1e1; + margin-bottom: 0; + border-radius: 4px; + padding: 0; +} +.workout-options li { + display: inline-block; + border-right: 1px solid #e1e1e1; +} +.workout-options li:last-child { + border-right: none; +} +.workout-options a { + display: block; + color: #959595; + padding: 0.5em 0.75em; + text-decoration: none; +} +.workout-options a:hover { + color: #151515; +} +.owo-del a:hover { + color: red; +} +.workout-aside { + width: 100%; +} +@media (min-width: 800px) { + .workout-aside { + max-width: 300px; + padding-left: 1.5em; + border-left: 1px solid #e1e1e1; + } +} +.aside-profile { + margin-bottom: 1em; +} +.aside-profile img { + width: 80px; + height: 80px; + object-fit: cover; + border-radius: 50%; +} +.aside-profile h2 { + font-weight: 400; + font-size: 18px; + font-size: 1.125rem; + margin: 0 0 0.5em 0; +} +.aside-profile ul { + list-style-type: none; + margin: 0; + padding: 0; + font-size: 13px; + font-size: 0.8125rem; + color: #555555; +} +/* Week report */ +.svg-cotent svg { + width: 100%; + height: 100%; +} +.svg-cotent .label { + font-size: 13px; + font-size: 0.8125rem; + text-anchor: middle; +} +.svg-cotent .tick { + font-size: 13px; + font-size: 0.8125rem; +} +/* dashboard graphics*/ +.x-axis path, +.x-axis line { + fill: none; + stroke: none; +} +.bar { + fill: #f8b5be; +} +.bar:hover { + fill: #ee4056; +} +.current { + fill: #ee4056; +} +.week-stats { + border: 1px solid #e1e1e1; + background-color: rgba(225, 225, 225, 0.1); + padding: 0.75em; + border-radius: 4px; + margin-bottom: 2em; +} +.week-stats h3 { + margin: 0; + font-size: 14px; + font-size: 0.875rem; +} +.week-stats h3 + p { + margin: 0.25em 0 2em 0; + color: #959595; + font-size: 13px; + font-size: 0.8125rem; +} +.workout-activity-summary { + list-style-type: none; + padding: 0; + margin: 0; + background-color: rgba(21, 21, 21, 0.8); + margin-bottom: 0.75em; +} +.workout-activity-summary li { + color: #e1e1e1; + border-bottom: 1px solid #959595; + padding: 0.75em 1em; + display: flex; + justify-content: space-between; +} +.workout-activity-summary li:last-child { + margin-bottom: 0; + border: none; +} +.workout-activity-summary li span:first-child { + font-weight: bold; +} +.workout-activity-tree { + list-style-type: none; + padding: 0; + margin: 0; + transition: all 250ms ease-in-out; + font-size: 13px; + font-size: 0.8125rem; +} +.workout-activity-tree > li { + margin-bottom: 0.5em; + padding-bottom: 0.5em; + border-bottom: 1px solid #e1e1e1; +} +.workout-activity-tree a { + text-decoration: none; + display: block; + color: #EE4056; +} +.workout-activity-tree a:hover { + color: #151515; +} +.workout-activity-tree a.viewing-year { + color: #151515; + font-weight: 700; + margin-bottom: 0.5em; + font-size: 16px; + font-size: 1rem; +} +.workout-activity-tree a.viewing-month { + background-color: #e1e1e1; + color: #151515; + font-weight: 700; +} +.workout-activity-tree-year { + list-style-type: none; + padding: 0; + margin: 0; +} +.workout-activity-tree-year > li { + display: block; + margin-bottom: 0.5em; +} +.workout-activity-tree-year a { + display: flex; + justify-content: space-between; + padding: 0.5em; + background-color: #fbfbfb; + color: #555555; +} +.workout-activity-tree-year a:hover { + background-color: #e1e1e1; +} .login-content { background-image: url("../media/img/back-01.jpg"); @@ -470,413 +898,21 @@ Forgot your password? */ -.header-content { - padding: 1em 1.5em; -} -.header-content a { - text-decoration: none; -} -.header-content .description { - margin: 0; -} -/* logo ----------------------------------------------------------------------*/ -.logo { - font-size: 24px; - font-size: 1.5rem; - line-height: 1em; - font-weight: 800; - text-transform: uppercase; - margin: 0; - display: inline-block; -} -.logo span { - transition: all 250ms ease-in-out; -} -.logo:hover span { - color: #EE4056; -} -.logo-open { - display: block; - color: #EE4056; -} -.logo-work, -.logo-outs { - color: #f8b5be; -} -/* menu navigation -----------------------------------------------------------*/ -.nav-site { - font-size: 13px; - font-size: 0.8125rem; -} -.nav-site ul { - list-style-type: none; - padding: 0; - margin: 0; - display: flex; - flex-direction: row; - justify-content: space-between; -} -.nav-site li { - border-left: 1px solid #e1e1e1; - flex-grow: 1; - text-align: center; -} -.nav-site a { - color: #959595; - padding: 1.25em; - display: block; -} -.nav-site a:hover { - color: #151515; -} -.nav-site .is-active a { - color: #151515; -} -/* Add workout button with submenu -------------------------------------------*/ -.add-workout { - position: relative; - /* submenu -------------------------------------------------------------- */ -} -.add-workout > a { - color: #EE4056; -} -.add-workout > a:before { - content: "+"; - font-weight: 800; - font-size: 32px; - font-size: 2rem; - line-height: 0; - position: relative; - top: 8px; -} -.add-workout > a span { - display: none; -} -.add-workout > a:hover { - background-color: #EE4056; - color: white; -} -.add-workout:hover:after { - content: ""; - position: absolute; - background-color: white; - bottom: -1px; - width: 100%; - height: 1px; - display: block; - z-index: 20; -} -.add-workout:hover ul { - display: inline-block; -} -.add-workout ul { - display: none; - flex-direction: column; - position: absolute; - background-color: rgba(255, 255, 255, 0.95); - right: -1px; - border: 1px solid #e1e1e1; - width: 153px; -} -.add-workout ul li { - border-left: transparent; - text-align: left; -} -.add-workout ul a:hover { - background-color: #fbfbfb; -} -/* description ---------------------------------------------------------------*/ -.description { - font-size: 14px; - font-size: 0.875rem; - font-weight: 300; - letter-spacing: 0.025em; - color: #959595; -} -/* ------------------------------ STATES ------------------------------------ */ -/* when user is login --------------------------------------------------------*/ -.is-login .header-content { - border-bottom: 1px solid #e1e1e1; - display: flex; - padding: 0em 1.5em; - justify-content: space-between; - align-items: center; -} -.is-login .description { - display: none; -} -.is-login .logo-open { - display: inline-block; -} -.workout-content { +.user-profile { padding: 2em 1em; } @media (min-width: 480px) { - .workout-content { + .user-profile { padding: 2em 6em; } } -@media (min-width: 800px) { - .workout-content { - display: flex; - justify-content: space-between; - } -} -/* list mode */ -.workout-list { - margin-right: 2em; - width: 100%; - /* provisional layout, replace this with grid layout system based on final content */ -} -.workout-list > h2 { - font-weight: 300; - margin: 0 0 1.5em; -} -/* Module resume on dashboard workouts */ -.workout-resume { - padding: 1.5em 0; - position: relative; - max-width: 700px; -} -@media (min-width: 800px) { - .workout-resume { - padding-left: 2em; - border-left: 1px solid #e1e1e1; - transition: all 250ms ease-in-out; - } -} -.workout-resume:hover { - border-color: #151515; -} -.workout-resume:hover .workout-title:before { - color: #151515; -} -.workout-resume ul { - padding: 0; - list-style-type: none; - font-size: 13px; - font-size: 0.8125rem; -} -.workout-resume ul a { - display: block; - text-decoration: none; -} -.bike:before { - display: block; - content: ""; - width: 30px; - height: 30px; - background-image: url('../media/img/bike.svg'); - background-size: 100%; -} -.workout-title { - font-size: 14px; - font-size: 0.875rem; - margin: 0 0 0em 0; - position: relative; -} -.workout-title:before { - transition: all 250ms ease-in-out; - content: "▶"; - position: absolute; - left: -3.25em; - top: 0.35em; - color: #e1e1e1; - font-size: 10px; - font-size: 0.625rem; -} -.workout-title a { - color: #151515; - text-decoration: none; -} -.workout-title a:hover { - color: #EE4056; -} -.workout-info { - display: flex; - align-items: center; - margin: 0.25em 0; -} -.workout-info li { - color: #959595; -} -.workout-info li:after { - content: "|"; - margin: 0 0.5em; -} -.workout-info li:last-child:after { - content: ""; - margin: 0; -} -.workout-map { - margin-top: 1em; -} -.workout-map img { - width: 100%; -} -.workout-intro { - font-size: 13px; - font-size: 0.8125rem; - color: #151515; -} -.workout-options { - display: inline-block; - border: 1px solid #e1e1e1; - margin-bottom: 0; - border-radius: 4px; -} -.workout-options li { - display: inline-block; - border-right: 1px solid #e1e1e1; -} -.workout-options li:last-child { - border-right: none; -} -.workout-options a { - color: #959595; - padding: 0.5em 0.75em; -} -.workout-options a:hover { - color: #151515; -} -.owo-del a:hover { - color: red; -} -.workout-aside { - width: 100%; -} -@media (min-width: 800px) { - .workout-aside { - max-width: 300px; - padding-left: 1.5em; - border-left: 1px solid #e1e1e1; - } -} -.aside-profile { - margin-bottom: 1em; -} -.aside-profile img { - width: 80px; - height: 80px; +.user-profile img { + width: 140px; + height: 140px; object-fit: cover; border-radius: 50%; } -.aside-profile h2 { - font-weight: 400; - font-size: 18px; - font-size: 1.125rem; - margin: 0 0 0.5em 0; -} -.aside-profile ul { - list-style-type: none; - margin: 0; - padding: 0; +.user-profile .workout-options { font-size: 13px; font-size: 0.8125rem; - color: #555555; -} -/* Week report */ -.svg-cotent svg { - width: 100%; - height: 100%; -} -.svg-cotent .label { - font-size: 13px; - font-size: 0.8125rem; - text-anchor: middle; -} -.svg-cotent .tick { - font-size: 13px; - font-size: 0.8125rem; -} -.week-stats { - border: 1px solid #e1e1e1; - background-color: rgba(225, 225, 225, 0.1); - padding: 0.75em; - border-radius: 4px; - margin-bottom: 2em; -} -.week-stats h3 { - margin: 0; - font-size: 14px; - font-size: 0.875rem; -} -.week-stats h3 + p { - margin: 0.25em 0 2em 0; - color: #959595; - font-size: 13px; - font-size: 0.8125rem; -} -.workout-activity-summary { - list-style-type: none; - padding: 0; - margin: 0; - background-color: rgba(21, 21, 21, 0.8); - margin-bottom: 0.75em; -} -.workout-activity-summary li { - color: #e1e1e1; - border-bottom: 1px solid #959595; - padding: 0.75em 1em; - display: flex; - justify-content: space-between; -} -.workout-activity-summary li:last-child { - margin-bottom: 0; - border: none; -} -.workout-activity-summary li span:first-child { - font-weight: bold; -} -.workout-activity-tree { - list-style-type: none; - padding: 0; - margin: 0; - transition: all 250ms ease-in-out; - font-size: 13px; - font-size: 0.8125rem; -} -.workout-activity-tree > li { - margin-bottom: 0.5em; - padding-bottom: 0.5em; - border-bottom: 1px solid #e1e1e1; -} -.workout-activity-tree a { - text-decoration: none; - display: block; - color: #EE4056; -} -.workout-activity-tree a:hover { - color: #151515; -} -.workout-activity-tree a.viewing-year { - color: #151515; - font-weight: 700; - margin-bottom: 0.5em; - font-size: 16px; - font-size: 1rem; -} -.workout-activity-tree a.viewing-month { - background-color: #e1e1e1; - color: #151515; - font-weight: 700; -} -.workout-activity-tree-year { - list-style-type: none; - padding: 0; - margin: 0; -} -.workout-activity-tree-year > li { - display: block; - margin-bottom: 0.5em; -} -.workout-activity-tree-year a { - display: flex; - justify-content: space-between; - padding: 0.5em; - background-color: #fbfbfb; - color: #555555; -} -.workout-activity-tree-year a:hover { - background-color: #e1e1e1; } /* Workout detail */ @@ -884,17 +920,2 @@ height: 50vh; } -/* dashboard graphics*/ -.x-axis path, -.x-axis line { - fill: none; - stroke: none; -} -.bar { - fill: #f8b5be; -} -.bar:hover { - fill: #ee4056; -} -.current { - fill: #ee4056; -} Index: ow/static/less/main.less =================================================================== --- ow/static/less/main.less (revision 22eb5de6e2dfc8f8390337b3b72fb0efafad28ca) +++ ow/static/less/main.less (revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6) @@ -18,11 +18,11 @@ @import "ui/buttons.less"; -// Pages -@import "pages/login.less"; - // Modules @import "modules/header.less"; @import "modules/workout.less"; +// Pages +@import "pages/login.less"; +@import "pages/profile.less"; @@ -31,21 +31,2 @@ height: 50vh; } - -/* dashboard graphics*/ - -.x-axis path, .x-axis line { - fill: none; - stroke: none; -} - -.bar { - fill: #f8b5be; -} - -.bar:hover { - fill: #ee4056; -} - -.current { - fill: #ee4056; -} Index: ow/static/less/modules/workout.less =================================================================== --- ow/static/less/modules/workout.less (revision 22eb5de6e2dfc8f8390337b3b72fb0efafad28ca) +++ ow/static/less/modules/workout.less (revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6) @@ -121,4 +121,5 @@ margin-bottom: 0; border-radius: 4px; + padding: 0; li{ display: inline-block; @@ -129,6 +130,8 @@ } a{ + display: block; color: @color-main-medium; padding: .5em .75em; + text-decoration: none; &:hover{ color: @color-main; @@ -181,5 +184,4 @@ /* Week report */ - .svg-cotent { svg { @@ -197,4 +199,24 @@ } + +/* dashboard graphics*/ +.x-axis path, .x-axis line { + fill: none; + stroke: none; +} + +.bar { + fill: #f8b5be; + &:hover { + fill: #ee4056; + } +} + +.current { + fill: #ee4056; +} + + + .week-stats { border: 1px solid @color-main-light; Index: ow/static/less/pages/profile.less =================================================================== --- ow/static/less/pages/profile.less (revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6) +++ ow/static/less/pages/profile.less (revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6) @@ -0,0 +1,15 @@ +.user-profile { + padding: 2em 1em; + @media (min-width: @screen-s){ + padding: 2em 6em; + } + img { + width: 140px; + height: 140px; + object-fit: cover; + border-radius: 50%; + } + .workout-options { + .font-size(13); + } +} Index: ow/templates/profile.pt =================================================================== --- ow/templates/profile.pt (revision 22eb5de6e2dfc8f8390337b3b72fb0efafad28ca) +++ ow/templates/profile.pt (revision 594fbe8b4d8cda74bd859615fa7ea143f77878b6) @@ -21,19 +21,19 @@