tjh.dev
forked from
tangled.org/core
Mirror of @tangled.org/core. Running on a Raspberry Pi Zero 2
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>
authored by
+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" }}
···
80
78
81
79
{{ end }}
82
80
81
+
{{ define "resize-grip" }}
82
+
{{ $id := index . 0 }}
83
+
{{ $target := index . 1 }}
84
+
{{ $direction := index . 2 }}
85
+
<div id="{{ $id }}"
86
+
data-resizer="vertical"
87
+
data-target="{{ $target }}"
88
+
data-direction="{{ $direction }}"
89
+
class="resizer-vertical hidden md:flex w-4 sticky top-12 max-h-screen flex-col items-center justify-center group">
90
+
<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>
91
+
</div>
92
+
{{ end }}
93
+
83
94
{{ define "diffLayout" }}
84
95
{{ $diff := index . 0 }}
85
96
{{ $opts := index . 1 }}
···
105
90
</section>
106
91
</div>
107
92
93
+
{{ template "resize-grip" (list "resize-files" "files" "before") }}
94
+
108
95
<!-- main content -->
109
-
<div class="flex-1 min-w-0 sticky top-12 pb-12">
96
+
<div id="diff-files" class="flex-1 min-w-0 sticky top-12 pb-12">
110
97
{{ template "diffFiles" (list $diff $opts) }}
111
98
</div>
112
99
+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 }}
···
137
124
</section>
138
125
</div>
139
126
127
+
{{ template "resize-grip" (list "resize-files" "files" "before") }}
128
+
140
129
<!-- main content -->
141
-
<div class="flex-1 min-w-0 sticky top-12 pb-12">
130
+
<div id="diff-files" class="flex-1 min-w-0 sticky top-12 pb-12">
142
131
{{ template "diffFiles" (list $diff $opts) }}
143
132
</div>
133
+
134
+
{{ template "resize-grip" (list "resize-subs" "subs" "after") }}
144
135
145
136
<!-- right panel -->
146
137
{{ template "subsPanel" $ }}
···
204
187
205
188
{{ define "subsToggle" }}
206
189
<style>
207
-
/* Mobile: full width */
208
190
#subsToggle:checked ~ div div#subs {
209
191
width: 100%;
210
192
margin-left: 0;
···
212
196
#subsToggle:checked ~ div label[for="subsToggle"] .hide-toggle { display: flex; }
213
197
#subsToggle:not(:checked) ~ div label[for="subsToggle"] .hide-toggle { display: none; }
214
198
215
-
/* Desktop: 25vw with left margin */
216
199
@media (min-width: 768px) {
217
200
#subsToggle:checked ~ div div#subs {
218
201
width: 25vw;
219
-
margin-left: 1rem;
202
+
max-width: 50vw;
220
203
}
221
-
/* Unchecked state */
222
204
#subsToggle:not(:checked) ~ div div#subs {
223
205
width: 0;
224
206
display: none;
225
207
margin-left: 0;
208
+
}
209
+
#subsToggle:not(:checked) ~ div div#resize-subs {
210
+
display: none;
226
211
}
227
212
}
228
213
</style>