serversdown/terra-view
1
0
Fork 0
Code Issues 13 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

fix: update session calendar layout and improve session labels for clarity

Browse Source
This commit is contained in:
serversdown
2026-03-28 01:44:59 +00:00
parent 27eeb0fae6
commit e7bd09418b
2 changed files with 14 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
templates/partials/projects/sessions_calendar.html
View File

@@ -1,5 +1,5 @@
<!-- Monthly Sessions Calendar — Gantt Style -->
<div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
<div class="sessions-cal-wrap bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
<!-- Month navigation -->
<div class="px-5 py-3 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
@@ -79,40 +79,29 @@
{% if day.sessions %}
<div class="space-y-2">
{% for s in day.sessions %}
{% set tooltip %}{{ s.label }} · Device {{ s.dev_start_label }}–{{ s.dev_end_label }}{% if s.eff_start_label %} · Window {{ s.eff_start_label }}–{{ s.eff_end_label }}{% endif %}{% endset %}
<a href="/api/projects/{{ project_id }}/sessions/{{ s.session_id }}/detail"
class="block group"
title="{{ tooltip }}">
<a href="/api/projects/{{ project_id }}/sessions/{{ s.session_id }}/detail" class="block">
<!-- 24-hour timeline bar -->
<div class="relative w-full rounded-sm overflow-hidden" style="height:11px; background:rgba(128,128,128,0.08);">
<!-- Hour guide ticks at 6h, 12h, 18h -->
<div class="relative overflow-hidden -mx-1.5" style="height:11px; background:rgba(128,128,128,0.08);">
<div class="absolute top-0 bottom-0 w-px" style="left:25%; background:rgba(128,128,128,0.18)"></div>
<div class="absolute top-0 bottom-0 w-px" style="left:50%; background:rgba(128,128,128,0.28)"></div>
<div class="absolute top-0 bottom-0 w-px" style="left:75%; background:rgba(128,128,128,0.18)"></div>
<!-- Device on/off bar (dim) -->
<div class="absolute top-0 bottom-0 rounded-sm"
style="left:{{ s.dev_start_pct }}%; width:{{ s.dev_width_pct }}%; background-color:{{ s.color }}; opacity:0.28;">
</div>
<!-- Effective window (solid, slightly inset) -->
<div class="absolute top-0 bottom-0"
style="left:{{ s.dev_start_pct }}%; width:{{ s.dev_width_pct }}%; background-color:{{ s.color }}; opacity:0.28;"></div>
{% if s.eff_start_pct is not none %}
<div class="absolute rounded-sm group-hover:brightness-110 transition-all"
style="left:{{ s.eff_start_pct }}%; width:{{ s.eff_width_pct }}%; top:1.5px; bottom:1.5px; background-color:{{ s.color }};">
</div>
<div class="absolute"
style="left:{{ s.eff_start_pct }}%; width:{{ s.eff_width_pct }}%; top:1.5px; bottom:1.5px; background-color:{{ s.color }};"></div>
{% endif %}
</div>
<!-- Location micro-label -->
<div class="truncate mt-0.5 group-hover:opacity-70 transition-opacity"
style="color:{{ s.color }}; font-size:0.58rem; line-height:1.3;">
{{ s.location_name }}{% if s.period_type %} <span class="opacity-60">{{ '☀' if 'day' in s.period_type else '☾' }}</span>{% endif %}
<!-- Label -->
<div class="truncate mt-0.5" style="color:{{ s.color }}; font-size:0.58rem; line-height:1.3;">
{{ s.location_name }} · {{ day.date.strftime('%-m/%-d') }} · {% if s.period_type %}{{ 'Night' if 'night' in s.period_type else 'Day' }}{% else %}—{% endif %}
</div>
</a>
{% endfor %}
</div>
{% endif %}
@@ -132,3 +121,4 @@
</div>
</div>