main
1{{- /*gotype: mokhan.ca/xlgmokha/gitmal/internal/templates.CompareParams*/ -}}
2{{- define "head" -}}
3<style>
4 h1 code {
5 border-radius: var(--border-radius);
6 background: var(--c-bg-alt);
7 padding: 4px 8px;
8 font-family: var(--font-family-mono), monospace;
9 font-weight: 500;
10 }
11 .compare-header {
12 display: flex;
13 flex-direction: column;
14 gap: 16px;
15 margin-bottom: 16px;
16 }
17 .compare-refs {
18 display: flex;
19 align-items: center;
20 gap: 8px;
21 flex-wrap: wrap;
22 }
23 .ref-badge {
24 color: var(--c-text-1);
25 border: 1px solid var(--c-border);
26 border-radius: 6px;
27 padding: 6px 12px;
28 font-family: var(--font-family-mono), monospace;
29 font-size: 14px;
30 background: var(--c-bg-alt);
31 }
32 .compare-arrow { color: var(--c-text-2); }
33 .compare-stats {
34 display: flex;
35 gap: 16px;
36 color: var(--c-text-2);
37 font-size: 14px;
38 }
39 .commits-section { margin-bottom: 24px; }
40 .commits-section h2 { font-size: 16px; margin-bottom: 12px; }
41 .commits-list {
42 border: 1px solid var(--c-border);
43 border-radius: var(--border-radius);
44 overflow: hidden;
45 }
46 .commit-row {
47 display: flex;
48 align-items: center;
49 gap: 12px;
50 padding: 10px 16px;
51 border-bottom: 1px solid var(--c-border);
52 }
53 .commit-row:last-child { border-bottom: none; }
54 .commit-row:hover { background-color: var(--c-bg-alt); }
55 .commit-hash {
56 font-family: var(--font-family-mono), monospace;
57 color: var(--c-text-2);
58 font-size: 13px;
59 }
60 .commit-hash a { color: inherit; }
61 .commit-subject { flex: 1; min-width: 0; }
62 .commit-subject a { color: var(--c-text-1); }
63 .commit-subject a:hover { color: var(--c-brand-2); }
64 .commit-author { color: var(--c-text-2); font-size: 13px; }
65 .commit-date {
66 font-family: var(--font-family-mono), monospace;
67 font-size: 12px;
68 color: var(--c-text-2);
69 }
70 .compare-layout { display: grid; grid-template-columns: 1fr; gap: 16px; }
71 @media (min-width: 960px) {
72 .compare-layout { grid-template-columns: 300px 1fr; align-items: start; }
73 .files-tree { position: sticky; top: 16px; }
74 .files-tree-content { max-height: calc(100vh - var(--header-height) - 40px); overflow: auto; }
75 }
76 .files-tree { border: 1px solid var(--c-border); border-radius: var(--border-radius); }
77 .files-tree-header {
78 display: flex;
79 align-items: center;
80 padding-inline: 16px;
81 height: var(--header-height);
82 border-bottom: 1px solid var(--c-border);
83 background: var(--c-bg-alt);
84 font-size: 14px;
85 font-weight: 600;
86 }
87 .files-tree-content { padding-block: 6px; }
88 .tree .children { margin-left: 16px; border-left: 1px dashed var(--c-border); }
89 .tree .node { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
90 .tree .file-name { flex: 1; font-weight: 500; color: var(--c-text-1); cursor: pointer; }
91 .tree .file-name:hover { color: var(--c-brand-2); text-decoration: underline; }
92 .tree .dir { color: var(--c-dir); }
93 .tree .file-added { color: var(--c-green); }
94 .tree .file-deleted { color: var(--c-red); }
95 .tree .file-renamed { color: var(--c-yellow); }
96 .files { min-width: 0; }
97 .file-section + .file-section { margin-top: 16px; }
98 pre {
99 border: 1px solid var(--c-border);
100 border-top: none;
101 border-bottom-left-radius: var(--border-radius);
102 border-bottom-right-radius: var(--border-radius);
103 margin: 0;
104 padding: 8px 16px;
105 overflow-x: auto;
106 white-space: pre;
107 tab-size: 4;
108 font-family: var(--font-family-mono), monospace;
109 }
110 pre > code {
111 display: block;
112 padding: 0 16px;
113 width: fit-content;
114 min-width: 100%;
115 line-height: var(--code-line-height);
116 font-size: var(--code-font-size);
117 }
118 .binary-file, .no-changes {
119 padding: 8px 16px;
120 font-style: italic;
121 border: 1px solid var(--c-border);
122 border-top: none;
123 border-bottom-left-radius: 6px;
124 border-bottom-right-radius: 6px;
125 }
126</style>
127{{- end}}
128
129{{- define "body" -}}
130<div class="compare-header">
131 <h1>Comparing changes</h1>
132 <div class="compare-refs">
133 <span class="ref-badge">{{.Base}}</span>
134 <span class="compare-arrow">→</span>
135 <span class="ref-badge">{{.Head}}</span>
136 </div>
137 <div class="compare-stats">
138 <span>{{len .Commits}} commits</span>
139 <span>{{len .FileViews}} files changed</span>
140 </div>
141</div>
142{{- if .Commits}}
143<div class="commits-section">
144 <h2>Commits</h2>
145 <div class="commits-list">
146{{- range .Commits}}
147 <div class="commit-row">
148 <span class="commit-hash"><a href="{{.Href}}">{{.ShortHash}}</a></span>
149 <span class="commit-subject"><a href="{{.Href}}">{{.Subject}}</a></span>
150 <span class="commit-author">{{.Author}}</span>
151 <span class="commit-date">{{.Date | FormatDate}}</span>
152 </div>
153{{- end}}
154 </div>
155</div>
156{{- end}}
157<div class="compare-layout">
158 <div class="files-tree">
159 <div class="files-tree-header">Changed files ({{len .FileViews}})</div>
160 <div class="files-tree-content">
161{{- if .FileTree}}
162 <div class="tree">{{- template "file_tree" (FileTreeParams .FileTree)}}</div>
163{{- else}}
164 <div class="empty-message">(no files changed)</div>
165{{- end}}
166 </div>
167 </div>
168 <div class="files">
169{{- range .FileViews}}
170 <section id="{{.Path}}" class="file-section">
171 <header class="file-header">
172{{- if .IsRename}}
173 <div class="path">{{.OldName}} → {{.NewName}}</div>
174{{- else}}
175 <div class="path">{{.Path}}</div>
176{{- end}}
177 </header>
178{{- if .IsBinary}}
179 <div class="binary-file">Binary file</div>
180{{- else if (and .IsRename (not .HasChanges))}}
181 <div class="no-changes">File renamed without changes</div>
182{{- else}}
183 <div class="file-diff">{{.HTML}}</div>
184{{- end}}
185 </section>
186{{- end}}
187 </div>
188</div>
189{{- end}}