{% extends "base.html" %} {% block title %}Stack history for {{stack_name}}{% endblock %} {% block content %} <main> <header> <h1>Stack history for <span class="stack-name">{{stack_name}}</span></h1> <div id="page-actions"> </div> </header> <section class="versions"> {% for (i, commit) in commits.iter().enumerate() %} <article> <p> <time datetime="{{commit.date}}">{{commit.date_human()}}</time> <span class="commit_id"> {{commit.oid[..7]}} </span> </p> <details open> <summary title="{{commit.message}} ({{commit.author}})"> {{commit.message}} </summary> <code> {% for line in commit.diff() %} {% match line.chars().next() %} {% when Some with ('+') %} <pre class="add">{{line}}</pre> {% when Some with ('-') %} <pre class="del">{{line}}</pre> {% when _ %} <pre class="context">{{line}}</pre> {% endmatch %} {% endfor %} </code> </details> <div class="actions"> {% if i == 0 %} <button disabled>CURRENT</button> {% else %} <form method="POST" action="./history/revert"> <input type="hidden" name="oid" value="{{commit.oid}}" /> <button type="submit">Revert to this revision</button> </form> {% endif %} </div> </article> {% endfor %} </section> </main> <style scoped> .stack-name { color: var(--text-accent); } summary { cursor: pointer; } .versions { display: flex; flex-direction: column; gap: 1ch; & article { border: 1px solid var(--table-border-color); background-color: var(--table-bg); border-radius: 3px; padding: 8px; display: flex; flex-direction: column; gap: 0.5ch; & p { font-size: 9pt; margin: 0; & .commit_id::before { content: " - "; } } & code { font-size: 10pt; background-color: var(--bg-raised); display: flex; flex-direction: column; border-radius: 5px; padding: 4px 6px; margin-top: 0.5ch; } & pre { &.context { color: var(--button-color); } &.add { color: var(--success-text); } &.del { color: var(--danger-text); } } } } .actions { & button { padding: 2px 6px; font-size: 10pt; } } header { margin-bottom: 1rem; } </style> <script type="module"> const actions = document.getElementById("page-actions"); const toggle_text = ["Collapse all", "Expand all"]; /** @type {HTMLDetailsElement[]} */ const versions = [...document.querySelectorAll(".versions details")]; let toggle = document.createElement("button"); toggle.type = "button"; toggle.append(document.createTextNode(toggle_text[0])); toggle.addEventListener("click", () => { const index = toggle_text.indexOf(toggle.textContent); versions.forEach(version => { version.open = index == 1 }); toggle.textContent = toggle_text[(index + 1) % 2]; }); actions.append(toggle); </script> {% endblock %}