style: sticky diff headers and patchset list

commit: 4a4ff1d
parent: a277faa
author: Eric Bower
date: 2024-11-12 22:25:27 -0500 EST

style: sticky diff headers and patchset list

3 files changed, +21, -4

M static/git-pr.css

M tmpl/patchset.html

M tmpl/pr-header.html

M static/git-pr.css

+15, -0

 1@@ -49,6 +49,21 @@ details {
 2   word-break: break-word;
 3 }
 4 
 5+.patchset-list {
 6+  position: sticky;
 7+  top: 0;
 8+  left: 0;
 9+  height: max-content;
10+}
11+
12+.patch-file {
13+  position: sticky;
14+  top: 0;
15+  left: 0;
16+  padding: var(--grid-height) 0;
17+  background-color: var(--bg-color);
18+}
19+
20 @media only screen and (max-width: 40em) {
21   .collapse {
22     flex-direction: column;

M tmpl/patchset.html

+5, -3

 1@@ -1,8 +1,8 @@
 2 {{define "patchset"}}
 3 <div class="group">
 4   <div class="flex gap-2 collapse">
 5-    <div class="group" style="width: 300px;">
 6-      <h2 class="text-xl">
 7+    <div class="group patchset-list" style="width: 300px;">
 8+      <h2 class="text-xl mt">
 9         Patchset <code>ps-{{.Patchset.ID}}</code>
10       </h2>
11 
12@@ -37,6 +37,8 @@
13           No patches found for patch request.
14         </div>
15       {{end}}
16+
17+      <div><a href="#top">Back to top</a></div>
18     </div>
19 
20     <div class="max-w flex-1">
21@@ -48,7 +50,7 @@
22 
23           {{range $patch.PatchFiles}}
24             <div>
25-              <div class="group-h" id="patch-{{$patch.ID}}-{{.NewName}}">
26+              <div class="group-h patch-file" id="patch-{{$patch.ID}}-{{.NewName}}">
27                 <a href="#patch-{{$patch.ID}}-{{.NewName}}" class="word-break-word">{{.NewName}}</a>
28                 <div class="flex gap">
29                   <code class="pill-success">+{{.Adds}}</code>

M tmpl/pr-header.html

+1, -1

1@@ -1,5 +1,5 @@
2 {{define "pr-header"}}
3-<header>
4+<header id="top">
5   <h1 class="text-2xl mb">
6     <a href="/">dashboard</a>
7     <span> / <a href="{{.Repo.Url}}">{{.Repo.Text}}</a></span>