From 5bc030efa2cf88ce7f1ec8d8b33c60a7e9408332 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Fri, 13 Dec 2024 14:45:32 +0800 Subject: [PATCH] Fix various UI bugs (#32821) --- modules/markup/markdown/markdown_math_test.go | 40 +++++++++---------- .../markup/markdown/math/block_renderer.go | 13 +++++- .../markup/markdown/math/inline_renderer.go | 9 ++--- templates/repo/view_list.tmpl | 2 +- web_src/css/repo/clone.css | 3 ++ web_src/css/repo/home-file-list.css | 5 +++ web_src/js/markup/math.ts | 5 +-- 7 files changed, 47 insertions(+), 30 deletions(-) diff --git a/modules/markup/markdown/markdown_math_test.go b/modules/markup/markdown/markdown_math_test.go index e371b1c74a..a2213b2ce7 100644 --- a/modules/markup/markdown/markdown_math_test.go +++ b/modules/markup/markdown/markdown_math_test.go @@ -20,23 +20,23 @@ func TestMathRender(t *testing.T) { }{ { "$a$", - `

a

` + nl, + `

a

` + nl, }, { "$ a $", - `

a

` + nl, + `

a

` + nl, }, { "$a$ $b$", - `

a b

` + nl, + `

a b

` + nl, }, { `\(a\) \(b\)`, - `

a b

` + nl, + `

a b

` + nl, }, { `$a$.`, - `

a.

` + nl, + `

a.

` + nl, }, { `.$a$`, @@ -64,27 +64,27 @@ func TestMathRender(t *testing.T) { }, { "$a$ ($b$) [$c$] {$d$}", - `

a (b) [$c$] {$d$}

` + nl, + `

a (b) [$c$] {$d$}

` + nl, }, { "$$a$$", - `a` + nl, + `a` + nl, }, { "$$a$$ test", - `

a test

` + nl, + `

a test

` + nl, }, { "test $$a$$", - `

test a

` + nl, + `

test a

` + nl, }, { `foo $x=\$$ bar`, - `

foo x=\$ bar

` + nl, + `

foo x=\$ bar

` + nl, }, { `$\text{$b$}$`, - `

\text{$b$}

` + nl, + `

\text{$b$}

` + nl, }, } @@ -110,7 +110,7 @@ func TestMathRenderBlockIndent(t *testing.T) { \alpha \] `, - `

+			`

 \alpha
 

 `,
@@ -122,7 +122,7 @@ func TestMathRenderBlockIndent(t *testing.T) {
  \alpha
  \]
 `,
-			`

+			`

 \alpha
 

 `,
@@ -137,7 +137,7 @@ a
    d
   \]
 `,
-			`

+			`

 a
 b
 c
@@ -154,7 +154,7 @@ c
   c
   \]
 `,
-			`

+			`

 a
  b
 c
@@ -165,7 +165,7 @@ c
 			"indent-0-oneline",
 			`$$ x $$
 foo`,
-			` x 
+			` x 
 
foo

 `,
 		},
@@ -173,7 +173,7 @@ foo`,
 			"indent-3-oneline",
 			`   $$ x $$
 foo`,
-			` x 
+			` x 
 
foo

 `,
 		},
@@ -188,10 +188,10 @@ foo`,
 > \]
 `,
 			`

-

+

 a
 

-

+

 b
 

 

@@ -207,7 +207,7 @@ b
 2. b`,
 			`
    
 
  1. a
-
    
+
    
 x
 
    
 
    2. 
diff --git a/modules/markup/markdown/math/block_renderer.go b/modules/markup/markdown/math/block_renderer.go
index a770efa01c..c29f061882 100644
--- a/modules/markup/markdown/math/block_renderer.go
+++ b/modules/markup/markdown/math/block_renderer.go
@@ -12,6 +12,17 @@ import (
 	"github.com/yuin/goldmark/util"
 )
 
+// Block render output:
+// 	
    ...
    
+//
+// Keep in mind that there is another "code block" render in "func (r *GlodmarkRender) highlightingRenderer"
+// "highlightingRenderer" outputs the math block with extra "chroma" class:
+// 	
    ...
    
+//
+// 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, "", `
    `) + ``
+		code := giteaUtil.Iif(n.Inline, "", `
    `) + ``
 		_ = r.renderInternal.FormatWithSafeAttrs(w, code)
 		r.writeLines(w, source, n)
 	} else {
diff --git a/modules/markup/markdown/math/inline_renderer.go b/modules/markup/markdown/math/inline_renderer.go
index 0cff4f1e74..4e0531cf40 100644
--- a/modules/markup/markdown/math/inline_renderer.go
+++ b/modules/markup/markdown/math/inline_renderer.go
@@ -13,6 +13,9 @@ import (
 	"github.com/yuin/goldmark/util"
 )
 
+// Inline render output:
+// ...
+
 // 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, ``, extraClass)
+		_ = r.renderInternal.FormatWithSafeAttrs(w, ``)
 		for c := n.FirstChild(); c != nil; c = c.NextSibling() {
 			segment := c.(*ast.Text).Segment
 			value := util.EscapeHTML(segment.Value(source))
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index ea61c3736a..0fdb45e574 100644
--- a/templates/repo/view_list.tmpl
+++ b/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 */}}
 
    
-	
    
+	
    
 		
    {{template "repo/latest_commit" .}}
    
 		
    {{if and .LatestCommit .LatestCommit.Committer}}{{DateUtils.TimeSince .LatestCommit.Committer.When}}{{end}}
    
 	
    
diff --git a/web_src/css/repo/clone.css b/web_src/css/repo/clone.css
index 15709a78f6..3f6a1323fe 100644
--- a/web_src/css/repo/clone.css
+++ b/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 */
diff --git a/web_src/css/repo/home-file-list.css b/web_src/css/repo/home-file-list.css
index eab2124d6f..ecb26fa662 100644
--- a/web_src/css/repo/home-file-list.css
+++ b/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);
 }
diff --git a/web_src/js/markup/math.ts b/web_src/js/markup/math.ts
index 6a1ca2f2e3..22a4de38e9 100644
--- a/web_src/js/markup/math.ts
+++ b/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 {