Load aside section before main section on commit page Commit page's body can be quite long depends on a commit. If it's sufficiently long, browser renders aside after long main content. The problem is that causes reflow thus unnecessary layout calculations. With this patch, aside allocates its space by appearing before the main content, so regardless of how long the main content, reflow does not happen. The only downside is order of tab navigation and screen reader pronouncing sections is different to other pages, due to HTML/CSS spec and legacy bullshit a.k.a., accessibility practices is total garbage. But this is worth the inconvenience given how inefficient and annoying the reflow is.

Changes

1 changed files (+59/-59)

• embed/templates/repo-commit.html.tmpl
  • @@ -34,6 +34,65 @@ SPDX-License-Identifier: MIT
    {{ template "repo-nav" . }} </header> <main class="passthru"> + <div class="aside"> + <div class="aside-contents"> + <dl class="metadata"> + <dt class="metadata--key">Authored by</dt> + <dd class="metadata--value"> + <a href="mailto:{{ .Commit.Author.Email }}"> + {{- .Commit.Author.Name -}} + </a> + </dd> + <dt class="metadata--key">Authored at</dt> + <dd class="metadata--value"> + <time + datetime='{{ .Commit.Author.When.Format "2006-01-02T15:04:05-0700" }}' + data-local-format="" + > + {{ .Commit.Author.When.Format "2006-01-02 15:04:05 -0700" }} + </time> + </dd> + <dt class="metadata--key">Committed by</dt> + <dd class="metadata--value"> + <a href="mailto:{{ .Commit.Committer.Email }}"> + {{- .Commit.Committer.Name -}} + </a> + </dd> + <dt class="metadata--key">Committed at</dt> + <dd class="metadata--value"> + <time + datetime='{{ .Commit.Committer.When.Format "2006-01-02T15:04:05-0700" }}' + data-local-format="" + > + {{ .Commit.Committer.When.Format "2006-01-02 15:04:05 -0700" }} + </time> + </dd> + {{- if .Commit.PGPSignature }} + <dt class="metadata--key">Signature</dt> + <dd class="metadata--value"> + <details> + <summary>View</summary> + <textarea class="repo-commit--signature" readonly> + {{- .Commit.PGPSignature -}} + </textarea> + </details> + </dd> + {{ end -}} + <dt class="metadata--key">Object name</dt> + <dd class="metadata--value object-hash"> + {{- .Commit.Hash.String -}} + </dd> + {{- if not .Parent.Hash.IsZero }} + <dt class="metadata--key">Parent</dt> + <dd class="metadata--value"> + <a href="/{{ .Meta.DirName }}/commit/{{ .Parent.Hash.String }}"> + {{- slice .Parent.Hash.String 0 8 -}} + </a> + </dd> + {{ end -}} + </dl> + </div> + </div> <div class="main"> <section class="repo-commit--message"> {{- .Commit.Message -}}
  • @@ -106,65 +165,6 @@ SPDX-License-Identifier: MIT
    {{ end -}} </ul> </div> - <div class="aside"> - <div class="aside-contents"> - <dl class="metadata"> - <dt class="metadata--key">Authored by</dt> - <dd class="metadata--value"> - <a href="mailto:{{ .Commit.Author.Email }}"> - {{- .Commit.Author.Name -}} - </a> - </dd> - <dt class="metadata--key">Authored at</dt> - <dd class="metadata--value"> - <time - datetime='{{ .Commit.Author.When.Format "2006-01-02T15:04:05-0700" }}' - data-local-format="" - > - {{ .Commit.Author.When.Format "2006-01-02 15:04:05 -0700" }} - </time> - </dd> - <dt class="metadata--key">Committed by</dt> - <dd class="metadata--value"> - <a href="mailto:{{ .Commit.Committer.Email }}"> - {{- .Commit.Committer.Name -}} - </a> - </dd> - <dt class="metadata--key">Committed at</dt> - <dd class="metadata--value"> - <time - datetime='{{ .Commit.Committer.When.Format "2006-01-02T15:04:05-0700" }}' - data-local-format="" - > - {{ .Commit.Committer.When.Format "2006-01-02 15:04:05 -0700" }} - </time> - </dd> - {{- if .Commit.PGPSignature }} - <dt class="metadata--key">Signature</dt> - <dd class="metadata--value"> - <details> - <summary>View</summary> - <textarea class="repo-commit--signature" readonly> - {{- .Commit.PGPSignature -}} - </textarea> - </details> - </dd> - {{ end -}} - <dt class="metadata--key">Object name</dt> - <dd class="metadata--value object-hash"> - {{- .Commit.Hash.String -}} - </dd> - {{- if not .Parent.Hash.IsZero }} - <dt class="metadata--key">Parent</dt> - <dd class="metadata--value"> - <a href="/{{ .Meta.DirName }}/commit/{{ .Parent.Hash.String }}"> - {{- slice .Parent.Hash.String 0 8 -}} - </a> - </dd> - {{ end -}} - </dl> - </div> - </div> </main> {{ template "site-footer" . }} </body>