tangled.org
Monorepo for Tangled
tangled.org
appview/pages: add the resizable script to pages that utilize diffs
the pulls page includes an additional resizer to mutate the size of the
submissions panel.
Signed-off-by: oppiliappan <me@oppi.li>
oppi.li
+19
-2
appview/pages/templates/repo/fragments/diff.html
+19
-2
appview/pages/templates/repo/fragments/diff.html
···
3
3
#filesToggle:checked ~ div label[for="filesToggle"] .show-text { display: none; }
4
4
#filesToggle:checked ~ div label[for="filesToggle"] .hide-text { display: inline; }
5
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; }
6
+
#filesToggle:checked ~ div div#files { width: fit-content; max-width: 15vw; }
7
7
#filesToggle:not(:checked) ~ div div#files { width: 0; display: none; margin-right: 0; }
8
+
#filesToggle:not(:checked) ~ div div#resize-files { display: none; }
8
9
</style>
9
10
10
11
{{ template "diffTopbar" . }}
11
12
{{ block "diffLayout" . }} {{ end }}
13
+
{{ template "fragments/resizable" }}
12
14
{{ end }}
13
15
14
16
{{ define "diffTopbar" }}
···
78
80
79
81
{{ end }}
80
82
83
+
{{ define "resize-grip" }}
84
+
{{ $id := index . 0 }}
85
+
{{ $target := index . 1 }}
86
+
{{ $direction := index . 2 }}
87
+
<div id="{{ $id }}"
88
+
data-resizer="vertical"
89
+
data-target="{{ $target }}"
90
+
data-direction="{{ $direction }}"
91
+
class="resizer-vertical hidden md:flex w-4 sticky top-12 max-h-screen flex-col items-center justify-center group">
92
+
<div class="w-1 h-16 group-hover:h-24 group-[.resizing]:h-24 transition-all rounded-full bg-gray-400 dark:bg-gray-500 group-hover:bg-gray-500 group-hover:dark:bg-gray-400"></div>
93
+
</div>
94
+
{{ end }}
95
+
81
96
{{ define "diffLayout" }}
82
97
{{ $diff := index . 0 }}
83
98
{{ $opts := index . 1 }}
···
90
105
</section>
91
106
</div>
92
107
108
+
{{ template "resize-grip" (list "resize-files" "files" "before") }}
109
+
93
110
<!-- main content -->
94
-
<div class="flex-1 min-w-0 sticky top-12 pb-12">
111
+
<div id="diff-files" class="flex-1 min-w-0 sticky top-12 pb-12">
95
112
{{ template "diffFiles" (list $diff $opts) }}
96
113
</div>
97
114
+22
-5
appview/pages/templates/repo/pulls/pull.html
+22
-5
appview/pages/templates/repo/pulls/pull.html
···
111
111
{{ end }}
112
112
{{ end }}
113
113
114
+
{{ define "resize-grip" }}
115
+
{{ $id := index . 0 }}
116
+
{{ $target := index . 1 }}
117
+
{{ $direction := index . 2 }}
118
+
<div id="{{ $id }}"
119
+
data-resizer="vertical"
120
+
data-target="{{ $target }}"
121
+
data-direction="{{ $direction }}"
122
+
class="resizer-vertical hidden md:flex w-4 sticky top-12 max-h-screen flex-col items-center justify-center group">
123
+
<div class="w-1 h-16 group-hover:h-24 group-[.resizing]:h-24 transition-all rounded-full bg-gray-400 dark:bg-gray-500 group-hover:bg-gray-500 group-hover:dark:bg-gray-400"></div>
124
+
</div>
125
+
{{ end }}
126
+
114
127
{{ define "diffLayout" }}
115
128
{{ $diff := index . 0 }}
116
129
{{ $opts := index . 1 }}
···
124
137
</section>
125
138
</div>
126
139
140
+
{{ template "resize-grip" (list "resize-files" "files" "before") }}
141
+
127
142
<!-- main content -->
128
-
<div class="flex-1 min-w-0 sticky top-12 pb-12">
143
+
<div id="diff-files" class="flex-1 min-w-0 sticky top-12 pb-12">
129
144
{{ template "diffFiles" (list $diff $opts) }}
130
145
</div>
146
+
147
+
{{ template "resize-grip" (list "resize-subs" "subs" "after") }}
131
148
132
149
<!-- right panel -->
133
150
{{ template "subsPanel" $ }}
···
187
204
188
205
{{ define "subsToggle" }}
189
206
<style>
190
-
/* Mobile: full width */
191
207
#subsToggle:checked ~ div div#subs {
192
208
width: 100%;
193
209
margin-left: 0;
···
196
212
#subsToggle:checked ~ div label[for="subsToggle"] .hide-toggle { display: flex; }
197
213
#subsToggle:not(:checked) ~ div label[for="subsToggle"] .hide-toggle { display: none; }
198
214
199
-
/* Desktop: 25vw with left margin */
200
215
@media (min-width: 768px) {
201
216
#subsToggle:checked ~ div div#subs {
202
217
width: 25vw;
203
-
margin-left: 1rem;
218
+
max-width: 50vw;
204
219
}
205
-
/* Unchecked state */
206
220
#subsToggle:not(:checked) ~ div div#subs {
207
221
width: 0;
208
222
display: none;
209
223
margin-left: 0;
224
+
}
225
+
#subsToggle:not(:checked) ~ div div#resize-subs {
226
+
display: none;
210
227
}
211
228
}
212
229
</style>