Changeset 594fbe8 in OpenWorkouts-current

Timestamp:

Jan 29, 2019, 1:59:43 PM (5 years ago)

Author:

Segundo Fdez <segun.2@…>

Branches:

current, feature/docs, master

Children:

67fc2ed

Parents:

22eb5de

Message:

Added profile basic ui

Location:

ow

Files:

• static/css/main.css (modified) (3 diffs)
• static/less/main.less (modified) (2 diffs)
• static/less/modules/workout.less (modified) (4 diffs)
• static/less/pages/profile.less (added)
• templates/profile.pt (modified) (3 diffs)

ow/static/css/main.css

@@ -408 +408 @@
   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 +898 @@
 <a class="login-remember" href="#">Forgot your password?</a>
 */
-.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 +920 @@
   height: 50vh;
 }
-/* dashboard graphics*/
-.x-axis path,
-.x-axis line {
-  fill: none;
-  stroke: none;
-}
-.bar {
-  fill: #f8b5be;
-}
-.bar:hover {
-  fill: #ee4056;
-}
-.current {
-  fill: #ee4056;
-}

ow/static/less/main.less

@@ -18 +18 @@
 @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 +31 @@
     height: 50vh;
 }
-
-/* dashboard graphics*/
-
-.x-axis path, .x-axis line {
-    fill: none;
-    stroke: none;
-}
-
-.bar {
-    fill: #f8b5be;
-}
-
-.bar:hover {
-    fill: #ee4056;
-}
-
-.current {
-    fill: #ee4056;
-}

ow/static/less/modules/workout.less

@@ -121 +121 @@
     margin-bottom: 0;
     border-radius: 4px;
+    padding: 0;
     li{
         display: inline-block;
@@ -129 +130 @@
     }
     a{
+        display: block;
         color: @color-main-medium;
         padding: .5em .75em;
+        text-decoration: none;
         &:hover{
             color: @color-main;
@@ -181 +184 @@
 
 /* Week report */
-
 .svg-cotent {
     svg {
@@ -197 +199 @@
 
 }
+
+/* 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;

ow/templates/profile.pt

@@ -21 +21 @@
       <h2>
           <tal:fullname tal:content="context.fullname"></tal:fullname>
-          <tal:has-nickname tal:condition="context.nickname">
-              (<tal:nickname tal:content="context.nickname"></tal:nickname>)
-          </tal:has-nickname>
       </h2>
-      <h3>
-        <tal:email tal:content="context.email"></tal:email>
-      </h3>
-      <h4>
-        <a href=""
+      <p>
+        <tal:has-nickname tal:condition="context.nickname">
+            <tal:nickname tal:content="context.nickname"></tal:nickname>
+        </tal:has-nickname> (<tal:email tal:content="context.email"></tal:email>)
+      </p>
+      <ul class="workout-options">
+        <li><a href=""
            tal:attributes="href request.resource_url(context, 'edit')"
-           i18n:translate="">edit profile</a> |
-        <a href=""
+           i18n:translate="">edit profile</a></li>
+        <li><a href=""
            tal:attributes="href request.resource_url(context, 'passwd')"
-           i18n:translate="">change password</a>
-      </h4>
+           i18n:translate="">change password</a></li>
+      </ul>
+
       <div class="profile-info">
         <ul>
@@ -83 +83 @@
       <div class="month-stats js-month-stats">
         <svg width="600" height="300"></svg>
-        <div class="filters js-filters">
-          <a href="#" class="js-distance" i18n:translate="">distance</a>
-          <a href="#" class="js-time" i18n:translate="">time</a>
-          <a href="#" class="js-elevation" i18n:translate="">elevation</a>
-        </div>
+        <ul class="filters js-filters">
+          <li><a href="#" class="js-distance" i18n:translate="">distance</a></li>
+          <li><a href="#" class="js-time" i18n:translate="">time</a></li>
+          <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
+        </ul>
       </div>
 
@@ -107 +107 @@
 
      var year_chart = owjs.year_chart({
-         chart_selector: 'div.js-month-stats svg',
-         filters_selector: 'div.js-month-stats div.js-filters a',
+         chart_selector: '.js-month-stats svg',
+         filters_selector: '.js-month-stats .js-filters a',
          url: "${request.resource_url(context, 'yearly')}",
          current_month: "${current_month}",