Monorepo for Tangled
appview/{starBtn,forkBtn}: style 'split' buttons properly
this change makes the fork and star buttons use the .btn and
.btn-group css classes for ease of maintenance and visual
constistency
+13
-12
+5
-5
appview/pages/templates/fragments/starBtn.html
+5
-5
appview/pages/templates/fragments/starBtn.html
···
2
2
{{/* NOTE: this fragment is always replaced with hx-swap-oob */}}
3
3
<div
4
4
id="starBtn"
5
-
class="flex w-full min-h-[30px] items-stretch overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm"
5
+
class="btn-group w-full"
6
6
data-star-subject-at="{{ .SubjectAt }}"
7
7
{{ if .HxSwapOob }}hx-swap-oob='outerHTML:#starBtn[data-star-subject-at="{{ .SubjectAt }}"]'{{ end }}
8
8
>
9
9
<button
10
-
class="flex flex-1 justify-center gap-2 items-center px-2 group disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-700"
10
+
class="btn-group-item active flex-1 group"
11
11
{{ if .IsStarred }}
12
12
hx-delete="/star?subject={{ .SubjectAt }}&countHint={{ .StarCount }}&repoName={{ .RepoName }}"
13
13
{{ else }}
···
22
22
{{ i "star" "w-4 h-4 inline group-[.htmx-request]:hidden" }}
23
23
{{ end }}
24
24
{{ i "loader-circle" "w-4 h-4 animate-spin hidden group-[.htmx-request]:inline" }}
25
-
<span class="text-sm group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span>
25
+
<span class="group-[.htmx-request]:hidden">{{ if .IsStarred }}unstar{{ else }}star{{ end }}</span>
26
26
</button>
27
27
{{ if .RepoName }}
28
28
{{ $did := .SubjectAt.Authority | string }}
29
29
<a
30
30
href="/{{ resolve $did }}/{{ .RepoName }}/stars"
31
-
class="flex items-center px-2 text-sm no-underline hover:no-underline border-l border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
31
+
class="btn-group-item"
32
32
title="Starred by"
33
33
>
34
34
{{ .StarCount }}
35
35
</a>
36
36
{{ else }}
37
-
<span class="flex items-center px-2 text-sm border-l border-gray-200 dark:border-gray-700">
37
+
<span class="btn-group-item cursor-default">
38
38
{{ .StarCount }}
39
39
</span>
40
40
{{ end }}
+3
-3
appview/pages/templates/layouts/repobase.html
+3
-3
appview/pages/templates/layouts/repobase.html
···
117
117
"IsStarred" .RepoInfo.IsStarred
118
118
"StarCount" .RepoInfo.Stats.StarCount
119
119
"RepoName" .RepoInfo.Name) }}
120
-
<div class="flex w-full min-h-[30px] items-stretch overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
120
+
<div class="btn-group w-full">
121
121
<a
122
-
class="flex flex-1 justify-center gap-2 items-center px-2 text-sm no-underline hover:no-underline group hover:bg-gray-50 dark:hover:bg-gray-700"
122
+
class="btn-group-item active flex-1 group"
123
123
hx-boost="true"
124
124
href="/{{ .RepoInfo.FullName }}/fork"
125
125
>
···
129
129
</a>
130
130
<a
131
131
href="/{{ .RepoInfo.FullName }}/forks"
132
-
class="flex items-center px-2 text-sm no-underline hover:no-underline border-l border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700"
132
+
class="btn-group-item"
133
133
title="Forked by"
134
134
>
135
135
{{ .RepoInfo.Stats.ForkCount }}
+2
-2
appview/pages/templates/timeline/fragments/timeline.html
+2
-2
appview/pages/templates/timeline/fragments/timeline.html
···
53
53
<span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" $repo.Created }}</span>
54
54
</div>
55
55
{{ with $repo }}
56
-
{{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount)) }}
56
+
{{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }}
57
57
{{ end }}
58
58
{{ end }}
59
59
···
80
80
<span class="text-gray-700 dark:text-gray-400 text-xs">{{ template "repo/fragments/time" .Created }}</span>
81
81
</div>
82
82
{{ with .Repo }}
83
-
{{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount)) }}
83
+
{{ template "user/fragments/repoCard" (list $root . true true (dict "IsStarred" $event.IsStarred "SubjectAt" .RepoAt "StarCount" $event.StarCount "RepoName" .Slug)) }}
84
84
{{ end }}
85
85
{{ end }}
86
86
{{ end }}
+1
-1
appview/pages/templates/user/fragments/repoCard.html
+1
-1
appview/pages/templates/user/fragments/repoCard.html
···
1
1
{{ define "user/fragments/repoCard" }}
2
-
{{/* root, repo, fullName [,starButton [,starData]] */}}
2
+
{{/* root, repo, fullName [,starButton [,starData{IsStarred,SubjectAt,StarCount,RepoName} [,compact]]] */}}
3
3
{{ $root := index . 0 }}
4
4
{{ $repo := index . 1 }}
5
5
{{ $fullName := index . 2 }}
+2
-1
input.css
+2
-1
input.css
···
249
249
}
250
250
251
251
.btn-group {
252
-
@apply inline-flex items-center
252
+
@apply inline-flex items-stretch
253
253
max-h-[32px]
254
254
rounded border border-gray-200 dark:border-gray-700
255
255
divide-x divide-gray-200 dark:divide-gray-700
···
260
260
@apply btn-flat min-h-[30px] gap-1.5
261
261
bg-gray-50 dark:bg-gray-900
262
262
border-y-0
263
+
no-underline hover:no-underline
263
264
hover:text-gray-600 dark:hover:text-gray-400;
264
265
}
265
266