Monorepo for Tangled
appview: rework layouting templates to be simpler
Signed-off-by: oppiliappan <me@oppi.li>
oppiliappan
(Jul 22, 2025, 12:41 PM +0100)
62ef376d
75a13776
+75
-150
+23
-35
appview/pages/templates/layouts/base.html
+23
-35
appview/pages/templates/layouts/base.html
···
15
15
{{ block "extrameta" . }}{{ end }}
16
16
</head>
17
17
<body class="bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
18
-
{{ block "topbarLayout" . }}
19
-
<div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">
20
-
<div class="{{ layoutSide }}">
21
-
{{ block "topbarLeft" . }} {{ end }}
22
-
</div>
23
-
<header style="z-index: 20" class="{{ layoutCenter }}">
24
-
{{ block "topbar" . }}
25
-
{{ template "layouts/topbar" . }}
26
-
{{ end }}
18
+
<div class="px-1" style="z-index: 20">
19
+
{{ block "topbarLayout" . }}
20
+
<div class="grid grid-cols-1 md:grid-cols-12">
21
+
<header class="col-span-1 md:col-start-3 md:col-span-8">
22
+
{{ template "layouts/topbar" . }}
27
23
</header>
28
-
<div class="{{ layoutSide }}">
29
-
{{ block "topbarRight" . }} {{ end }}
30
-
</div>
31
24
</div>
32
-
{{ end }}
25
+
{{ end }}
26
+
</div>
33
27
34
-
<div class="flex flex-col min-h-screen">
28
+
<div class="px-1 flex flex-col min-h-screen gap-4">
35
29
{{ block "contentLayout" . }}
36
-
<div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">
37
-
<div class="{{ layoutSide }}">
30
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
31
+
<div class="col-span-1 md:col-span-2">
38
32
{{ block "contentLeft" . }} {{ end }}
39
33
</div>
40
-
<main class="{{ layoutCenter }}">
34
+
<main class="col-span-1 md:col-span-8">
41
35
{{ block "content" . }}{{ end }}
42
36
</main>
43
-
<div class="{{ layoutSide }}">
37
+
<div class="col-span-1 md:col-span-2">
44
38
{{ block "contentRight" . }} {{ end }}
45
39
</div>
46
40
</div>
47
41
{{ end }}
48
42
49
43
{{ block "contentAfterLayout" . }}
50
-
<div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">
51
-
<div class="{{ layoutSide }}">
44
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
45
+
<div class="col-span-1 md:col-span-2">
52
46
{{ block "contentAfterLeft" . }} {{ end }}
53
47
</div>
54
-
<main class="px-1 {{ layoutCenter }}">
48
+
<main class="col-span-1 md:col-span-8">
55
49
{{ block "contentAfter" . }}{{ end }}
56
50
</main>
57
-
<div class="{{ layoutSide }}">
51
+
<div class="col-span-1 md:col-span-2">
58
52
{{ block "contentAfterRight" . }} {{ end }}
59
53
</div>
60
54
</div>
61
55
{{ end }}
62
56
</div>
63
57
64
-
{{ block "footerLayout" . }}
65
-
<div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">
66
-
<div class="{{ layoutSide }}">
67
-
{{ block "footerLeft" . }} {{ end }}
68
-
</div>
69
-
<footer class="mt-16 {{ layoutCenter }}">
70
-
{{ block "footer" . }}
71
-
{{ template "layouts/footer" . }}
72
-
{{ end }}
58
+
<div class="px-1 mt-16">
59
+
{{ block "footerLayout" . }}
60
+
<div class="grid grid-cols-1 md:grid-cols-12">
61
+
<footer class="col-span-1 md:col-start-3 md:col-span-8">
62
+
{{ template "layouts/footer" . }}
73
63
</footer>
74
-
<div class="{{ layoutSide }}">
75
-
{{ block "footerRight" . }} {{ end }}
76
-
</div>
77
64
</div>
78
-
{{ end }}
65
+
{{ end }}
66
+
</div>
79
67
80
68
</body>
81
69
</html>
+9
-25
appview/pages/templates/repo/commit.html
+9
-25
appview/pages/templates/repo/commit.html
···
80
80
{{end}}
81
81
82
82
{{ define "topbarLayout" }}
83
-
<div class="px-1 grid grid-cols-1">
84
-
<header style="z-index: 20" class="col-span-1">
85
-
{{ block "topbar" . }}
86
-
{{ template "layouts/topbar" . }}
87
-
{{ end }}
88
-
</header>
89
-
</div>
83
+
{{ template "layouts/topbar" . }}
90
84
{{ end }}
91
85
92
-
{{ define "contentLayout" }}
93
-
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
94
-
<main class="px-1 col-span-1">
95
-
{{ block "content" . }}{{ end }}
96
-
</main>
97
-
</div>
86
+
{{ define "contentLayout" }}
87
+
{{ block "content" . }}{{ end }}
98
88
{{ end }}
99
89
100
-
{{ block "contentAfterLayout" . }}
101
-
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
90
+
{{ define "contentAfterLayout" }}
91
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
102
92
<div class="col-span-1 md:col-span-2">
103
93
{{ block "contentAfterLeft" . }} {{ end }}
104
94
</div>
105
-
<main class="px-1 col-span-1 md:col-span-10">
95
+
<main class="col-span-1 md:col-span-10">
106
96
{{ block "contentAfter" . }}{{ end }}
107
97
</main>
108
98
</div>
109
99
{{ end }}
110
100
111
-
{{ block "footerLayout" . }}
112
-
<div class="px-1 grid grid-cols-1">
113
-
<footer class="mt-16 col-span-1">
114
-
{{ block "footer" . }}
115
-
{{ template "layouts/footer" . }}
116
-
{{ end }}
117
-
</footer>
118
-
</div>
101
+
{{ define "footerLayout" }}
102
+
{{ template "layouts/footer" . }}
119
103
{{ end }}
120
104
121
105
{{ define "contentAfter" }}
···
123
107
{{end}}
124
108
125
109
{{ define "contentAfterLeft" }}
126
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2 mt-4">
110
+
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
127
111
{{ template "repo/fragments/diffOpts" .DiffOpts }}
128
112
</div>
129
113
<div class="sticky top-0 mt-4">
+9
-25
appview/pages/templates/repo/compare/compare.html
+9
-25
appview/pages/templates/repo/compare/compare.html
···
11
11
{{ end }}
12
12
13
13
{{ define "topbarLayout" }}
14
-
<div class="px-1 grid grid-cols-1">
15
-
<header style="z-index: 20" class="col-span-1">
16
-
{{ block "topbar" . }}
17
-
{{ template "layouts/topbar" . }}
18
-
{{ end }}
19
-
</header>
20
-
</div>
14
+
{{ template "layouts/topbar" . }}
21
15
{{ end }}
22
16
23
-
{{ define "contentLayout" }}
24
-
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
25
-
<main class="px-1 col-span-1">
26
-
{{ block "content" . }}{{ end }}
27
-
</main>
28
-
</div>
17
+
{{ define "contentLayout" }}
18
+
{{ block "content" . }}{{ end }}
29
19
{{ end }}
30
20
31
-
{{ block "contentAfterLayout" . }}
32
-
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
21
+
{{ define "contentAfterLayout" }}
22
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
33
23
<div class="col-span-1 md:col-span-2">
34
24
{{ block "contentAfterLeft" . }} {{ end }}
35
25
</div>
36
-
<main class="px-1 col-span-1 md:col-span-10">
26
+
<main class="col-span-1 md:col-span-10">
37
27
{{ block "contentAfter" . }}{{ end }}
38
28
</main>
39
29
</div>
40
30
{{ end }}
41
31
42
-
{{ block "footerLayout" . }}
43
-
<div class="px-1 grid grid-cols-1">
44
-
<footer class="mt-16 col-span-1">
45
-
{{ block "footer" . }}
46
-
{{ template "layouts/footer" . }}
47
-
{{ end }}
48
-
</footer>
49
-
</div>
32
+
{{ define "footerLayout" }}
33
+
{{ template "layouts/footer" . }}
50
34
{{ end }}
51
35
52
36
{{ define "contentAfter" }}
···
54
38
{{end}}
55
39
56
40
{{ define "contentAfterLeft" }}
57
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2 mt-4">
41
+
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
58
42
{{ template "repo/fragments/diffOpts" .DiffOpts }}
59
43
</div>
60
44
<div class="sticky top-0 mt-4">
+12
-10
appview/pages/templates/repo/fragments/diff.html
+12
-10
appview/pages/templates/repo/fragments/diff.html
···
1
1
{{ define "repo/fragments/diff" }}
2
-
{{ $repo := index . 0 }}
3
-
{{ $diff := index . 1 }}
4
-
{{ $opts := index . 2 }}
2
+
{{ $repo := index . 0 }}
3
+
{{ $diff := index . 1 }}
4
+
{{ $opts := index . 2 }}
5
5
6
-
{{ $commit := $diff.Commit }}
7
-
{{ $diff := $diff.Diff }}
8
-
{{ $isSplit := $opts.Split }}
9
-
{{ $this := $commit.This }}
10
-
{{ $parent := $commit.Parent }}
6
+
{{ $commit := $diff.Commit }}
7
+
{{ $diff := $diff.Diff }}
8
+
{{ $isSplit := $opts.Split }}
9
+
{{ $this := $commit.This }}
10
+
{{ $parent := $commit.Parent }}
11
+
{{ $last := sub (len $diff) 1 }}
11
12
12
-
{{ $last := sub (len $diff) 1 }}
13
+
<div class="flex flex-col gap-4">
13
14
{{ range $idx, $hunk := $diff }}
14
15
{{ with $hunk }}
15
-
<section class="mt-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
16
+
<section class="border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
16
17
<div id="file-{{ .Name.New }}">
17
18
<div id="diff-file">
18
19
<details open>
···
103
104
</section>
104
105
{{ end }}
105
106
{{ end }}
107
+
</div>
106
108
{{ end }}
+3
-1
appview/pages/templates/repo/fragments/interdiff.html
+3
-1
appview/pages/templates/repo/fragments/interdiff.html
···
7
7
{{ $last := sub (len $diff) 1 }}
8
8
{{ $isSplit := $opts.Split }}
9
9
10
+
<div class="flex flex-col gap-4">
10
11
{{ range $idx, $hunk := $diff }}
11
12
{{ with $hunk }}
12
-
<section class="mt-4 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
13
+
<section class="border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm">
13
14
<div id="file-{{ .Name }}">
14
15
<div id="diff-file">
15
16
<details {{ if not (.Status.IsOnlyInOne) }}open{{end}}>
···
86
87
</section>
87
88
{{ end }}
88
89
{{ end }}
90
+
</div>
89
91
{{ end }}
90
92
+10
-25
appview/pages/templates/repo/pulls/interdiff.html
+10
-25
appview/pages/templates/repo/pulls/interdiff.html
···
29
29
{{ end }}
30
30
31
31
{{ define "topbarLayout" }}
32
-
<div class="px-1 grid grid-cols-1">
33
-
<header style="z-index: 20" class="col-span-1">
34
-
{{ block "topbar" . }}
35
-
{{ template "layouts/topbar" . }}
36
-
{{ end }}
37
-
</header>
38
-
</div>
32
+
{{ template "layouts/topbar" . }}
39
33
{{ end }}
40
34
41
-
{{ define "contentLayout" }}
42
-
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
43
-
<main class="px-1 col-span-1">
44
-
{{ block "content" . }}{{ end }}
45
-
</main>
46
-
</div>
35
+
{{ define "contentLayout" }}
36
+
{{ block "content" . }}{{ end }}
47
37
{{ end }}
48
38
49
-
{{ block "contentAfterLayout" . }}
50
-
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
39
+
{{ define "contentAfterLayout" }}
40
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
51
41
<div class="col-span-1 md:col-span-2">
52
42
{{ block "contentAfterLeft" . }} {{ end }}
53
43
</div>
54
-
<main class="px-1 col-span-1 md:col-span-10">
44
+
<main class="col-span-1 md:col-span-10">
55
45
{{ block "contentAfter" . }}{{ end }}
56
46
</main>
57
47
</div>
58
48
{{ end }}
59
49
60
-
{{ block "footerLayout" . }}
61
-
<div class="px-1 grid grid-cols-1">
62
-
<footer class="mt-16 col-span-1">
63
-
{{ block "footer" . }}
64
-
{{ template "layouts/footer" . }}
65
-
{{ end }}
66
-
</footer>
67
-
</div>
50
+
{{ define "footerLayout" }}
51
+
{{ template "layouts/footer" . }}
68
52
{{ end }}
53
+
69
54
70
55
{{ define "contentAfter" }}
71
56
{{ template "repo/fragments/interdiff" (list .RepoInfo.FullName .Interdiff .DiffOpts) }}
72
57
{{end}}
73
58
74
59
{{ define "contentAfterLeft" }}
75
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2 mt-4">
60
+
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
76
61
{{ template "repo/fragments/diffOpts" .DiffOpts }}
77
62
</div>
78
63
<div class="sticky top-0 mt-4">
+9
-25
appview/pages/templates/repo/pulls/patch.html
+9
-25
appview/pages/templates/repo/pulls/patch.html
···
35
35
{{ end }}
36
36
37
37
{{ define "topbarLayout" }}
38
-
<div class="px-1 grid grid-cols-1">
39
-
<header style="z-index: 20" class="col-span-1">
40
-
{{ block "topbar" . }}
41
-
{{ template "layouts/topbar" . }}
42
-
{{ end }}
43
-
</header>
44
-
</div>
38
+
{{ template "layouts/topbar" . }}
45
39
{{ end }}
46
40
47
-
{{ define "contentLayout" }}
48
-
<div class="grid grid-cols-1 md:grid-cols-1 gap-2">
49
-
<main class="px-1 col-span-1">
50
-
{{ block "content" . }}{{ end }}
51
-
</main>
52
-
</div>
41
+
{{ define "contentLayout" }}
42
+
{{ block "content" . }}{{ end }}
53
43
{{ end }}
54
44
55
-
{{ block "contentAfterLayout" . }}
56
-
<div class="grid grid-cols-1 md:grid-cols-12 gap-2">
45
+
{{ define "contentAfterLayout" }}
46
+
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
57
47
<div class="col-span-1 md:col-span-2">
58
48
{{ block "contentAfterLeft" . }} {{ end }}
59
49
</div>
60
-
<main class="px-1 col-span-1 md:col-span-10">
50
+
<main class="col-span-1 md:col-span-10">
61
51
{{ block "contentAfter" . }}{{ end }}
62
52
</main>
63
53
</div>
64
54
{{ end }}
65
55
66
-
{{ block "footerLayout" . }}
67
-
<div class="px-1 grid grid-cols-1">
68
-
<footer class="mt-16 col-span-1">
69
-
{{ block "footer" . }}
70
-
{{ template "layouts/footer" . }}
71
-
{{ end }}
72
-
</footer>
73
-
</div>
56
+
{{ define "footerLayout" }}
57
+
{{ template "layouts/footer" . }}
74
58
{{ end }}
75
59
76
60
{{ define "contentAfter" }}
···
78
62
{{end}}
79
63
80
64
{{ define "contentAfterLeft" }}
81
-
<div class="flex flex-col gap-4 col-span-1 md:col-span-2 mt-4">
65
+
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
82
66
{{ template "repo/fragments/diffOpts" .DiffOpts }}
83
67
</div>
84
68
<div class="sticky top-0 mt-4">
-4
appview/pulls/pulls.go
-4
appview/pulls/pulls.go
···
467
467
468
468
interdiff := patchutil.Interdiff(previousPatch, currentPatch)
469
469
470
-
for _, f := range interdiff.Files {
471
-
log.Println("", "", f.Split())
472
-
}
473
-
474
470
s.pages.RepoPullInterdiffPage(w, pages.RepoPullInterdiffParams{
475
471
LoggedInUser: s.oauth.GetUser(r),
476
472
RepoInfo: f.RepoInfo(user),