Changeset 02b96c5 in OpenWorkouts-current for ow/static/css/main.css

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/css/main.css (modified) (1 diff)

ow/static/css/main.css

@@ -1552 +1552 @@
   -moz-outline-style: none;
 }
+/* Calendar heatmap */
+.calendar-heatmap {
+  margin: 20px;
+}
+.calendar-heatmap .month {
+  margin-right: 8px;
+}
+.calendar-heatmap .month-name {
+  font-size: 85%;
+  fill: #777;
+}
+.calendar-heatmap .day-name {
+  font-size: 85%;
+  fill: #777;
+}
+.calendar-heatmap .day:hover {
+  stroke: #e1e1e1;
+  stroke-width: 2;
+}
+.calendar-heatmap .day:focus {
+  stroke: #e1e1e1;
+  stroke-width: 2;
+}
 .verify-account-content {
   background-position: center;