loading up the forgejo repo on tangled to test page performance
Replace more `gt-` with `tw-`, update frontend docs (#29595)
Tested a few things, all working fine. Not sure if the chinese machine
translation is good.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit 7e8c1c5ba18e1ac8861f429b825163b8210fd178)
Conflicts:
docs/content/contributing/guidelines-frontend.zh-cn.md
Gitea docs
authored by
silverwind
wxiaoguang
and committed by
Earl Warren
907c3d0c
5f650283
+64
-59
+1
-1
docs/content/contributing/guidelines-frontend.en-us.md
+1
-1
docs/content/contributing/guidelines-frontend.en-us.md
···
47
47
9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided.
48
48
10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event.
49
49
11. Custom event names are recommended to use `ce-` prefix.
50
-
12. Gitea's tailwind-style CSS classes use `gt-` prefix (`gt-relative`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`).
50
+
12. Prefer using Tailwind CSS which is available via `tw-` prefix, e.g. `tw-relative`. Gitea's helper CSS classes use `gt-` prefix (`gt-df`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`).
51
51
13. Avoid inline scripts & styles as much as possible, it's recommended to put JS code into JS files and use CSS classes. If inline scripts & styles are unavoidable, explain the reason why it can't be avoided.
52
52
53
53
### Accessibility / ARIA
+17
-3
docs/content/contributing/guidelines-frontend.zh-cn.md
+17
-3
docs/content/contributing/guidelines-frontend.zh-cn.md
···
34
34
35
35
我们推荐使用[Google HTML/CSS Style Guide](https://google.github.io/styleguide/htmlcssguide.html)和[Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)。
36
36
37
-
## Gitea 特定准则：
37
+
## Gitea 特定准则
38
38
39
39
1. 每个功能（Fomantic-UI/jQuery 模块）应放在单独的文件/目录中。
40
40
2. HTML 的 id 和 class 应使用 kebab-case，最好包含2-3个与功能相关的关键词。
···
47
47
9. 避免在 CSS 中使用不必要的`!important`，如果无法避免，添加注释解释为什么需要它。
48
48
10. 避免在一个事件监听器中混合不同的事件，优先为每个事件使用独立的事件监听器。
49
49
11. 推荐使用自定义事件名称前缀`ce-`。
50
-
12. Gitea 的 tailwind-style CSS 类使用`gt-`前缀（`gt-relative`），而 Gitea 自身的私有框架级 CSS 类使用`g-`前缀（`g-modal-confirm`）。
50
+
12. 建议使用 Tailwind CSS，它可以通过 `tw-` 前缀获得，例如 `tw-relative`. Gitea 自身的助手类 CSS 使用 `gt-` 前缀（`gt-df`），Gitea 自身的私有框架级 CSS 类使用 `g-` 前缀（`g-modal-confirm`）。
51
+
13. 尽量避免内联脚本和样式，建议将JS代码放入JS文件中并使用CSS类。如果内联脚本和样式不可避免，请解释无法避免的原因。
51
52
52
53
### 可访问性 / ARIA
53
54
···
64
65
65
66
* Vue + Vanilla JS
66
67
* Fomantic-UI（jQuery）
68
+
* htmx （部分页面重新加载其他静态组件）
67
69
* Vanilla JS
68
70
69
71
不推荐的实现方式：
70
72
71
73
* Vue + Fomantic-UI（jQuery）
72
74
* jQuery + Vanilla JS
75
+
* htmx + 任何其他需要大量 JavaScript 代码或不必要的功能，如 htmx 脚本 (`hx-on`)
73
76
74
77
为了保持界面一致，Vue 组件可以使用 Fomantic-UI 的 CSS 类。
75
78
尽管不建议混合使用不同的框架，
79
+
我们使用 htmx 进行简单的交互。您可以在此 [PR](https://github.com/go-gitea/gitea/pull/28908) 中查看一个简单交互的示例，其中应使用 htmx。如果您需要更高级的反应性，请不要使用 htmx，请使用其他框架（Vue/Vanilla JS）。
76
80
但如果混合使用是必要的，并且代码设计良好且易于维护，也可以工作。
77
81
78
-
### async 函数
82
+
### `async` 函数
79
83
80
84
只有当函数内部存在`await`调用或返回`Promise`时，才将函数标记为`async`。
81
85
···
91
95
这是有意为之的，我们想调用异步函数并忽略Promise。
92
96
一些 lint 规则和 IDE 也会在未处理返回的 Promise 时发出警告。
93
97
98
+
### 获取数据
99
+
100
+
要获取数据，请使用`modules/fetch.js`中的包装函数`GET`、`POST`等。他们
101
+
接受内容的`data`选项，将自动设置 CSRF 令牌并返回
102
+
[Response](https://developer.mozilla.org/en-US/docs/Web/API/Response)。
103
+
94
104
### HTML 属性和 dataset
95
105
96
106
禁止使用`dataset`，它的驼峰命名行为使得搜索属性变得困难。
···
132
142
### Vue3 和 JSX
133
143
134
144
Gitea 现在正在使用 Vue3。我们决定不引入 JSX，以保持 HTML 代码和 JavaScript 代码分离。
145
+
146
+
### UI示例
147
+
148
+
Gitea 使用一些自制的 UI 元素并自定义其他元素，以将它们更好地集成到通用 UI 方法中。当在开发模式（`RUN_MODE=dev`）下运行 Gitea 时，在 `http(s)://your-gitea-url:port/devtest` 下会提供一个包含一些标准化 UI 示例的页面。
+2
-2
templates/admin/emails/list.tmpl
+2
-2
templates/admin/emails/list.tmpl
···
47
47
{{range .Emails}}
48
48
<tr>
49
49
<td><a href="{{AppSubUrl}}/{{.Name | PathEscape}}">{{.Name}}</a></td>
50
-
<td class="gt-ellipsis gt-max-width-12rem">{{.FullName}}</td>
51
-
<td class="gt-ellipsis gt-max-width-12rem">{{.Email}}</td>
50
+
<td class="gt-ellipsis tw-max-w-48">{{.FullName}}</td>
51
+
<td class="gt-ellipsis tw-max-w-48">{{.Email}}</td>
52
52
<td>{{if .IsPrimary}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
53
53
<td>
54
54
{{if .CanChange}}
+2
-2
templates/admin/packages/list.tmpl
+2
-2
templates/admin/packages/list.tmpl
···
62
62
{{end}}
63
63
</td>
64
64
<td>{{.Package.Type.Name}}</td>
65
-
<td class="gt-ellipsis gt-max-width-12rem">{{.Package.Name}}</td>
66
-
<td class="gt-ellipsis gt-max-width-12rem"><a href="{{.VersionWebLink}}">{{.Version.Version}}</a></td>
65
+
<td class="gt-ellipsis tw-max-w-48">{{.Package.Name}}</td>
66
+
<td class="gt-ellipsis tw-max-w-48"><a href="{{.VersionWebLink}}">{{.Version.Version}}</a></td>
67
67
<td><a href="{{.Creator.HomeLink}}">{{.Creator.Name}}</a></td>
68
68
<td>
69
69
{{if .Repository}}
+1
-1
templates/admin/user/list.tmpl
+1
-1
templates/admin/user/list.tmpl
···
96
96
<span class="ui mini label">{{ctx.Locale.Tr "admin.users.remote"}}</span>
97
97
{{end}}
98
98
</td>
99
-
<td class="gt-ellipsis gt-max-width-12rem">{{.Email}}</td>
99
+
<td class="gt-ellipsis tw-max-w-48">{{.Email}}</td>
100
100
<td>{{if .IsActive}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
101
101
<td>{{if .IsRestricted}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
102
102
<td>{{if index $.UsersTwoFaStatus .ID}}{{svg "octicon-check"}}{{else}}{{svg "octicon-x"}}{{end}}</td>
+1
-1
templates/base/paginate.tmpl
+1
-1
templates/base/paginate.tmpl
···
17
17
{{if eq .Num -1}}
18
18
<a class="disabled item">...</a>
19
19
{{else}}
20
-
<a class="{{if .IsCurrent}}active {{end}}item gt-content-center" {{if not .IsCurrent}}href="{{$paginationLink}}?page={{.Num}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}>{{.Num}}</a>
20
+
<a class="{{if .IsCurrent}}active {{end}}item tw-content-center" {{if not .IsCurrent}}href="{{$paginationLink}}?page={{.Num}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}>{{.Num}}</a>
21
21
{{end}}
22
22
{{end}}
23
23
<a class="{{if not .HasNext}}disabled{{end}} item navigation" {{if .HasNext}}href="{{$paginationLink}}?page={{.Next}}{{if $paginationParams}}&{{$paginationParams}}{{end}}"{{end}}>
+1
-1
templates/repo/commit_page.tmpl
+1
-1
templates/repo/commit_page.tmpl
···
17
17
{{$class = (print $class " isWarning")}}
18
18
{{end}}
19
19
{{end}}
20
-
<div class="ui top attached header clearing segment gt-relative commit-header {{$class}}">
20
+
<div class="ui top attached header clearing segment tw-relative commit-header {{$class}}">
21
21
<div class="gt-df gt-mb-4 gt-fw">
22
22
<h3 class="gt-mb-0 gt-f1"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage $.Context .Commit.Message ($.Repository.ComposeMetas ctx)}}</span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses}}</h3>
23
23
{{if not $.PageIsWiki}}
+1
-1
templates/repo/diff/box.tmpl
+1
-1
templates/repo/diff/box.tmpl
···
112
112
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} gt-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
113
113
<h4 class="diff-file-header sticky-2nd-row ui top attached normal header gt-df gt-ac gt-sb gt-fw">
114
114
<div class="diff-file-name gt-df gt-ac gt-gap-2 gt-fw">
115
-
<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} gt-invisible{{end}}">
115
+
<button class="fold-file btn interact-bg gt-p-2{{if not $isExpandable}} tw-invisible{{end}}">
116
116
{{if $file.ShouldBeHidden}}
117
117
{{svg "octicon-chevron-right" 18}}
118
118
{{else}}
+2
-2
templates/repo/diff/options_dropdown.tmpl
+2
-2
templates/repo/diff/options_dropdown.tmpl
···
17
17
{{if .Issue.Index}}
18
18
{{if .ShowOutdatedComments}}
19
19
<a class="item" href="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated=false">
20
-
<label class="gt-pointer-events-none">
20
+
<label class="tw-pointer-events-none">
21
21
{{ctx.Locale.Tr "repo.issues.review.option.hide_outdated_comments"}}
22
22
</label>
23
23
</a>
24
24
{{else}}
25
25
<a class="item" href="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated=true">
26
-
<label class="gt-pointer-events-none">
26
+
<label class="tw-pointer-events-none">
27
27
{{ctx.Locale.Tr "repo.issues.review.option.show_outdated_comments"}}
28
28
</label>
29
29
</a>
+4
-4
templates/repo/diff/section_split.tmpl
+4
-4
templates/repo/diff/section_split.tmpl
···
47
47
<td class="lines-type-marker lines-type-marker-old del-code"><span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
48
48
<td class="lines-code lines-code-old del-code">{{/*
49
49
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
50
-
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
50
+
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
51
51
*/}}{{svg "octicon-plus"}}{{/*
52
52
*/}}</button>{{/*
53
53
*/}}{{end}}{{/*
···
62
62
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="gt-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
63
63
<td class="lines-code lines-code-new add-code">{{/*
64
64
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
65
-
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
65
+
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
66
66
*/}}{{svg "octicon-plus"}}{{/*
67
67
*/}}</button>{{/*
68
68
*/}}{{end}}{{/*
···
79
79
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
80
80
<td class="lines-code lines-code-old">{{/*
81
81
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/*
82
-
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
82
+
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-left{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="left" data-idx="{{$line.LeftIdx}}">{{/*
83
83
*/}}{{svg "octicon-plus"}}{{/*
84
84
*/}}</button>{{/*
85
85
*/}}{{end}}{{/*
···
94
94
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="gt-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
95
95
<td class="lines-code lines-code-new">{{/*
96
96
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
97
-
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
97
+
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
98
98
*/}}{{svg "octicon-plus"}}{{/*
99
99
*/}}</button>{{/*
100
100
*/}}{{end}}{{/*
+1
-1
templates/repo/diff/section_unified.tmpl
+1
-1
templates/repo/diff/section_unified.tmpl
···
52
52
{{else}}
53
53
<td class="chroma lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">{{/*
54
54
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
55
-
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} gt-invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/*
55
+
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">{{/*
56
56
*/}}{{svg "octicon-plus"}}{{/*
57
57
*/}}</button>{{/*
58
58
*/}}{{end}}{{/*
+8
-8
templates/repo/diff/whitespace_dropdown.tmpl
+8
-8
templates/repo/diff/whitespace_dropdown.tmpl
···
2
2
{{svg "gitea-whitespace"}}
3
3
<div class="menu">
4
4
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=show-all&show-outdated={{$.ShowOutdatedComments}}">
5
-
<label class="gt-pointer-events-none">
6
-
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
5
+
<label class="tw-pointer-events-none">
6
+
<input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "show-all"}} checked{{end}}>
7
7
{{ctx.Locale.Tr "repo.diff.whitespace_show_everything"}}
8
8
</label>
9
9
</a>
10
10
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-all&show-outdated={{$.ShowOutdatedComments}}">
11
-
<label class="gt-pointer-events-none">
12
-
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
11
+
<label class="tw-pointer-events-none">
12
+
<input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-all"}} checked{{end}}>
13
13
{{ctx.Locale.Tr "repo.diff.whitespace_ignore_all_whitespace"}}
14
14
</label>
15
15
</a>
16
16
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-change&show-outdated={{$.ShowOutdatedComments}}">
17
-
<label class="gt-pointer-events-none">
18
-
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
17
+
<label class="tw-pointer-events-none">
18
+
<input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-change"}} checked{{end}}>
19
19
{{ctx.Locale.Tr "repo.diff.whitespace_ignore_amount_changes"}}
20
20
</label>
21
21
</a>
22
22
<a class="item" href="?style={{if .IsSplitStyle}}split{{else}}unified{{end}}&whitespace=ignore-eol&show-outdated={{$.ShowOutdatedComments}}">
23
-
<label class="gt-pointer-events-none">
24
-
<input class="gt-mr-3 gt-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
23
+
<label class="tw-pointer-events-none">
24
+
<input class="gt-mr-3 tw-pointer-events-none" type="radio"{{if eq .WhitespaceBehavior "ignore-eol"}} checked{{end}}>
25
25
{{ctx.Locale.Tr "repo.diff.whitespace_ignore_at_eol"}}
26
26
</label>
27
27
</a>
+1
-1
templates/repo/issue/card.tmpl
+1
-1
templates/repo/issue/card.tmpl
+2
-2
templates/repo/issue/labels/labels_selector_field.tmpl
+2
-2
templates/repo/issue/labels/labels_selector_field.tmpl
···
21
21
<div class="divider"></div>
22
22
{{end}}
23
23
{{$previousExclusiveScope = $exclusiveScope}}
24
-
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
24
+
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
25
25
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
26
26
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
27
27
</a>
···
34
34
<div class="divider"></div>
35
35
{{end}}
36
36
{{$previousExclusiveScope = $exclusiveScope}}
37
-
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}gt-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
37
+
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" {{if .IsArchived}}data-is-archived{{end}} data-id-selector="#label_{{.ID}}" data-scope="{{$exclusiveScope}}"><span class="octicon-check {{if not .IsChecked}}tw-invisible{{end}}">{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}</span> {{RenderLabel $.Context .}}
38
38
{{if .Description}}<br><small class="desc">{{.Description | RenderEmoji $.Context}}</small>{{end}}
39
39
<p class="archived-label-hint">{{template "repo/issue/labels/label_archived" .}}</p>
40
40
</a>
+1
-1
templates/repo/issue/new_form.tmpl
+1
-1
templates/repo/issue/new_form.tmpl
···
156
156
<div class="no-select item">{{ctx.Locale.Tr "repo.issues.new.clear_assignees"}}</div>
157
157
{{range .Assignees}}
158
158
<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
159
-
<span class="octicon-check gt-invisible">{{svg "octicon-check"}}</span>
159
+
<span class="octicon-check tw-invisible">{{svg "octicon-check"}}</span>
160
160
<span class="text">
161
161
{{ctx.AvatarUtils.Avatar . 28 "gt-mr-3"}}{{template "repo/search_name" .}}
162
162
</span>
+1
-1
templates/repo/settings/branches.tmpl
+1
-1
templates/repo/settings/branches.tmpl
···
16
16
{{.CsrfTokenHtml}}
17
17
<input type="hidden" name="action" value="default_branch">
18
18
{{if not .Repository.IsEmpty}}
19
-
<div class="ui dropdown selection gt-f1 gt-mr-3 gt-max-width-24rem">
19
+
<div class="ui dropdown selection gt-f1 gt-mr-3 tw-max-w-96">
20
20
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
21
21
<input type="hidden" name="branch" value="{{.Repository.DefaultBranch}}">
22
22
<div class="default text">{{.Repository.DefaultBranch}}</div>
+1
-1
templates/status/500.tmpl
+1
-1
templates/status/500.tmpl
···
41
41
<div class="ui container gt-my-5">
42
42
{{if .ErrorMsg}}
43
43
<p>{{ctx.Locale.Tr "error.occurred"}}:</p>
44
-
<pre class="tw-whitespace-pre-wrap gt-break-all">{{.ErrorMsg}}</pre>
44
+
<pre class="tw-whitespace-pre-wrap tw-break-all">{{.ErrorMsg}}</pre>
45
45
{{end}}
46
46
<div class="center gt-mt-5">
47
47
{{if or .SignedUser.IsAdmin .ShowFooterVersion}}<p>{{ctx.Locale.Tr "admin.config.app_ver"}}: {{AppVer}}</p>{{end}}
-9
web_src/css/helpers.css
-9
web_src/css/helpers.css
···
46
46
text-overflow: ellipsis;
47
47
}
48
48
49
-
.gt-max-width-12rem { max-width: 12rem !important; }
50
-
.gt-max-width-24rem { max-width: 24rem !important; }
51
-
52
49
/* below class names match Tailwind CSS */
53
-
.gt-break-all { word-break: break-all !important; }
54
-
.gt-content-center { align-content: center !important; }
55
-
.gt-invisible { visibility: hidden !important; }
56
-
.gt-items-start { align-items: flex-start !important; }
57
-
.gt-pointer-events-none { pointer-events: none !important; }
58
-
.gt-relative { position: relative !important; }
59
50
.gt-object-contain { object-fit: contain !important; }
60
51
.gt-no-underline { text-decoration-line: none !important; }
61
52
.gt-normal-case { text-transform: none !important; }
+2
-2
web_src/js/features/repo-diff.js
+2
-2
web_src/js/features/repo-diff.js
···
71
71
72
72
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
73
73
if ($form.closest('tr').data('line-type') === 'same') {
74
-
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('gt-invisible');
74
+
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('tw-invisible');
75
75
} else {
76
-
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('gt-invisible');
76
+
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('tw-invisible');
77
77
}
78
78
$newConversationHolder.find('.dropdown').dropdown();
79
79
initCompReactionSelector($newConversationHolder);
+2
-2
web_src/js/features/repo-issue.js
+2
-2
web_src/js/features/repo-issue.js
···
180
180
const idx = $conversationHolder.data('idx');
181
181
const lineType = $conversationHolder.closest('tr').data('line-type');
182
182
if (lineType === 'same') {
183
-
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('gt-invisible');
183
+
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).removeClass('tw-invisible');
184
184
} else {
185
-
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('gt-invisible');
185
+
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).removeClass('tw-invisible');
186
186
}
187
187
$conversationHolder.remove();
188
188
}
+3
-3
web_src/js/features/repo-legacy.js
+3
-3
web_src/js/features/repo-legacy.js
···
150
150
151
151
if ($(this).hasClass('checked')) {
152
152
$(this).removeClass('checked');
153
-
$(this).find('.octicon-check').addClass('gt-invisible');
153
+
$(this).find('.octicon-check').addClass('tw-invisible');
154
154
if (hasUpdateAction) {
155
155
if (!($(this).data('id') in items)) {
156
156
items[$(this).data('id')] = {
···
164
164
}
165
165
} else {
166
166
$(this).addClass('checked');
167
-
$(this).find('.octicon-check').removeClass('gt-invisible');
167
+
$(this).find('.octicon-check').removeClass('tw-invisible');
168
168
if (hasUpdateAction) {
169
169
if (!($(this).data('id') in items)) {
170
170
items[$(this).data('id')] = {
···
218
218
219
219
$(this).parent().find('.item').each(function () {
220
220
$(this).removeClass('checked');
221
-
$(this).find('.octicon-check').addClass('gt-invisible');
221
+
$(this).find('.octicon-check').addClass('tw-invisible');
222
222
});
223
223
224
224
if (selector === 'select-reviewers-modify' || selector === 'select-assignees-modify') {
+2
-2
web_src/js/features/user-auth.js
+2
-2
web_src/js/features/user-auth.js
···
9
9
10
10
for (const link of outer.querySelectorAll('.oauth-login-link')) {
11
11
link.addEventListener('click', () => {
12
-
inner.classList.add('gt-invisible');
12
+
inner.classList.add('tw-invisible');
13
13
outer.classList.add('is-loading');
14
14
setTimeout(() => {
15
15
// recover previous content to let user try again
16
16
// usually redirection will be performed before this action
17
17
outer.classList.remove('is-loading');
18
-
inner.classList.remove('gt-invisible');
18
+
inner.classList.remove('tw-invisible');
19
19
}, 5000);
20
20
});
21
21
}
+2
-2
web_src/js/markup/mermaid.js
+2
-2
web_src/js/markup/mermaid.js
···
45
45
const {svg} = await mermaid.render('mermaid', source);
46
46
47
47
const iframe = document.createElement('iframe');
48
-
iframe.classList.add('markup-render', 'gt-invisible');
48
+
iframe.classList.add('markup-render', 'tw-invisible');
49
49
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;
50
50
51
51
const mermaidBlock = document.createElement('div');
···
62
62
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
63
63
setTimeout(() => { // avoid flash of iframe background
64
64
mermaidBlock.classList.remove('is-loading');
65
-
iframe.classList.remove('gt-invisible');
65
+
iframe.classList.remove('tw-invisible');
66
66
}, 0);
67
67
});
68
68