41 lines
1.4 KiB
HTML
41 lines
1.4 KiB
HTML
{{define "actionhistory"}}
|
|
<div id="actionHistoryContainer" class="overflow-y-auto max-h-96 border-2 border-gray-300 p-4 rounded-lg space-y-2">
|
|
Backlog:
|
|
{{range .}}
|
|
<div class="flex items-center justify-between p-2 rounded">
|
|
<span class="font-mono text-sm">
|
|
<span class="text-{{.ActorColor}}-600">{{.Actor}}:</span>
|
|
<span class="text-gray-600">{{.Action}}:</span>
|
|
<span class="text-{{.WordColor}}-500 font-medium">{{.Word}}</span>
|
|
{{if .Number}}
|
|
<span class="text-gray-400">- {{.Number}}</span>
|
|
{{end}}
|
|
</span>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<script>
|
|
if (!window.actionHistoryScrollSet) {
|
|
// Use HTMX's after-swap event to scroll after content updates
|
|
document.addEventListener('htmx:afterSwap', function(evt) {
|
|
if (evt.target.id === 'actionHistoryContainer' || evt.detail.target.id === 'actionHistoryContainer') {
|
|
const container = document.getElementById('actionHistoryContainer');
|
|
if (container) {
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
}
|
|
});
|
|
// Fallback for initial load
|
|
htmx.onLoad(function(target) {
|
|
if (target.id === 'actionHistoryContainer') {
|
|
const container = document.getElementById('actionHistoryContainer');
|
|
if (container) {
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
}
|
|
});
|
|
window.actionHistoryScrollSet = true;
|
|
}
|
|
</script>
|
|
{{end}}
|