master
1{{- /*gotype: github.com/antonmedv/gitmal/pkg/templates.CommitParams*/ -}}
2{{ define "head" }}
3 {{ if not .InlineStyles }}<link rel="stylesheet" href="{{ .RootHref }}diff.css">{{ end }}
4 <style>
5 h1 code {
6 border-radius: var(--border-radius);
7 background: var(--c-bg-alt);
8 padding: 4px 8px;
9 font-family: var(--font-family-mono), monospace;
10 font-weight: 500;
11 }
12
13 .commit {
14 display: flex;
15 flex-direction: column;
16 gap: 16px;
17 margin-bottom: 16px;
18 }
19
20 .commit-info {
21 display: flex;
22 flex-direction: row;
23 gap: 8px;
24 align-items: flex-end;
25 }
26
27 .commit-author {
28 color: var(--c-text-1);
29 font-weight: 600;
30 min-width: 0;
31 overflow-wrap: break-word;
32 }
33
34 .commit-date {
35 color: var(--c-text-2);
36 font-size: 12px;
37 font-family: var(--font-family-mono), monospace;
38 }
39
40 .commit-message {
41 border: 1px solid var(--c-border);
42 border-radius: var(--border-radius);
43 padding: 16px;
44 }
45
46 .ref-badges {
47 display: inline-flex;
48 gap: 6px;
49 margin-left: 8px;
50 }
51
52 .badge {
53 font-size: 12px;
54 color: var(--c-text-2);
55 border: 1px solid var(--c-border);
56 padding: 2px 6px;
57 border-radius: 999px;
58 white-space: nowrap;
59 }
60
61 .commit-subject {
62 font-size: 16px;
63 font-weight: 600;
64 line-height: 1.3;
65 hyphens: auto;
66 }
67
68 .commit-body {
69 margin-top: 16px;
70 white-space: pre-wrap;
71 line-height: 1.5;
72 hyphens: auto;
73 }
74
75 .commit-subinfo {
76 display: flex;
77 flex-direction: row;
78 gap: 16px;
79 justify-content: space-between;
80 }
81
82 .commit-layout {
83 display: grid;
84 grid-template-columns: 1fr;
85 gap: 16px;
86 }
87
88 @media (min-width: 960px) {
89 .commit-layout {
90 grid-template-columns: 300px 1fr;
91 align-items: start;
92 }
93
94 .files-tree {
95 position: sticky;
96 top: 16px;
97 }
98
99 .files-tree-content {
100 max-height: calc(100vh - var(--header-height) - 40px);
101 overflow: auto;
102 }
103 }
104
105 .files-tree {
106 border: 1px solid var(--c-border);
107 border-radius: var(--border-radius);
108 }
109
110 .files-tree-header {
111 display: flex;
112 flex-direction: row;
113 align-items: center;
114 padding-inline: 16px;
115 height: var(--header-height);
116 border-bottom: 1px solid var(--c-border);
117 border-top-left-radius: var(--border-radius);
118 border-top-right-radius: var(--border-radius);
119 background: var(--c-bg-alt);
120 font-size: 14px;
121 font-weight: 600;
122 }
123
124 .files-tree-content {
125 display: block;
126 padding-block: 6px;
127 }
128
129 .tree .children {
130 margin-left: 16px;
131 border-left: 1px dashed var(--c-border);
132 }
133
134 .tree .node {
135 display: flex;
136 align-items: center;
137 gap: 8px;
138 padding: 10px 16px;
139 }
140
141 .tree .file-name {
142 flex: 1;
143 font-weight: 500;
144 color: var(--c-text-1);
145 cursor: pointer;
146 }
147
148 .tree .file-name:hover {
149 color: var(--c-brand-2);
150 text-decoration: underline;
151 }
152
153 .tree .dir {
154 color: var(--c-dir);
155 }
156
157 .tree .file-added {
158 color: var(--c-green);
159 }
160
161 .tree .file-deleted {
162 color: var(--c-red);
163 }
164
165 .tree .file-renamed {
166 color: var(--c-yellow);
167 }
168
169 /* Per-file sections */
170
171 .files {
172 min-width: 0;
173 }
174
175 .file-section + .file-section {
176 margin-top: 16px;
177 }
178
179 pre {
180 border: 1px solid var(--c-border);
181 border-top: none;
182 border-bottom-left-radius: var(--border-radius);
183 border-bottom-right-radius: var(--border-radius);
184 }
185
186 pre {
187 margin: 0;
188 padding: 8px 16px;
189 overflow-x: auto;
190 white-space: pre;
191 word-spacing: normal;
192 word-break: normal;
193 word-wrap: normal;
194 tab-size: 4;
195 font-family: var(--font-family-mono), monospace;
196 }
197
198 pre > code {
199 display: block;
200 padding: 0 16px;
201 width: fit-content;
202 min-width: 100%;
203 line-height: var(--code-line-height);
204 font-size: var(--code-font-size);
205 }
206
207 .binary-file {
208 padding: 8px 16px;
209 font-style: italic;
210 }
211
212 .border {
213 border: 1px solid var(--c-border);
214 border-top: none;
215 border-bottom-left-radius: 6px;
216 border-bottom-right-radius: 6px;
217 }
218
219 {{ if .InlineStyles }}{{ .DiffCSS }}{{ end }}
220 </style>
221{{ end }}
222
223{{ define "body" }}
224 <h1>Commit <code>{{ .Commit.ShortHash }}</code></h1>
225
226 <div class="commit">
227 <div class="commit-info">
228 <div class="commit-author">{{ .Commit.Author }} <{{ .Commit.Email }}></div>
229 <div class="commit-date">{{ .Commit.Date | FormatDate }}</div>
230 </div>
231 <div class="commit-message">
232 <div class="commit-subject">
233 {{ .Commit.Subject }}
234 {{ if .Commit.RefNames }}
235 <span class="ref-badges">
236 {{ range .Commit.RefNames }}
237 {{ if or (eq .Kind "Branch") (eq .Kind "Tag") }}
238 <span class="badge">{{ if eq .Kind "Tag" }}tag: {{ end }}{{ .Name }}</span>
239 {{ end }}
240 {{ end }}
241 </span>
242 {{ end }}
243 </div>
244 {{ if .Commit.Body }}
245 <div class="commit-body">{{ .Commit.Body }}</div>
246 {{ end }}
247 </div>
248 <div class="commit-subinfo">
249 <div class="commit-branch">
250 {{ if .Commit.Branch }}
251 <a href="../commits/{{ .Commit.Branch.DirName }}/index.html" class="badge">{{ .Commit.Branch }}</a>
252 {{ end }}
253 </div>
254 {{ if .Commit.Parents }}
255 <div class="commit-parents">
256 {{ if eq (len .Commit.Parents) 1 }}
257 1 parent
258 {{ else }}
259 {{ .Commit.Parents | len }} parents
260 {{ end }}
261 {{ range $i, $p := .Commit.Parents }}
262 {{ if gt $i 0 }}, {{ end }}
263 <a href="{{ $p }}.html"><code>{{ $p | ShortHash }}</code></a>
264 {{ end }}
265 </div>
266 {{ end }}
267 </div>
268 </div>
269
270 <div class="commit-layout">
271 <div class="files-tree">
272 <div class="files-tree-header">Changed files ({{ len .FileViews }})</div>
273 <div class="files-tree-content">
274 {{ if .FileTree }}
275 <div class="tree">
276 {{ template "file_tree" (FileTreeParams .FileTree) }}
277 </div>
278 {{ else }}
279 <div style="color: var(--c-text-3)">(no files)</div>
280 {{ end }}
281 </div>
282 </div>
283
284 <div class="files">
285 {{ range .FileViews }}
286 <section id="{{ .Path }}" class="file-section">
287 <div class="header-container">
288 <header class="file-header">
289 {{ if .IsRename }}
290 <div class="path">{{ .OldName }} → {{ .NewName }}</div>
291 {{ else }}
292 <div class="path">{{ .Path }}</div>
293 {{ end }}
294 <button class="goto-top" onclick="window.scrollTo({top: 0, behavior: 'smooth'})">
295 <svg aria-hidden="true" focusable="false" width="16" height="16">
296 <use xlink:href="#arrow-top"></use>
297 </svg>
298 Top
299 </button>
300 </header>
301 </div>
302 {{ if .IsBinary }}
303 <div class="binary-file border">Binary file</div>
304 {{ else if (and .IsRename (not .HasChanges)) }}
305 <div class="binary-file border">File renamed without changes</div>
306 {{ else }}
307 <div class="file-diff">
308 {{ .HTML }}
309 </div>
310 {{ end }}
311 </section>
312 {{ end }}
313 </div>
314 </div>
315{{ end }}