jojo/templates/repo/view_list.tmpl

79 lines
3.8 KiB
Go HTML Template
Raw Permalink Normal View History

<table id="repo-files-table" class="ui single line table tw-mt-0" {{if .HasFilesWithoutLatestCommit}}hx-indicator="tr.notready td.message span" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
Improve repo file list table semantics for screen readers (second attempt) (#12232) Unintentionally fixes forgejo/forgejo#11812 per tip https://codeberg.org/forgejo/forgejo/pulls/12232#issuecomment-13580345 --- This is a second attempt to fix https://codeberg.org/forgejo/forgejo/issues/11116. The [first attempt](https://codeberg.org/forgejo/forgejo/pulls/11846) introduced a [regression](https://codeberg.org/forgejo/forgejo/issues/12082) and needed to be [reverted](https://codeberg.org/forgejo/forgejo/pulls/12088). What's different about this attempt is that several days of extra work have been invested in amending the CSS to ensure that no visual changes slip through as a side-effect of the structural changes to the HTML. This was surprisingly challenging, and I documented much of the journey in https://codeberg.org/henrycatalinismith/forgejo/issues/1. In summary, the existing version of the "latest commit" row leans heavily on global styles that are universally applied to all `thead` elements inside `table` elements with the `ui` and `table` classes. The nature of the structural HTML changes necessary to fix the accessibility bug (this row can't be inside `thead`) is such that those universal styles no longer apply to this element and must be duplicated into new element-specific styles. Similarly, existing styles applying to non-`thead` table content has unwanted effects on this element once it moves into the `tbody` which needed to be counteracted. The original PR already lays out the accessibility impact of this pull request in a good amount of details and so instead I'm going to use the space here to focus on comparing the visuals in the `forgejo` branch with those in this PR. There follow a few pretty boring identical before & after screenshots that are pixel-for-pixel identical with each other. I don't think you'll be able to spot any bugs by glancing at these and am more sharing them to provide an insight into where my attention has been during testing: the 380px wide mobile viewport, a larger desktop viewport, and the "commit message too long to fit in the available space" case. If you know of other troublesome cases for this code that aren't covered by what you see in these images then that could be a good thing to explore here. Before | After -|- ![](/attachments/a6f18efd-8b3b-426e-a0dc-70e9eda3fe73) | ![](/attachments/6297c663-cd5a-4849-a555-061257d59238) ![](/attachments/bbb90da2-afbf-4be5-9293-ec8b3a3dbb3a) | ![](/attachments/29103640-fce9-42c9-b91a-f9d6f9ba4db0) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12232 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
2026-04-25 20:47:11 +02:00
<caption class="tw-sr-only">
{{ctx.Locale.Tr "repo.files.caption"}}
</caption>
<thead class="tw-sr-only">
<th>{{ctx.Locale.Tr "repo.files.filename"}}</th>
<th>{{ctx.Locale.Tr "repo.files.last_commit_message"}}</th>
<th>{{ctx.Locale.Tr "repo.files.last_commit_date"}}</th>
</thead>
<tbody>
<tr class="commit-list">
Improve repo file list table semantics for screen readers (second attempt) (#12232) Unintentionally fixes forgejo/forgejo#11812 per tip https://codeberg.org/forgejo/forgejo/pulls/12232#issuecomment-13580345 --- This is a second attempt to fix https://codeberg.org/forgejo/forgejo/issues/11116. The [first attempt](https://codeberg.org/forgejo/forgejo/pulls/11846) introduced a [regression](https://codeberg.org/forgejo/forgejo/issues/12082) and needed to be [reverted](https://codeberg.org/forgejo/forgejo/pulls/12088). What's different about this attempt is that several days of extra work have been invested in amending the CSS to ensure that no visual changes slip through as a side-effect of the structural changes to the HTML. This was surprisingly challenging, and I documented much of the journey in https://codeberg.org/henrycatalinismith/forgejo/issues/1. In summary, the existing version of the "latest commit" row leans heavily on global styles that are universally applied to all `thead` elements inside `table` elements with the `ui` and `table` classes. The nature of the structural HTML changes necessary to fix the accessibility bug (this row can't be inside `thead`) is such that those universal styles no longer apply to this element and must be duplicated into new element-specific styles. Similarly, existing styles applying to non-`thead` table content has unwanted effects on this element once it moves into the `tbody` which needed to be counteracted. The original PR already lays out the accessibility impact of this pull request in a good amount of details and so instead I'm going to use the space here to focus on comparing the visuals in the `forgejo` branch with those in this PR. There follow a few pretty boring identical before & after screenshots that are pixel-for-pixel identical with each other. I don't think you'll be able to spot any bugs by glancing at these and am more sharing them to provide an insight into where my attention has been during testing: the 380px wide mobile viewport, a larger desktop viewport, and the "commit message too long to fit in the available space" case. If you know of other troublesome cases for this code that aren't covered by what you see in these images then that could be a good thing to explore here. Before | After -|- ![](/attachments/a6f18efd-8b3b-426e-a0dc-70e9eda3fe73) | ![](/attachments/6297c663-cd5a-4849-a555-061257d59238) ![](/attachments/bbb90da2-afbf-4be5-9293-ec8b3a3dbb3a) | ![](/attachments/29103640-fce9-42c9-b91a-f9d6f9ba4db0) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12232 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
2026-04-25 20:47:11 +02:00
<td class="tw-overflow-hidden repo-files-table-latest-commit-cell repo-files-table-latest-commit-left" colspan="2">
<div class="tw-flex">
<div class="latest-commit">
{{template "repo/latest_commit" .}}
</div>
</div>
Improve repo file list table semantics for screen readers (second attempt) (#12232) Unintentionally fixes forgejo/forgejo#11812 per tip https://codeberg.org/forgejo/forgejo/pulls/12232#issuecomment-13580345 --- This is a second attempt to fix https://codeberg.org/forgejo/forgejo/issues/11116. The [first attempt](https://codeberg.org/forgejo/forgejo/pulls/11846) introduced a [regression](https://codeberg.org/forgejo/forgejo/issues/12082) and needed to be [reverted](https://codeberg.org/forgejo/forgejo/pulls/12088). What's different about this attempt is that several days of extra work have been invested in amending the CSS to ensure that no visual changes slip through as a side-effect of the structural changes to the HTML. This was surprisingly challenging, and I documented much of the journey in https://codeberg.org/henrycatalinismith/forgejo/issues/1. In summary, the existing version of the "latest commit" row leans heavily on global styles that are universally applied to all `thead` elements inside `table` elements with the `ui` and `table` classes. The nature of the structural HTML changes necessary to fix the accessibility bug (this row can't be inside `thead`) is such that those universal styles no longer apply to this element and must be duplicated into new element-specific styles. Similarly, existing styles applying to non-`thead` table content has unwanted effects on this element once it moves into the `tbody` which needed to be counteracted. The original PR already lays out the accessibility impact of this pull request in a good amount of details and so instead I'm going to use the space here to focus on comparing the visuals in the `forgejo` branch with those in this PR. There follow a few pretty boring identical before & after screenshots that are pixel-for-pixel identical with each other. I don't think you'll be able to spot any bugs by glancing at these and am more sharing them to provide an insight into where my attention has been during testing: the 380px wide mobile viewport, a larger desktop viewport, and the "commit message too long to fit in the available space" case. If you know of other troublesome cases for this code that aren't covered by what you see in these images then that could be a good thing to explore here. Before | After -|- ![](/attachments/a6f18efd-8b3b-426e-a0dc-70e9eda3fe73) | ![](/attachments/6297c663-cd5a-4849-a555-061257d59238) ![](/attachments/bbb90da2-afbf-4be5-9293-ec8b3a3dbb3a) | ![](/attachments/29103640-fce9-42c9-b91a-f9d6f9ba4db0) Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12232 Reviewed-by: 0ko <0ko@noreply.codeberg.org>
2026-04-25 20:47:11 +02:00
</td>
<td class="text grey right age repo-files-table-latest-commit-cell tw-py-0">{{if .LatestCommit}}{{if .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}{{end}}</td>
</tr>
{{if .HasParentPath}}
<tr class="has-parent">
<td colspan="3"><a class="muted" href="{{.BranchLink}}{{if .ParentPath}}{{PathEscapeSegments .ParentPath}}{{end}}">{{svg "octicon-reply" 16 "tw-mr-2"}}..</a></td>
</tr>
{{end}}
{{range $item := .Files}}
Use native git variants by default with go-git variants as build tag (#13673) * Move last commit cache back into modules/git Signed-off-by: Andrew Thornton <art27@cantab.net> * Remove go-git from the interface for last commit cache Signed-off-by: Andrew Thornton <art27@cantab.net> * move cacheref to last_commit_cache Signed-off-by: Andrew Thornton <art27@cantab.net> * Remove go-git from routers/private/hook Signed-off-by: Andrew Thornton <art27@cantab.net> * Move FindLFSFiles to pipeline Signed-off-by: Andrew Thornton <art27@cantab.net> * Make no-go-git variants Signed-off-by: Andrew Thornton <art27@cantab.net> * Submodule RefID Signed-off-by: Andrew Thornton <art27@cantab.net> * fix issue with GetCommitsInfo Signed-off-by: Andrew Thornton <art27@cantab.net> * fix GetLastCommitForPaths Signed-off-by: Andrew Thornton <art27@cantab.net> * Improve efficiency Signed-off-by: Andrew Thornton <art27@cantab.net> * More efficiency Signed-off-by: Andrew Thornton <art27@cantab.net> * even faster Signed-off-by: Andrew Thornton <art27@cantab.net> * Reduce duplication * As per @lunny Signed-off-by: Andrew Thornton <art27@cantab.net> * attempt to fix drone Signed-off-by: Andrew Thornton <art27@cantab.net> * fix test-tags Signed-off-by: Andrew Thornton <art27@cantab.net> * default to use no-go-git variants and add gogit build tag Signed-off-by: Andrew Thornton <art27@cantab.net> * placate lint Signed-off-by: Andrew Thornton <art27@cantab.net> * as per @6543 Signed-off-by: Andrew Thornton <art27@cantab.net> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2020-12-17 14:00:47 +00:00
{{$entry := $item.Entry}}
{{$commit := $item.Commit}}
<tr data-entryname="{{$entry.Name}}" data-ready="{{if $commit}}true{{else}}false{{end}}" class="{{if not $commit}}not{{end}}ready entry">
<td class="name four wide">
<span class="truncate">
{{if $entry.IsSubmodule}}
{{$submodule := $item.Submodule}}
{{$refURL := $submodule.ResolveUpstreamURL $.Repository.HTMLURL}}
{{$icon := (svg "octicon-file-submodule" 16 "tw-mr-2")}}
{{if $refURL}}
<a class="muted" href="{{$refURL}}">{{$icon}}{{$entry.Name}}</a><span class="at">@</span><a href="{{$refURL}}/commit/{{PathEscape $submodule.Commit.String}}">{{ShortSha $submodule.Commit.String}}</a>
{{else}}
{{$icon}}{{$entry.Name}}<span class="at">@</span>{{ShortSha $submodule.Commit.String}}
{{end}}
{{else}}
{{if $entry.IsDir}}
{{$subJumpablePathName := $entry.GetSubJumpablePathName}}
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $subJumpablePathName}}" title="{{$subJumpablePathName}}">
{{$subJumpablePathFields := StringUtils.Split $subJumpablePathName "/"}}
{{$subJumpablePathFieldLast := (Eval (len $subJumpablePathFields) "-" 1)}}
{{svg "octicon-file-directory-fill" 16 "tw-mr-2" -}}
{{if eq $subJumpablePathFieldLast 0 -}}
{{$subJumpablePathName}}
{{else -}}
{{$subJumpablePathPrefixes := slice $subJumpablePathFields 0 $subJumpablePathFieldLast -}}
<span class="text light-2">{{StringUtils.Join $subJumpablePathPrefixes "/"}}</span>/{{index $subJumpablePathFields $subJumpablePathFieldLast}}
{{end}}
</a>
{{else}}
<a class="muted" href="{{$.TreeLink}}/{{PathEscapeSegments $entry.Name}}" title="{{$entry.Name}}">{{svg (printf "octicon-%s" (EntryIcon $entry)) 16 "tw-mr-2"}}{{$entry.Name}}</a>
{{end}}
{{end}}
</span>
</td>
<td class="message nine wide">
<span class="truncate">
{{if $commit}}
{{$commitLink := printf "%s/commit/%s" $.RepoLink (PathEscape $commit.ID.String)}}
{{RenderCommitMessageLinkSubject $.Context $commit.Message $commitLink ($.Repository.ComposeMetas ctx)}}
{{else}}
Fix elipsis button not working if the last commit loading is deferred (#29544) Before this change, if we had more than 200 entries being deferred in loading, the entire table would get replaced thus losing any event listeners attached to the elements within the table, such as the elipsis button and commit list with tippy. With this change we remove the previous javascript code that replaced the table and use htmx to replace the table. htmx attributes added: - `hx-indicator="tr.notready td.message span"`: attach the loading spinner to the files whose last commit is still being loaded - `hx-trigger="load"` trigger the request-replace behavior as soon as possible - `hx-swap="morph"`: use the idiomorph morphing algorithm, this is the thing that makes it so the elipsis button event listener is kept during the replacement, fixing the bug because we don't actually replace the table, only modifying it - `hx-post="{{.LastCommitLoaderURL}}"`: make a post request to this url to get the table with all of the commit information As part of this change I removed the handling of partial replacement in the case we have less than 200 "not ready" files. The first reason is that I couldn't make htmx replace only a subset of returned elements, the second reason is that we have a cache implemented in the backend already so the only cost added is that we query the cache a few times (which is sure to be populated due to the initial request), and the last reason is that since the last refactor of this functionality that removed jQuery we don't properly send the "not ready" entries as the backend expects `FormData` with `f[]` and we send a JSON with `f` so we always query for all rows anyway. # Before ![before](https://github.com/go-gitea/gitea/assets/20454870/482ebfec-66c5-40cc-9c1e-e3b3bfe1bbc1) # After ![after](https://github.com/go-gitea/gitea/assets/20454870/454c517e-3a4e-4006-a49f-99cc56e0fd60) --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit 937e8b55149388840bbf6c4d7216495bc3dd2fe9)
2024-03-02 21:31:59 +02:00
<div class="ui active tiny slow centered inline"></div>
{{end}}
</span>
</td>
<td class="text right age three wide">{{if $commit}}{{DateUtils.TimeSince $commit.Committer.When}}{{end}}</td>
</tr>
{{end}}
</tbody>
2014-07-26 00:24:27 -04:00
</table>
{{if and .ReadmeExist (or .IsMarkup .IsPlainText)}}
{{template "repo/view_file" .}}
{{end}}