forked from
tangled.org/core
This repository has no description
improve timeline styles to match
author
Akshay
date
(Feb 27, 2025, 4:06 PM UTC)
commit
454e1498
454e1498a1ad7a1e11ad614c6c6c2a0c2973ee97
parent
a4e472ed
a4e472ed001a411522c57f11fec75799b7ba5d03
+126
-111
+1
-1
appview/pages/templates/layouts/base.html
+1
-1
appview/pages/templates/layouts/base.html
···
9
9
/>
10
10
<script src="/static/htmx.min.js"></script>
11
11
<link href="/static/tw.css" rel="stylesheet" type="text/css" />
12
-
<title>{{ block "title" . }}tangled{{ end }}</title>
12
+
<title>{{ block "title" . }}{{ end }} · tangled</title>
13
13
</head>
14
14
<body class="bg-slate-100">
15
15
<div class="container mx-auto px-1 pt-4 min-h-screen flex flex-col">
+1
-1
appview/pages/templates/layouts/repobase.html
+1
-1
appview/pages/templates/layouts/repobase.html
···
1
1
{{ define "title" }}{{ .RepoInfo.FullName }}{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<section id="repo-header" class="mb-4 p-2">
4
+
<section id="repo-header" class="mb-4 py-2 px-6">
5
5
<p class="text-lg">
6
6
<a href="/{{ .RepoInfo.OwnerWithAt }}">{{ .RepoInfo.OwnerWithAt }}</a>
7
7
<span class="select-none">/</span>
+1
-1
appview/pages/templates/repo/commit.html
+1
-1
appview/pages/templates/repo/commit.html
+9
-10
appview/pages/templates/repo/issues/issue.html
+9
-10
appview/pages/templates/repo/issues/issue.html
···
4
4
{{ end }}
5
5
6
6
{{ define "repoContent" }}
7
-
<div class="flex items-center justify-between">
8
-
<h1>
9
-
{{ .Issue.Title }}
10
-
<span class="text-gray-400">#{{ .Issue.IssueId }}</span>
11
-
</h1>
12
-
13
-
<time class="text-sm">{{ .Issue.Created | timeFmt }}</time>
14
-
</div>
7
+
<h1>
8
+
{{ .Issue.Title }}
9
+
<span class="text-gray-400">#{{ .Issue.IssueId }}</span>
10
+
</h1>
15
11
16
12
{{ $bgColor := "bg-gray-800" }}
17
13
{{ $icon := "ban" }}
···
39
35
<a href="/{{ $owner }}" class="no-underline hover:underline"
40
36
>{{ $owner }}</a
41
37
>
38
+
<span class="px-1 select-none before:content-['\00B7']"></span>
39
+
<time>{{ .Issue.Created | timeFmt }}</time>
42
40
</span>
43
41
</div>
44
42
···
66
64
class="absolute left-8 -top-4 w-px h-4 bg-gray-300"
67
65
></div>
68
66
{{ end }}
69
-
<div class="flex items-center gap-2 mb-2">
67
+
<div class="flex items-center gap-2 mb-2 text-gray-400">
70
68
{{ $owner := index $.DidHandleMap .OwnerDid }}
71
-
<span class="text-gray-400 text-sm">
69
+
<span class="text-sm">
72
70
<a
73
71
href="/{{ $owner }}"
74
72
class="no-underline hover:underline"
75
73
>{{ $owner }}</a
76
74
>
77
75
</span>
76
+
<span class="px-1 select-none before:content-['\00B7']"></span>
78
77
<a
79
78
href="#{{ .CommentId }}"
80
79
class="text-gray-500 text-sm hover:text-gray-500 hover:underline no-underline"
+1
-1
appview/pages/templates/repo/log.html
+1
-1
appview/pages/templates/repo/log.html
+32
-41
appview/pages/templates/timeline.html
+32
-41
appview/pages/templates/timeline.html
···
1
-
{{ define "title" }}Timeline{{ end }}
1
+
{{ define "title" }}timeline{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<h1>Timeline</h1>
4
+
<div class="p-6">
5
+
<p class="text-xl font-bold">Timeline</p>
6
+
</div>
5
7
6
-
{{ range .Timeline }}
7
-
<div class="relative
8
-
px-4
9
-
py-2
10
-
border-l
11
-
border-black
12
-
before:content-['']
13
-
before:absolute
14
-
before:w-1
15
-
before:h-1
16
-
before:bg-black
17
-
before:rounded-full
18
-
before:left-[-2.2px]
19
-
before:top-1/2
20
-
before:-translate-y-1/2
21
-
">
22
-
{{ if .Repo }}
23
-
{{ $userHandle := index $.DidHandleMap .Repo.Did }}
24
-
<div class="flex items-center">
25
-
<p class="text-gray-600">
26
-
<a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>
27
-
created
28
-
<a href="/{{ $userHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
29
-
<time class="text-gray-700">{{ .Repo.Created | timeFmt }}</time>
30
-
</p>
31
-
</div>
32
-
{{ else if .Follow }}
33
-
{{ $userHandle := index $.DidHandleMap .Follow.UserDid }}
34
-
{{ $subjectHandle := index $.DidHandleMap .Follow.SubjectDid }}
35
-
<div class="flex items-center">
36
-
<p class="text-gray-600">
37
-
<a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>
38
-
followed
39
-
<a href="/{{ $subjectHandle }}" class="no-underline hover:underline">{{ $subjectHandle }}</a>
40
-
<time class="text-gray-700">{{ .Follow.FollowedAt | timeFmt }}</time>
41
-
</p>
42
-
</div>
43
-
{{ end }}
44
-
</div>
8
+
<div class="flex flex-col gap-3 relative">
9
+
<div class="absolute left-8 top-0 bottom-0 w-px bg-gray-300"></div>
10
+
{{ range .Timeline }}
11
+
<div class="px-6 py-2 bg-white rounded drop-shadow-sm w-fit">
12
+
{{ if .Repo }}
13
+
{{ $userHandle := index $.DidHandleMap .Repo.Did }}
14
+
<div class="flex items-center">
15
+
<p class="text-gray-600">
16
+
<a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>
17
+
created
18
+
<a href="/{{ $userHandle }}/{{ .Repo.Name }}" class="no-underline hover:underline">{{ .Repo.Name }}</a>
19
+
<time class="text-gray-700">{{ .Repo.Created | timeFmt }}</time>
20
+
</p>
21
+
</div>
22
+
{{ else if .Follow }}
23
+
{{ $userHandle := index $.DidHandleMap .Follow.UserDid }}
24
+
{{ $subjectHandle := index $.DidHandleMap .Follow.SubjectDid }}
25
+
<div class="flex items-center">
26
+
<p class="text-gray-600">
27
+
<a href="/{{ $userHandle }}" class="no-underline hover:underline">{{ $userHandle }}</a>
28
+
followed
29
+
<a href="/{{ $subjectHandle }}" class="no-underline hover:underline">{{ $subjectHandle }}</a>
30
+
<time class="text-gray-700">{{ .Follow.FollowedAt | timeFmt }}</time>
31
+
</p>
32
+
</div>
45
33
{{ end }}
34
+
</div>
35
+
{{ end }}
36
+
</div>
46
37
47
38
{{ end }}
+57
-56
appview/pages/templates/user/profile.html
+57
-56
appview/pages/templates/user/profile.html
···
1
1
{{ define "title" }}{{ or .UserHandle .UserDid }}{{ end }}
2
2
3
3
{{ define "content" }}
4
-
<div class="flex">
5
-
<h1 class="pb-1">
6
-
{{ didOrHandle .UserDid .UserHandle }}
7
-
</h1>
8
-
{{ if ne .FollowStatus.String "IsSelf" }}
9
-
<button id="followBtn"
4
+
5
+
<div class="flex">
6
+
<h1 class="pb-1 px-6">
7
+
{{ didOrHandle .UserDid .UserHandle }}
8
+
</h1>
9
+
{{ if ne .FollowStatus.String "IsSelf" }}
10
+
<button id="followBtn"
10
11
class="btn mt-2"
11
12
{{ if eq .FollowStatus.String "IsNotFollowing" }}
12
-
hx-post="/follow?subject={{.UserDid}}"
13
+
hx-post="/follow?subject={{.UserDid}}"
13
14
{{ else }}
14
-
hx-delete="/follow?subject={{.UserDid}}"
15
+
hx-delete="/follow?subject={{.UserDid}}"
15
16
{{ end }}
16
17
hx-trigger="click"
17
18
hx-target="#followBtn"
18
19
hx-swap="outerHTML"
19
20
>
20
-
{{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}
21
-
</button>
21
+
{{ if eq .FollowStatus.String "IsNotFollowing" }}Follow{{ else }}Unfollow{{ end }}
22
+
</button>
22
23
{{ end }}
23
-
</div>
24
-
<div class="text-sm mb-4">
25
-
<span>{{ .ProfileStats.Followers }} followers</span>
26
-
<div class="inline-block px-1 select-none after:content-['·']"></div>
27
-
<span>{{ .ProfileStats.Following }} following</span>
28
-
</div>
29
-
<p class="text-sm font-bold py-2">REPOS</p>
30
-
<div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
31
-
{{ range .Repos }}
24
+
</div>
25
+
<div class="text-sm mb-4 px-6">
26
+
<span>{{ .ProfileStats.Followers }} followers</span>
27
+
<div class="inline-block px-1 select-none after:content-['·']"></div>
28
+
<span>{{ .ProfileStats.Following }} following</span>
29
+
</div>
30
+
<p class="text-sm font-bold py-2 px-6">REPOS</p>
31
+
<div id="repos" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
32
+
{{ range .Repos }}
33
+
<div
34
+
id="repo-card"
35
+
class="py-4 px-6 drop-shadow-sm rounded bg-white"
36
+
>
37
+
<div id="repo-card-name" class="font-medium">
38
+
<a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
39
+
>{{ .Name }}</a
40
+
>
41
+
</div>
32
42
<div
33
-
id="repo-card"
34
-
class="p-4 drop-shadow-sm rounded bg-white"
35
-
>
36
-
<div id="repo-card-name" class="font-medium">
37
-
<a href="/@{{ or $.UserHandle $.UserDid }}/{{ .Name }}"
38
-
>{{ .Name }}</a
39
-
>
40
-
</div>
41
-
<div
42
-
id="repo-knot-name"
43
-
class="text-gray-600 text-sm font-mono"
43
+
id="repo-knot-name"
44
+
class="text-gray-600 text-sm font-mono"
44
45
>
45
-
{{ .Knot }}
46
-
</div>
46
+
{{ .Knot }}
47
47
</div>
48
-
{{ else }}
49
-
<p>This user does not have any repos yet.</p>
50
-
{{ end }}
51
48
</div>
52
-
<p class="text-sm font-bold py-2">COLLABORATING ON</p>
53
-
<div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
54
-
{{ range .CollaboratingRepos }}
55
-
<div
56
-
id="repo-card"
57
-
class="p-4 drop-shadow-sm rounded bg-white"
49
+
{{ else }}
50
+
<p class="px-6">This user does not have any repos yet.</p>
51
+
{{ end }}
52
+
</div>
53
+
<p class="text-sm font-bold py-2 px-6">COLLABORATING ON</p>
54
+
<div id="collaborating" class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
55
+
{{ range .CollaboratingRepos }}
56
+
<div
57
+
id="repo-card"
58
+
class="py-4 px-6 drop-shadow-sm rounded bg-white"
59
+
>
60
+
<div id="repo-card-name" class="font-medium">
61
+
<a href="/{{ .Did }}/{{ .Name }}">
62
+
@{{ .Did }}/{{ .Name }}
63
+
</a>
64
+
</div>
65
+
<div
66
+
id="repo-knot-name"
67
+
class="text-gray-600 text-sm font-mono"
58
68
>
59
-
<div id="repo-card-name" class="font-medium">
60
-
<a href="/{{ .Did }}/{{ .Name }}">
61
-
@{{ .Did }}/{{ .Name }}
62
-
</a>
63
-
</div>
64
-
<div
65
-
id="repo-knot-name"
66
-
class="text-gray-600 text-sm font-mono"
67
-
>
68
-
{{ .Knot }}
69
-
</div>
70
-
</div>
71
-
{{ else }}
72
-
<p>This user is not collaborating.</p>
73
-
{{ end }}
69
+
{{ .Knot }}
70
+
</div>
74
71
</div>
72
+
{{ else }}
73
+
<p class="px-6">This user is not collaborating.</p>
74
+
{{ end }}
75
+
</div>
75
76
{{ end }}
+24
input.css
+24
input.css
···
19
19
font-weight: bold;
20
20
font-style: normal;
21
21
font-display: swap;
22
+
font-feature-settings:
23
+
"calt" 1,
24
+
"kern" 1;
22
25
}
23
26
@font-face {
24
27
font-family: "iA Writer Quattro S";
···
26
29
font-weight: normal;
27
30
font-style: italic;
28
31
font-display: swap;
32
+
font-feature-settings:
33
+
"calt" 1,
34
+
"kern" 1;
29
35
}
30
36
@font-face {
31
37
font-family: "iA Writer Quattro S";
···
34
40
font-weight: bold;
35
41
font-style: italic;
36
42
font-display: swap;
43
+
font-feature-settings:
44
+
"calt" 1,
45
+
"kern" 1;
37
46
}
38
47
39
48
@font-face {
···
42
51
font-weight: normal;
43
52
font-style: normal;
44
53
font-display: swap;
54
+
font-feature-settings:
55
+
"calt" 1,
56
+
"kern" 1;
45
57
}
46
58
@font-face {
47
59
font-family: "iA Writer Mono S";
···
49
61
font-weight: bold;
50
62
font-style: normal;
51
63
font-display: swap;
64
+
font-feature-settings:
65
+
"calt" 1,
66
+
"kern" 1;
52
67
}
53
68
@font-face {
54
69
font-family: "iA Writer Mono S";
···
56
71
font-weight: normal;
57
72
font-style: italic;
58
73
font-display: swap;
74
+
font-feature-settings:
75
+
"calt" 1,
76
+
"kern" 1;
59
77
}
60
78
@font-face {
61
79
font-family: "iA Writer Mono S";
···
64
82
font-weight: bold;
65
83
font-style: italic;
66
84
font-display: swap;
85
+
font-feature-settings:
86
+
"calt" 1,
87
+
"kern" 1;
67
88
}
68
89
69
90
@font-face {
···
71
92
font-style: normal;
72
93
font-weight: 400;
73
94
font-display: swap;
95
+
font-feature-settings:
96
+
"calt" 1,
97
+
"kern" 1;
74
98
}
75
99
h1 {
76
100
@apply text-2xl;