Changeset 5cbc4a0 in OpenWorkouts-current

Timestamp:

Jan 18, 2019, 5:46:48 PM (5 years ago)

Author:

Segundo Fdez <segun.2@…>

Branches:

current, feature/docs, master

Children:

2d2eb0d

Parents:

55e98e4

Message:

Update dashboard and login with less.

Location:

ow

Files:

• static/______css/__forms.css (moved) (moved from ow/static/css/__forms.css)
• static/______css/__main.css (moved) (moved from ow/static/css/__main.css)
• static/______css/__main.min.css (moved) (moved from ow/static/css/__main.min.css)
• static/______css/__openworkouts.css (moved) (moved from ow/static/css/__openworkouts.css)
• static/______css/common.css (moved) (moved from ow/static/css/common.css)
• static/______css/main.css (added)
• static/______css/modules/header.css (moved) (moved from ow/static/css/modules/header.css)
• static/______css/pages/login.css (moved) (moved from ow/static/css/pages/login.css)
• static/______css/ui/buttons.css (moved) (moved from ow/static/css/ui/buttons.css)
• static/______css/ui/form.css (moved) (moved from ow/static/css/ui/form.css)
• static/______css/variables.css (moved) (moved from ow/static/css/variables.css)
• static/______css/vendors/normalize.css (moved) (moved from ow/static/css/vendors/normalize.css)
• static/css/main.css (modified) (1 diff)
• static/less/common.less (added)
• static/less/main.less (added)
• static/less/mixins/mixins.less (added)
• static/less/modules/header.less (added)
• static/less/modules/workout.less (added)
• static/less/pages/login.less (added)
• static/less/ui/buttons.less (added)
• static/less/ui/form.less (added)
• static/less/variables.less (added)
• static/less/vendors/normalize.less (added)
• templates/dashboard.pt (modified) (3 diffs)

ow/static/css/main.css

@@ -1 @@
-/* google fonts */
-@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,700,700italic,800";
-
-/* normalize */
-@import "vendors/normalize.css";
-
-/* Variables */
-@import "variables.css";
-
-/* UI */
-@import "ui/form.css";
-@import "ui/buttons.css";
-
-/* Common styles */
-@import "common.css";
-
-/* Modules */
-@import "modules/header.css";
-
-/* Pages */
-@import "pages/login.css";
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 300;
+  src: local('Open Sans Light Italic'), local('OpenSans-LightItalic'), url(http://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWyV9hrIqY.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v15/mem6YaGs126MiZpBA-UFUK0Zdcg.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://fonts.gstatic.com/s/opensans/v15/memnYaGs126MiZpBA-UFUKWiUNhrIqY.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 300;
+  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(http://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN7rgOUuhs.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 800;
+  src: local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(http://fonts.gstatic.com/s/opensans/v15/mem5YaGs126MiZpBA-UN8rsOUuhs.ttf) format('truetype');
+}
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/* Document
+   ========================================================================== */
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+html {
+  line-height: 1.15;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+}
+/* Sections
+   ========================================================================== */
+/**
+ * Remove the margin in all browsers.
+ */
+body {
+  margin: 0;
+}
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+/* Grouping content
+   ========================================================================== */
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+hr {
+  box-sizing: content-box;
+  /* 1 */
+  height: 0;
+  /* 1 */
+  overflow: visible;
+  /* 2 */
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+pre {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+/* Text-level semantics
+   ========================================================================== */
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+a {
+  background-color: transparent;
+}
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  /* 1 */
+  font-size: 1em;
+  /* 2 */
+}
+/**
+ * Add the correct font size in all browsers.
+ */
+small {
+  font-size: 80%;
+}
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+/* Embedded content
+   ========================================================================== */
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+img {
+  border-style: none;
+}
+/* Forms
+   ========================================================================== */
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  line-height: 1.15;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+}
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+/**
+ * Correct the padding in Firefox.
+ */
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+legend {
+  box-sizing: border-box;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  display: table;
+  /* 1 */
+  max-width: 100%;
+  /* 1 */
+  padding: 0;
+  /* 3 */
+  white-space: normal;
+  /* 1 */
+}
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+progress {
+  vertical-align: baseline;
+}
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+textarea {
+  overflow: auto;
+}
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  /* 1 */
+  padding: 0;
+  /* 2 */
+}
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+[type="search"] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+/* Interactive
+   ========================================================================== */
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+details {
+  display: block;
+}
+/*
+ * Add the correct display in all browsers.
+ */
+summary {
+  display: list-item;
+}
+/* Misc
+   ========================================================================== */
+/**
+ * Add the correct display in IE 10+.
+ */
+template {
+  display: none;
+}
+/**
+ * Add the correct display in IE 10.
+ */
+[hidden] {
+  display: none;
+}
+.hidden,
+.hide {
+  display: none;
+}
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+html {
+  box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+/* Generic default forms */
+form {
+  width: 100%;
+}
+legend {
+  display: none;
+}
+fieldset {
+  border: none;
+  padding: 0;
+}
+fieldset > div {
+  margin-bottom: 1.5em;
+}
+label {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 0.25em;
+}
+input {
+  width: 100%;
+  padding: 0.5em 0.75em;
+  border: 1px solid transparent;
+  border-radius: 2px;
+}
+/* Generic button */
+.button {
+  box-sizing: border-box;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  border: 1px solid transparent;
+  text-decoration: none;
+  font-style: normal;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 0.3em 1em;
+  margin: 0;
+  position: relative;
+  overflow: hidden;
+  background: #e1e1e1;
+  color: #151515;
+  font-size: 1em;
+  line-height: 1.25;
+  max-width: 100%;
+}
+.login-content {
+  background-image: url("../media/img/back-01.jpg");
+  background-size: cover;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 98px);
+  padding: 1em 0;
+}
+.login-content form {
+  max-width: 380px;
+  background-color: rgba(21, 21, 21, 0.6);
+  border-radius: 6px;
+  padding: 2em 1.5em;
+}
+.login-content form div {
+  margin-bottom: 1.5em;
+}
+.login-content label {
+  color: #e1e1e1;
+}
+.login-content a {
+  color: #e1e1e1;
+  font-size: 13px;
+  text-decoration: none;
+  margin-right: 0.75em;
+}
+.login-content a:hover {
+  color: white;
+}
+.login-content .button {
+  transition: all 500ms ease-in-out;
+  background-color: #EE4056;
+  color: white;
+  text-transform: uppercase;
+}
+.login-content .button:hover {
+  background-color: #e6152f;
+}
+.login-content .message {
+  padding: 0.5em;
+  margin: 0;
+  text-align: center;
+  font-size: 13px;
+  font-size: 0.8125rem;
+}
+.login-content .message.message-error {
+  color: white;
+  background-color: red;
+}
+/*
+.login-remember {
+    color: @color-main-medium;
+    .font-size(14);
+    text-decoration: none;
+    font-weight: 300;
+    &:hover{
+        color: @color-main-light;
+    }
+}
+<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 {
+  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-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: 2em;
+}
+.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;
+}
+.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;
+}
+.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;
+}

ow/templates/dashboard.pt

@@ -25 +25 @@
       <section class="workout-list">
 
-        <h2 tal:content="context.fullname"></h2>
-
         <h3>
-            (<tal:n tal:content="len(workouts)"></tal:n>/<tal:n tal:content="context.num_workouts"></tal:n>) <tal:t i18n:translate="">workouts</tal:t>
+           <tal:n tal:content="len(workouts)"></tal:n> <tal:t i18n:translate="">Activities</tal:t>
         </h3>
 
@@ -103 +101 @@
 
       <aside class="workout-aside">
+      <div class="aside-profile">
+        <tal:c tal:condition="getattr(context, 'picture', None)">
+          <img tal:attributes="src request.resource_path(context, 'picture')"
+               width="450" />
+        </tal:c>
+        <h2 tal:content="context.fullname"></h2>
+        <ul>
+          <Li>
+            <tal:n tal:content="context.num_workouts"></tal:n> <tal:t i18n:translate="">workouts</tal:t>
+          </Li>
+        </ul>
+      </div>
           <tal:activity_tree tal:condition="context.num_workouts > 0">
               <ul class="workout-activity-tree" tal:define="tree context.activity_dates_tree">
@@ -115 +125 @@
                               <tal:months tal:repeat="month sorted(tree[year].keys())">
                                   <li tal:define="is_viewing_month is_viewing_year and month == viewing_month">
-                                      <a href="" tal:content="month_name[month]"
+                                      <a href=""
                                          tal:attributes="href request.resource_url(context, query={'year': year, 'month': month});
                                                          class 'viewing-month' if is_viewing_month else ''">
+                                           <span tal:content="month_name[month]"></span>
+                                           <span tal:content="sum([tree[year][month][sport] for sport in tree[year][month]])"></span>
                                       </a>
-                                      <ul class="workout-activity-tree-month">
-                                          <tal:sports tal:repeat="sport sorted(tree[year][month].keys())">
-                                              <li>
-                                                  <a href="#">
-                                                      <tal:sport tal:content="sport"></tal:sport> (<tal:workouts tal:content="tree[year][month][sport]"></tal:workouts>)
-                                                  </a>
-                                              </li>
-                                          </tal:sports>
-                                      </ul>
                                   </li>
                               </tal:months>