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

appview: style nits

- remove redundant divs in base layout
- allow scrolling changed-files listing
- show more of the file in tree views
- unify repo-index and repo-tree views

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

oppi.li 12a8c093 eb67abe4

verified
Changed files
+10 -22
appview
-12
appview/pages/templates/layouts/base.html
···
{{ block "mainLayout" . }}
<div class="px-1 col-span-1 md:col-start-3 md:col-span-8 flex flex-col gap-4">
{{ block "contentLayout" . }}
-
<div class="col-span-1 md:col-span-2">
-
{{ block "contentLeft" . }} {{ end }}
-
</div>
<main class="col-span-1 md:col-span-8">
{{ block "content" . }}{{ end }}
</main>
-
<div class="col-span-1 md:col-span-2">
-
{{ block "contentRight" . }} {{ end }}
-
</div>
{{ end }}
{{ block "contentAfterLayout" . }}
-
<div class="col-span-1 md:col-span-2">
-
{{ block "contentAfterLeft" . }} {{ end }}
-
</div>
<main class="col-span-1 md:col-span-8">
{{ block "contentAfter" . }}{{ end }}
</main>
-
<div class="col-span-1 md:col-span-2">
-
{{ block "contentAfterRight" . }} {{ end }}
-
</div>
{{ end }}
</div>
{{ end }}
+1 -1
appview/pages/templates/repo/commit.html
···
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
{{ template "repo/fragments/diffOpts" .DiffOpts }}
</div>
-
<div class="sticky top-0 flex-grow max-h-screen">
+
<div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
{{ template "repo/fragments/diffChangedFiles" .Diff }}
</div>
{{end}}
+1 -1
appview/pages/templates/repo/compare/compare.html
···
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
{{ template "repo/fragments/diffOpts" .DiffOpts }}
</div>
-
<div class="sticky top-0 flex-grow max-h-screen">
+
<div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
{{ template "repo/fragments/diffChangedFiles" .Diff }}
</div>
{{end}}
+1 -1
appview/pages/templates/repo/fragments/interdiffFiles.html
···
{{ define "repo/fragments/interdiffFiles" }}
{{ $fileTree := fileTree .AffectedFiles }}
-
<section class="mt-4 px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm min-h-full text-sm">
+
<section class="px-6 py-2 border border-gray-200 dark:border-gray-700 w-full mx-auto rounded bg-white dark:bg-gray-800 drop-shadow-sm min-h-full text-sm">
<div class="diff-stat">
<div class="flex gap-2 items-center">
<strong class="text-sm uppercase dark:text-gray-200">files</strong>
+3 -3
appview/pages/templates/repo/index.html
···
{{ $linkstyle := "no-underline hover:underline dark:text-white" }}
{{ range .Files }}
-
<div class="grid grid-cols-2 gap-4 items-center py-1">
-
<div class="col-span-1">
+
<div class="grid grid-cols-3 gap-4 items-center py-1">
+
<div class="col-span-2">
{{ $link := printf "/%s/%s/%s/%s" $.RepoInfo.FullName "tree" (urlquery $.Ref) .Name }}
{{ $icon := "folder" }}
{{ $iconStyle := "size-4 fill-current" }}
···
</a>
</div>
-
<div class="text-xs col-span-1 text-right">
+
<div class="text-sm col-span-1 text-right">
{{ with .LastCommit }}
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash }}" class="text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .When }}</a>
{{ end }}
+1 -1
appview/pages/templates/repo/pulls/interdiff.html
···
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
{{ template "repo/fragments/diffOpts" .DiffOpts }}
</div>
-
<div class="sticky top-0 flex-grow max-h-screen">
+
<div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
{{ template "repo/fragments/interdiffFiles" .Interdiff }}
</div>
{{end}}
+1 -1
appview/pages/templates/repo/pulls/patch.html
···
<div class="flex flex-col gap-4 col-span-1 md:col-span-2">
{{ template "repo/fragments/diffOpts" .DiffOpts }}
</div>
-
<div class="sticky top-0 flex-grow max-h-screen">
+
<div class="sticky top-0 flex-grow max-h-screen overflow-y-auto">
{{ template "repo/fragments/diffChangedFiles" .Diff }}
</div>
{{end}}
+2 -2
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-4">
+
<div class="col-span-8 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" }}
···
{{ end }}
</div>
-
<div class="col-span-6 md:col-span-2 text-right">
+
<div class="col-span-4 md:col-span-2 text-sm text-right">
{{ with .LastCommit }}
<a href="/{{ $.RepoInfo.FullName }}/commit/{{ .Hash }}" class="text-gray-500 dark:text-gray-400">{{ template "repo/fragments/time" .When }}</a>
{{ end }}