forked from tangled.org/core
Monorepo for Tangled

improve timeline styles to match

Changed files
+126 -111
appview
+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 {{ 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
··· 39 39 40 40 <div class="diff-stat"> 41 41 <br> 42 - <strong class="text-sm uppercase mb-4">Affected files</strong> 42 + <strong class="text-sm uppercase mb-4">Changed files</strong> 43 43 {{ range $diff }} 44 44 <ul> 45 45 {{ if .IsDelete }}
+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
··· 82 82 </div> 83 83 </div> 84 84 85 - <div class="text-xs text-gray-500 mt-3"> 85 + <div class="text-sm text-gray-500 mt-3"> 86 86 <span class="font-mono"> 87 87 <a 88 88 href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash.String }}"
+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
··· 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
··· 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;