forked from tangled.org/core
Monorepo for Tangled — https://tangled.org

appview/pages: fix some styles for repoindex

Signed-off-by: oppiliappan <me@oppi.li>

oppi.li 55f1fc1f bba4923d

verified
Changed files
+17 -16
appview
pages
templates
+12 -11
appview/pages/templates/repo/index.html
···
{{ end }}
<a href="{{ $link }}" class="{{ $linkstyle }}">
<div class="flex items-center gap-2">
-
{{ i $icon $iconStyle }}{{ .Name }}
+
{{ i $icon $iconStyle "flex-shrink-0" }}
+
<span class="truncate">{{ .Name }}</span>
</div>
</a>
</div>
···
</div>
<!-- commit info bar -->
-
<div class="text-xs mt-2 text-gray-500 dark:text-gray-400 flex items-center">
+
<div class="text-xs mt-2 text-gray-500 dark:text-gray-400 flex items-center flex-wrap">
{{ $verified := $.VerifiedCommits.IsVerified .Hash.String }}
{{ $hashStyle := "text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-900" }}
{{ if $verified }}
···
</a>
<div class="flex flex-col gap-1">
{{ range .BranchesTrunc }}
-
<div class="text-base flex items-center justify-between">
-
<div class="flex items-center gap-2">
+
<div class="text-base flex items-center justify-between overflow-hidden">
+
<div class="flex items-center gap-2 min-w-0 flex-1">
<a href="/{{ $.RepoInfo.FullName }}/tree/{{ .Reference.Name | urlquery }}"
-
class="inline no-underline hover:underline dark:text-white">
+
class="inline-block truncate no-underline hover:underline dark:text-white">
{{ .Reference.Name }}
</a>
{{ if .Commit }}
-
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-
<span class="text-xs text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .Commit.Committer.When }}</span>
+
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·'] shrink-0"></span>
+
<span class="whitespace-nowrap text-xs text-gray-500 dark:text-gray-400 shrink-0">{{ template "repo/fragments/time" .Commit.Committer.When }}</span>
{{ end }}
{{ if .IsDefault }}
-
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·']"></span>
-
<span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono">default</span>
+
<span class="px-1 text-gray-500 dark:text-gray-400 select-none after:content-['·'] shrink-0"></span>
+
<span class="bg-gray-200 dark:bg-gray-700 rounded py-1/2 px-1 text-xs font-mono shrink-0">default</span>
{{ end }}
</div>
{{ if ne $.Ref .Reference.Name }}
<a href="/{{ $.RepoInfo.FullName }}/compare/{{ $.Ref | urlquery }}...{{ .Reference.Name | urlquery }}"
-
class="text-xs flex gap-2 items-center"
+
class="text-xs flex gap-2 items-center shrink-0 ml-2"
title="Compare branches or tags">
{{ i "git-compare" "w-3 h-3" }} compare
</a>
-
{{end}}
+
{{ end }}
</div>
{{ end }}
</div>
+4 -4
appview/pages/templates/repo/tree.html
···
{{ range .Files }}
<div class="grid grid-cols-12 gap-4 items-center py-1">
-
<div class="col-span-6 md:col-span-3">
+
<div class="col-span-6 md:col-span-4">
{{ $link := printf "/%s/%s/%s/%s/%s" $.RepoInfo.FullName "tree" (urlquery $.Ref) $.TreePath .Name }}
{{ $icon := "folder" }}
{{ $iconStyle := "size-4 fill-current" }}
{{ if .IsFile }}
{{ $icon = "file" }}
-
{{ $iconStyle = "flex-shrink-0 size-4" }}
+
{{ $iconStyle = "size-4" }}
{{ end }}
<a href="{{ $link }}" class="{{ $linkstyle }}">
<div class="flex items-center gap-2">
-
{{ i $icon $iconStyle }}
+
{{ i $icon $iconStyle "flex-shrink-0" }}
<span class="truncate">{{ .Name }}</span>
</div>
</a>
</div>
-
<div class="col-span-0 md:col-span-7 hidden md:block overflow-hidden">
+
<div class="col-span-0 md:col-span-6 hidden md:block overflow-hidden">
{{ with .LastCommit }}
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash }}" class="text-gray-500 dark:text-gray-400 block truncate">{{ .Message }}</a>
{{ end }}
+1 -1
input.css
···
}
code {
-
@apply px-1 font-mono rounded bg-gray-100 dark:bg-gray-700;
+
@apply font-mono rounded bg-gray-100 dark:bg-gray-700;
}
}