Changeset 778d53d in OpenWorkouts-current for ow/static

Timestamp:

Mar 5, 2019, 11:45:32 PM (5 years ago)

Author:

Borja Lopez <borja@…>

Branches:

current

Children:

aa6dcaf

Parents:

35953eb

Message:

(#7) Show per-sport stats in the profile page:

• Show a dropdown list of sports for which the user has activities. By default we choose the sport with most activities.

• Show a dropdown list of years for which the user has activities. By default we show stats for the current year. If the user picks up a different year, we show the totals (distance, time, elevation, number of workouts) for that year.

• Show the totals of all time for the chosen sport

Location:

ow/static

Files:

• css/main.css (modified) (2 diffs)
• js/ow.js (modified) (1 diff)
• less/main.less (modified) (1 diff)
• less/pages/profile.less (modified) (1 diff)
• less/ui/arrows.less (added)

ow/static/css/main.css

@@ -642 +642 @@
   background-color: #EE4056;
 }
+/*
+Very simple way to paint dropdown-like arrows, without
+using any external dependencies.
+
+To use it, add something like this to your html, to display a "down" arrow:
+
+  <i class="arrow down"></i>
+*/
+i.arrow {
+  border: solid black;
+  border-width: 0 3px 3px 0;
+  display: inline-block;
+  padding: 3px;
+  margin: 3px;
+  margin-left: 6px;
+  margin-right: 0px;
+}
+.right {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+.left {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+.up {
+  transform: rotate(-135deg);
+  -webkit-transform: rotate(-135deg);
+}
+.down {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+}
 .header-content {
   padding: 1em 1.5em;
@@ -1488 +1521 @@
   font-size: 13px;
   font-size: 0.8125rem;
+}
+.profile-dropdown-sports,
+.profile-dropdown-years {
+  color: #151515;
+  text-decoration: none;
+}
+.profile-dropdown-sports:hover,
+.profile-dropdown-years:hover {
+  color: #151515;
+}
+.profile-dropdown-sports:active,
+.profile-dropdown-years:active,
+.profile-dropdown-sports:focus,
+.profile-dropdown-years:focus {
+  outline: 0;
+  border: none;
+  -moz-outline-style: none;
 }
 .verify-account-content {

ow/static/js/ow.js

@@ -486 +486 @@
 
 };
+
+
+owjs.sport_stats = function(spec) {
+
+    "use strict";
+
+    var link_selector = spec.link_selector;
+    var stats_selector = spec.stats_selector;
+    var selected = spec.selected;
+    var dropdown_selector = spec.dropdown_selector;
+    var current_year = spec.current_year;
+    var year_link_selector = spec.year_link_selector;
+
+    var setup = function setup() {
+        // Hide all sports stats by default
+        $(stats_selector).hide();
+        // Show the pre-selected one
+        $(selected).show();
+
+        $(link_selector).on('click', function(e) {
+            e.preventDefault();
+            var selected = $(this).attr('class').split(' ')[1];
+            var sport = selected.split('-')[1]
+            // Hide them all
+            $(stats_selector).hide();
+            // Show the selected one
+            $(stats_selector + '.' + selected).show();
+            // Update the sport on the sports selector widget
+            $(dropdown_selector + ' strong').html(sport);
+            // finally "click" on the proper year to be displayed for this sport
+            $(year_link_selector + sport + '-' + current_year).click();
+        });
+    };
+
+    var that = {}
+    that.setup = setup;
+    return that
+
+};
+
+
+owjs.year_stats = function(spec) {
+
+    "use strict";
+
+    var link_selector = spec.link_selector;
+    var stats_selector = spec.stats_selector;
+    var selected = spec.selected;
+    var dropdown_selector = spec.dropdown_selector;
+
+    var setup = function setup() {
+        // Hide all years stats by default
+        $(stats_selector).hide();
+        // Show the pre-selected one
+        $(selected).show();
+
+        $(link_selector).on('click', function(e) {
+            e.preventDefault();
+            var selected = $(this).attr('class').split(' ')[1];
+            var sport = selected.split('-')[1]
+            var year = selected.split('-')[2]
+            // Hide them all
+            $(stats_selector).hide();
+            // Show the selected one
+            $(stats_selector + '.' + selected).show();
+            // Update the year on the years selector widget
+            $(dropdown_selector + sport + ' strong').html(year);
+        });
+    };
+
+    var that = {}
+    that.setup = setup;
+    return that
+
+};

ow/static/less/main.less

@@ -23 +23 @@
 @import "ui/form.less";
 @import "ui/buttons.less";
+@import "ui/arrows.less";
 
 // Modules

ow/static/less/pages/profile.less

@@ -128 +128 @@
         }
 }
+
+.profile-dropdown-sports,
+.profile-dropdown-years {
+    color: @color-main;
+    text-decoration: none;
+    &:hover {
+        color: @color-main;
+    }
+    &:active, &:focus {
+        outline: 0;
+        border: none;
+        -moz-outline-style: none;
+    }
+}