lewis.moe
Monorepo for Tangled
appview/pages: improve diff template and show current {inter,}diff round
Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.org>
+37
-3
appview/pages/templates/repo/fragments/diff.html
+37
-3
appview/pages/templates/repo/fragments/diff.html
···
4
#filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; }
5
#filesToggle:not(:checked) ~ div label[for="filesToggle"] .hide-text { display: none; }
6
#filesToggle:checked ~ div div#files { width: fit-content; max-width: 15vw; margin-right: 1rem; }
7
-
#filesToggle:not(:checked) ~ div div#files { width: 0; display: hidden; margin-right: 0; }
8
</style>
9
10
{{ template "diffTopbar" . }}
···
14
{{ define "diffTopbar" }}
15
{{ $diff := index . 0 }}
16
{{ $opts := index . 1 }}
17
18
{{ block "filesCheckbox" $ }} {{ end }}
19
{{ block "subsCheckbox" $ }} {{ end }}
20
21
<!-- top bar -->
22
-
<div class="sticky top-0 z-30 bg-slate-100 dark:bg-gray-900 flex items-center gap-2 col-span-full h-12 p-2">
23
<!-- left panel toggle -->
24
{{ template "filesToggle" . }}
25
···
28
{{ $count := len $diff.ChangedFiles }}
29
{{ template "repo/fragments/diffStatPill" $stat }}
30
{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}
31
32
<!-- spacer -->
33
<div class="flex-grow"></div>
···
137
{{ end }}
138
139
{{ define "collapseToggle" }}
140
-
<label
141
title="Expand/Collapse diffs"
142
for="collapseToggle"
143
class="btn font-normal normal-case p-2"
···
4
#filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; }
5
#filesToggle:not(:checked) ~ div label[for="filesToggle"] .hide-text { display: none; }
6
#filesToggle:checked ~ div div#files { width: fit-content; max-width: 15vw; margin-right: 1rem; }
7
+
#filesToggle:not(:checked) ~ div div#files { width: 0; display: none; margin-right: 0; }
8
</style>
9
10
{{ template "diffTopbar" . }}
···
14
{{ define "diffTopbar" }}
15
{{ $diff := index . 0 }}
16
{{ $opts := index . 1 }}
17
+
{{ $root := "" }}
18
+
{{ if gt (len .) 2 }}
19
+
{{ $root = index . 2 }}
20
+
{{ end }}
21
22
{{ block "filesCheckbox" $ }} {{ end }}
23
{{ block "subsCheckbox" $ }} {{ end }}
24
25
<!-- top bar -->
26
+
<div class="sticky top-0 z-30 flex items-center gap-2 col-span-full h-12 p-2 {{ if $root }}mt-4{{ end }}">
27
<!-- left panel toggle -->
28
{{ template "filesToggle" . }}
29
···
32
{{ $count := len $diff.ChangedFiles }}
33
{{ template "repo/fragments/diffStatPill" $stat }}
34
{{ $count }} changed file{{ if ne $count 1 }}s{{ end }}
35
+
36
+
{{ if $root }}
37
+
{{ if $root.IsInterdiff }}
38
+
<!-- interdiff indicator -->
39
+
<div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2">
40
+
<span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Interdiff</span>
41
+
<a
42
+
href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ sub $root.ActiveRound 1 }}"
43
+
class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
44
+
>
45
+
#{{ sub $root.ActiveRound 1 }}
46
+
</a>
47
+
<span class="text-gray-400 text-xs">→</span>
48
+
<a
49
+
href="/{{ $root.RepoInfo.FullName }}/pulls/{{ $root.Pull.PullId }}/round/{{ $root.ActiveRound }}"
50
+
class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs hover:bg-gray-50 dark:hover:bg-gray-600 border border-gray-300 dark:border-gray-600"
51
+
>
52
+
#{{ $root.ActiveRound }}
53
+
</a>
54
+
</div>
55
+
{{ else if ne $root.ActiveRound nil }}
56
+
<!-- diff round indicator -->
57
+
<div class="flex items-center gap-2 before:content-['|'] before:text-gray-300 dark:before:text-gray-600 before:mr-2">
58
+
<span class="text-xs text-gray-600 dark:text-gray-400 uppercase tracking-wide">Diff</span>
59
+
<span class="px-2 py-0.5 bg-white dark:bg-gray-700 rounded font-mono text-xs border border-gray-300 dark:border-gray-600">
60
+
<span class="hidden md:inline">round </span>#{{ $root.ActiveRound }}
61
+
</span>
62
+
</div>
63
+
{{ end }}
64
+
{{ end }}
65
66
<!-- spacer -->
67
<div class="flex-grow"></div>
···
171
{{ end }}
172
173
{{ define "collapseToggle" }}
174
+
<label
175
title="Expand/Collapse diffs"
176
for="collapseToggle"
177
class="btn font-normal normal-case p-2"
+9
-9
appview/pages/templates/repo/pulls/pull.html
+9
-9
appview/pages/templates/repo/pulls/pull.html
···
91
<div class="flex col-span-full">
92
<!-- left panel -->
93
<div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12">
94
-
<section class="overflow-x-auto text-sm px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded bg-white dark:bg-gray-800 drop-shadow-sm">
95
{{ template "repo/fragments/fileTree" $diff.FileTree }}
96
</section>
97
</div>
···
118
</div>
119
<!-- right panel - bottom sheet on mobile, side panel on desktop -->
120
<div id="subs" class="fixed bottom-0 left-0 right-0 z-50 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden">
121
-
<details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t-sm drop-shadow-lg md:drop-shadow-none">
122
<summary class="
123
flex gap-4 items-center justify-between
124
-
rounded-t-2xl md:rounded-t-sm cursor-pointer list-none p-4 md:h-12
125
text-white md:text-black md:dark:text-white
126
bg-green-600 dark:bg-green-600
127
md:bg-white md:dark:bg-gray-800
128
drop-shadow-sm
129
-
md:border-b md:border-x border-gray-200 dark:border-gray-700">
130
-
<h2 class="">Review Panel </h2>
131
{{ template "subsPanelSummary" $ }}
132
</summary>
133
<div class="max-h-[85vh] md:max-h-[calc(100vh-3rem-3rem)] w-full flex flex-col-reverse gap-4 overflow-y-auto bg-slate-100 dark:bg-gray-900 md:bg-transparent">
···
151
</span>
152
{{ else }}
153
<span>
154
-
viewing round
155
<span class="font-mono">#{{ $root.ActiveRound }}</span>
156
</span>
157
{{ if ne $root.ActiveRound $latest }}
···
176
{{ define "subsToggle" }}
177
<style>
178
/* Mobile: full width */
179
-
#subsToggle:checked ~ div div#subs {
180
width: 100%;
181
margin-left: 0;
182
}
···
186
187
/* Desktop: 25vw with left margin */
188
@media (min-width: 768px) {
189
-
#subsToggle:checked ~ div div#subs {
190
width: 25vw;
191
margin-left: 1rem;
192
}
···
229
230
{{ if $root.LoggedInUser }}
231
{{ template "repo/pulls/fragments/pullActions"
232
-
(dict
233
"LoggedInUser" $root.LoggedInUser
234
"Pull" $root.Pull
235
"RepoInfo" $root.RepoInfo
···
91
<div class="flex col-span-full">
92
<!-- left panel -->
93
<div id="files" class="w-0 hidden md:block overflow-hidden sticky top-12 max-h-screen overflow-y-auto pb-12">
94
+
<section class="overflow-x-auto text-sm px-6 py-2 border-b border-x border-gray-200 dark:border-gray-700 w-full mx-auto min-h-full rounded-b rounded-t-none bg-white dark:bg-gray-800 drop-shadow-sm">
95
{{ template "repo/fragments/fileTree" $diff.FileTree }}
96
</section>
97
</div>
···
118
</div>
119
<!-- right panel - bottom sheet on mobile, side panel on desktop -->
120
<div id="subs" class="fixed bottom-0 left-0 right-0 z-50 w-full md:static md:z-auto md:max-h-screen md:sticky md:top-12 overflow-hidden">
121
+
<details open id="bottomSheet" class="group rounded-t-2xl md:rounded-t drop-shadow-lg md:drop-shadow-none">
122
<summary class="
123
flex gap-4 items-center justify-between
124
+
rounded-t-2xl md:rounded-t cursor-pointer list-none p-4 md:h-12
125
text-white md:text-black md:dark:text-white
126
bg-green-600 dark:bg-green-600
127
md:bg-white md:dark:bg-gray-800
128
drop-shadow-sm
129
+
border-t md:border-x md:border-t-0 border-gray-200 dark:border-gray-700">
130
+
<h2 class="">Submissions</h2>
131
{{ template "subsPanelSummary" $ }}
132
</summary>
133
<div class="max-h-[85vh] md:max-h-[calc(100vh-3rem-3rem)] w-full flex flex-col-reverse gap-4 overflow-y-auto bg-slate-100 dark:bg-gray-900 md:bg-transparent">
···
151
</span>
152
{{ else }}
153
<span>
154
+
viewing round
155
<span class="font-mono">#{{ $root.ActiveRound }}</span>
156
</span>
157
{{ if ne $root.ActiveRound $latest }}
···
176
{{ define "subsToggle" }}
177
<style>
178
/* Mobile: full width */
179
+
#subsToggle:checked ~ div div#subs {
180
width: 100%;
181
margin-left: 0;
182
}
···
186
187
/* Desktop: 25vw with left margin */
188
@media (min-width: 768px) {
189
+
#subsToggle:checked ~ div div#subs {
190
width: 25vw;
191
margin-left: 1rem;
192
}
···
229
230
{{ if $root.LoggedInUser }}
231
{{ template "repo/pulls/fragments/pullActions"
232
+
(dict
233
"LoggedInUser" $root.LoggedInUser
234
"Pull" $root.Pull
235
"RepoInfo" $root.RepoInfo