Fix various UI bugs (#32821)

modules/markup/markdown/markdown_math_test.go

@@ -20,23 +20,23 @@ func TestMathRender(t *testing.T) {
 	}{
 		{
 			"$a$",
-			`<p><code class="language-math is-loading">a</code></p>` + nl,
+			`<p><code class="language-math">a</code></p>` + nl,
 		},
 		{
 			"$ a $",
-			`<p><code class="language-math is-loading">a</code></p>` + nl,
+			`<p><code class="language-math">a</code></p>` + nl,
 		},
 		{
 			"$a$ $b$",
-			`<p><code class="language-math is-loading">a</code> <code class="language-math is-loading">b</code></p>` + nl,
+			`<p><code class="language-math">a</code> <code class="language-math">b</code></p>` + nl,
 		},
 		{
 			`\(a\) \(b\)`,
-			`<p><code class="language-math is-loading">a</code> <code class="language-math is-loading">b</code></p>` + nl,
+			`<p><code class="language-math">a</code> <code class="language-math">b</code></p>` + nl,
 		},
 		{
 			`$a$.`,
-			`<p><code class="language-math is-loading">a</code>.</p>` + nl,
+			`<p><code class="language-math">a</code>.</p>` + nl,
 		},
 		{
 			`.$a$`,
@@ -64,27 +64,27 @@ func TestMathRender(t *testing.T) {
 		},
 		{
 			"$a$ ($b$) [$c$] {$d$}",
-			`<p><code class="language-math is-loading">a</code> (<code class="language-math is-loading">b</code>) [$c$] {$d$}</p>` + nl,
+			`<p><code class="language-math">a</code> (<code class="language-math">b</code>) [$c$] {$d$}</p>` + nl,
 		},
 		{
 			"$$a$$",
-			`<code class="chroma language-math display">a</code>` + nl,
+			`<code class="language-math display">a</code>` + nl,
 		},
 		{
 			"$$a$$ test",
-			`<p><code class="language-math display is-loading">a</code> test</p>` + nl,
+			`<p><code class="language-math">a</code> test</p>` + nl,
 		},
 		{
 			"test $$a$$",
-			`<p>test <code class="language-math display is-loading">a</code></p>` + nl,
+			`<p>test <code class="language-math">a</code></p>` + nl,
 		},
 		{
 			`foo $x=\$$ bar`,
-			`<p>foo <code class="language-math is-loading">x=\$</code> bar</p>` + nl,
+			`<p>foo <code class="language-math">x=\$</code> bar</p>` + nl,
 		},
 		{
 			`$\text{$b$}$`,
-			`<p><code class="language-math is-loading">\text{$b$}</code></p>` + nl,
+			`<p><code class="language-math">\text{$b$}</code></p>` + nl,
 		},
 	}
 
@@ -110,7 +110,7 @@ func TestMathRenderBlockIndent(t *testing.T) {
 \alpha
 \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 \alpha
 </code></pre>
 `,
@@ -122,7 +122,7 @@ func TestMathRenderBlockIndent(t *testing.T) {
  \alpha
  \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 \alpha
 </code></pre>
 `,
@@ -137,7 +137,7 @@ a
    d
   \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 a
 b
 c
@@ -154,7 +154,7 @@ c
   c
   \]
 `,
-			`<pre class="code-block is-loading"><code class="chroma language-math display">
+			`<pre class="code-block is-loading"><code class="language-math display">
 a
  b
 c
@@ -165,7 +165,7 @@ c
 			"indent-0-oneline",
 			`$$ x $$
 foo`,
-			`<code class="chroma language-math display"> x </code>
+			`<code class="language-math display"> x </code>
 <p>foo</p>
 `,
 		},
@@ -173,7 +173,7 @@ foo`,
 			"indent-3-oneline",
 			`   $$ x $$<SPACE>
 foo`,
-			`<code class="chroma language-math display"> x </code>
+			`<code class="language-math display"> x </code>
 <p>foo</p>
 `,
 		},
@@ -188,10 +188,10 @@ foo`,
 > \]
 `,
 			`<blockquote>
-<pre class="code-block is-loading"><code class="chroma language-math display">
+<pre class="code-block is-loading"><code class="language-math display">
 a
 </code></pre>
-<pre class="code-block is-loading"><code class="chroma language-math display">
+<pre class="code-block is-loading"><code class="language-math display">
 b
 </code></pre>
 </blockquote>
@@ -207,7 +207,7 @@ b
 2. b`,
 			`<ol>
 <li>a
-<pre class="code-block is-loading"><code class="chroma language-math display">
+<pre class="code-block is-loading"><code class="language-math display">
 x
 </code></pre>
 </li>

modules/markup/markdown/math/block_renderer.go

@@ -12,6 +12,17 @@ import (
 	"github.com/yuin/goldmark/util"
 )
 
+// Block render output:
+// 	<pre class="code-block is-loading"><code class="language-math display">...</code></pre>
+//
+// Keep in mind that there is another "code block" render in "func (r *GlodmarkRender) highlightingRenderer"
+// "highlightingRenderer" outputs the math block with extra "chroma" class:
+// 	<pre class="code-block is-loading"><code class="chroma language-math display">...</code></pre>
+//
+// Special classes:
+// * "is-loading": show a loading indicator
+// * "display": used by JS to decide to render as a block, otherwise render as inline
+
 // BlockRenderer represents a renderer for math Blocks
 type BlockRenderer struct {
 	renderInternal *internal.RenderInternal
@@ -38,7 +49,7 @@ func (r *BlockRenderer) writeLines(w util.BufWriter, source []byte, n gast.Node)
 func (r *BlockRenderer) renderBlock(w util.BufWriter, source []byte, node gast.Node, entering bool) (gast.WalkStatus, error) {
 	n := node.(*Block)
 	if entering {
-		code := giteaUtil.Iif(n.Inline, "", `<pre class="code-block is-loading">`) + `<code class="chroma language-math display">`
+		code := giteaUtil.Iif(n.Inline, "", `<pre class="code-block is-loading">`) + `<code class="language-math display">`
 		_ = r.renderInternal.FormatWithSafeAttrs(w, code)
 		r.writeLines(w, source, n)
 	} else {

modules/markup/markdown/math/inline_renderer.go

@@ -13,6 +13,9 @@ import (
 	"github.com/yuin/goldmark/util"
 )
 
+// Inline render output:
+// <code class="language-math">...</code>
+
 // InlineRenderer is an inline renderer
 type InlineRenderer struct {
 	renderInternal *internal.RenderInternal
@@ -25,11 +28,7 @@ func NewInlineRenderer(renderInternal *internal.RenderInternal) renderer.NodeRen
 
 func (r *InlineRenderer) renderInline(w util.BufWriter, source []byte, n ast.Node, entering bool) (ast.WalkStatus, error) {
 	if entering {
-		extraClass := ""
-		if _, ok := n.(*InlineBlock); ok {
-			extraClass = "display "
-		}
-		_ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math %sis-loading">`, extraClass)
+		_ = r.renderInternal.FormatWithSafeAttrs(w, `<code class="language-math">`)
 		for c := n.FirstChild(); c != nil; c = c.NextSibling() {
 			segment := c.(*ast.Text).Segment
 			value := util.EscapeHTML(segment.Value(source))

templates/repo/view_list.tmpl

@@ -1,6 +1,6 @@
 {{/* use grid layout, still use the old ID because there are many other CSS styles depending on this ID */}}
 <div id="repo-files-table" {{if .HasFilesWithoutLatestCommit}}hx-indicator="#repo-files-table .repo-file-cell.message" hx-trigger="load" hx-swap="morph" hx-post="{{.LastCommitLoaderURL}}"{{end}}>
-	<div class="repo-file-line">
+	<div class="repo-file-line repo-file-last-commit">
 		<div class="latest-commit">{{template "repo/latest_commit" .}}</div>
 		<div>{{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}</div>
 	</div>

web_src/css/repo/clone.css

@@ -1,11 +1,14 @@
 /* only used by "repo/empty.tmpl" */
 .clone-buttons-combo {
+  display: flex;
+  align-items: center;
   flex: 1;
 }
 
 .clone-buttons-combo input {
   border-left: none !important;
   border-radius: 0 !important;
+  height: 30px;
 }
 
 /* used by the clone-panel popup */

web_src/css/repo/home-file-list.css

@@ -44,6 +44,10 @@
   padding: 6px 10px;
 }
 
+#repo-files-table .repo-file-last-commit {
+  background: var(--color-box-header);
+}
+
 #repo-files-table .repo-file-cell.name {
   max-width: 300px;
   white-space: nowrap;
@@ -59,6 +63,7 @@
 }
 
 #repo-files-table .repo-file-cell.age {
+  text-align: right;
   white-space: nowrap;
   color: var(--color-text-light-1);
 }

web_src/js/markup/math.ts

@@ -1,9 +1,8 @@
 import {displayError} from './common.ts';
 
 function targetElement(el: Element) {
-  // The target element is either the current element if it has the
-  // `is-loading` class or the pre that contains it
-  return el.classList.contains('is-loading') ? el : el.closest('pre');
+  // The target element is either the parent "code block with loading indicator", or itself
+  return el.closest('.code-block.is-loading') ?? el;
 }
 
 export async function renderMath(): Promise<void> {