diff options
| -rw-r--r-- | asset-sources/theme.scss | 35 | ||||
| -rw-r--r-- | fietsboek/static/theme.css | 31 | ||||
| -rw-r--r-- | fietsboek/static/theme.css.map | 2 | ||||
| -rw-r--r-- | fietsboek/templates/profile.jinja2 | 6 | ||||
| -rw-r--r-- | fietsboek/views/profile.py | 24 |
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 = [] |