more styling for the calendar

Styling based on distance travelled!

5 files changed, 94 insertions, 4 deletions

diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss
index f5b33da..ffd43d7 100644
--- a/asset-sources/theme.scss
+++ b/asset-sources/theme.scss
@@ -161,6 +161,11 @@ strong {
 .profile-calendar {
   width: 100%;
 
+  thead {
+    text-align: center;
+    font-size: 120%;
+  }
+
   .calendar-cell, .calendar-cell-empty {
     height: 150px;
     width: calc(100%/7);
@@ -174,6 +179,36 @@ strong {
       font-size: 140%;
       font-weight: bold;
     }
+
+    ul {
+      list-style: none;
+      text-align: right;
+    }
+  }
+
+  .cell-length-0 {
+    color: gray;
+  }
+  .cell-length-1 {
+    background-color: #8FF0A4;
+  }
+  .cell-length-2 {
+    background-color: #75DD95;
+  }
+  .cell-length-3 {
+    background-color: #5BC987;
+  }
+  .cell-length-4 {
+    background-color: #40B678;
+  }
+  .cell-length-5 {
+    color: white;
+    background-color: #26A269;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
   }
 }
 
diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css
index afbf63e..bd340c8 100644
--- a/fietsboek/static/theme.css
+++ b/fietsboek/static/theme.css
@@ -154,6 +154,10 @@ strong {
 .profile-calendar {
   width: 100%;
 }
+.profile-calendar thead {
+  text-align: center;
+  font-size: 120%;
+}
 .profile-calendar .calendar-cell, .profile-calendar .calendar-cell-empty {
   height: 150px;
   width: 14.2857142857%;
@@ -166,6 +170,33 @@ strong {
   font-size: 140%;
   font-weight: bold;
 }
+.profile-calendar .calendar-cell ul {
+  list-style: none;
+  text-align: right;
+}
+.profile-calendar .cell-length-0 {
+  color: gray;
+}
+.profile-calendar .cell-length-1 {
+  background-color: #8FF0A4;
+}
+.profile-calendar .cell-length-2 {
+  background-color: #75DD95;
+}
+.profile-calendar .cell-length-3 {
+  background-color: #5BC987;
+}
+.profile-calendar .cell-length-4 {
+  background-color: #40B678;
+}
+.profile-calendar .cell-length-5 {
+  color: white;
+  background-color: #26A269;
+}
+.profile-calendar a {
+  text-decoration: none;
+  color: inherit;
+}
 
 /* Ensure a consistent width of the cells in the browse view. */
 .browse-summary th, .browse-summary td {
diff --git a/fietsboek/static/theme.css.map b/fietsboek/static/theme.css.map
index a84d95b..94a1dcc 100644
--- a/fietsboek/static/theme.css.map
+++ b/fietsboek/static/theme.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;;AAKN;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file
diff --git a/fietsboek/templates/profile.jinja2 b/fietsboek/templates/profile.jinja2
index ae61671..c872e7d 100644
--- a/fietsboek/templates/profile.jinja2
+++ b/fietsboek/templates/profile.jinja2
@@ -175,13 +175,13 @@
         <tr>
           {% for cell in row %}
           {% if cell %}
-          {% set day, tracks = cell %}
-          <td class="calendar-cell">
+          {% set day, style, tracks = cell %}
+          <td class="calendar-cell {{ style }}">
             <p class="calendar-date">{{ day.day }}</p>
             {% if tracks %}
             <ul>
               {% for track in tracks %}
-              <li>{{ (track.length / 1000) | round(2) | format_decimal }} km</li>
+              <li><a href="{{ request.route_url('details', track_id=track.id) }}">{{ (track.length / 1000) | round(2) | format_decimal }} km</a></li>
               {% endfor %}
             </ul>
             {% endif %}
diff --git a/fietsboek/views/profile.py b/fietsboek/views/profile.py
index ae5c34e..0127cd3 100644
--- a/fietsboek/views/profile.py
+++ b/fietsboek/views/profile.py
@@ -249,6 +249,25 @@ def user_calendar_ym(request: Request) -> dict:
     return data
 
 
+def cell_style(tracks: list[TrackWithMetadata]) -> str:
+    length = sum(track.length for track in tracks)
+    # kilometers
+    length = length / 1000
+    # Arbitrary cutoffs for the moment
+    if length == 0:
+        return "cell-length-0"
+    elif length <= 25:
+        return "cell-length-1"
+    elif length <= 50:
+        return "cell-length-2"
+    elif length <= 75:
+        return "cell-length-3"
+    elif length <= 100:
+        return "cell-length-4"
+    else:
+        return "cell-length-5"
+
+
 def calendar_rows(
     dbsession: "sqlalchemy.orm.session.Session",
     data_manager: DataManager,
@@ -293,6 +312,11 @@ def calendar_rows(
         for day in days
     ]
 
+    # Step 3.5: Style the cells
+    days = [
+        (day, cell_style(tracks), tracks) for (day, tracks) in days
+    ]
+
     # Step 4: Layout
     rows = []
     row = []