Changeset 02b96c5 in OpenWorkouts-current for ow/static/less/pages/profile.less

Timestamp:

Mar 12, 2019, 12:47:38 PM (5 years ago)

Author:

Borja Lopez <borja@…>

Branches:

current

Children:

8ba32d9

Parents:

d9453fc

Message:

(#7) Added calendar heatmap chart to the profile page.

The calendar shows the current month, each day without a workout represented
by a light grey square, each day with workout data in a red/pink color, picked
up from a gradient generated based on the app main colors, and calculated based
on the amount of workout time for the day.

A tooltip is shown on hover with more info (only the total workouts time for
now)

File:

• ow/static/less/pages/profile.less (modified) (1 diff)

ow/static/less/pages/profile.less

@@ -154 +154 @@
     }
 }
+
+
+/* Calendar heatmap */
+.calendar-heatmap {
+    margin: 20px;
+    .month {
+        margin-right: 8px;
+    }
+    .month-name {
+        font-size: 85%;
+        fill: #777;
+    }
+    .day-name {
+        font-size: 85%;
+        fill: #777;
+    }
+    .day {
+        &:hover {
+            stroke: #e1e1e1;
+            stroke-width: 2;
+        }
+        &:focus {
+            stroke: #e1e1e1;
+            stroke-width: 2;
+        }
+    }
+}