From 226a82a9396dc94f362ba27bd1c9318630df74b4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Thu, 28 Mar 2024 09:31:07 +0100 Subject: [PATCH] Migrate font-family to tailwind (#30118) Enable us to use tailwind's [`font-family`](https://tailwindcss.com/docs/font-family) classes as well as remove `gt-mono` in favor of `tw-font-mono`. I also merged the "compensation" to one selector, previously this was two different values 0.9em and 0.95em. I did not declare a `serif` font because I don't think there will ever be a use case for those. Command ran: ```sh perl -p -i -e 's#gt-mono#tw-font-mono#g' web_src/js/**/* templates/**/* --- docs/content/contributing/guidelines-frontend.en-us.md | 2 +- docs/content/contributing/guidelines-frontend.zh-cn.md | 2 +- tailwind.config.js | 4 ++++ templates/repo/commits_list_small.tmpl | 2 +- templates/repo/diff/blob_excerpt.tmpl | 6 +++--- templates/repo/diff/box.tmpl | 8 ++++---- templates/repo/diff/section_split.tmpl | 8 ++++---- templates/repo/diff/section_unified.tmpl | 2 +- templates/repo/file_info.tmpl | 2 +- templates/repo/release/list.tmpl | 2 +- templates/repo/settings/lfs.tmpl | 2 +- templates/repo/settings/lfs_pointers.tmpl | 4 ++-- templates/repo/tag/list.tmpl | 2 +- templates/shared/combomarkdowneditor.tmpl | 2 +- web_src/css/base.css | 9 ++++++++- web_src/css/helpers.css | 5 ----- web_src/js/components/DiffCommitSelector.vue | 2 +- web_src/js/components/DiffFileList.vue | 2 +- web_src/js/features/comp/ComboMarkdownEditor.js | 2 +- 19 files changed, 37 insertions(+), 31 deletions(-) diff --git a/docs/content/contributing/guidelines-frontend.en-us.md b/docs/content/contributing/guidelines-frontend.en-us.md index 3535e97903fe..efeaf38bb2bb 100644 --- a/docs/content/contributing/guidelines-frontend.en-us.md +++ b/docs/content/contributing/guidelines-frontend.en-us.md @@ -47,7 +47,7 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h 9. Avoid unnecessary `!important` in CSS, add comments to explain why it's necessary if it can't be avoided. 10. Avoid mixing different events in one event listener, prefer to use individual event listeners for every event. 11. Custom event names are recommended to use `ce-` prefix. -12. Prefer using Tailwind CSS which is available via `tw-` prefix, e.g. `tw-relative`. Gitea's helper CSS classes use `gt-` prefix (`gt-mono`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`). +12. Prefer using Tailwind CSS which is available via `tw-` prefix, e.g. `tw-relative`. Gitea's helper CSS classes use `gt-` prefix (`gt-word-break`), while Gitea's own private framework-level CSS classes use `g-` prefix (`g-modal-confirm`). 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. ### Accessibility / ARIA diff --git a/docs/content/contributing/guidelines-frontend.zh-cn.md b/docs/content/contributing/guidelines-frontend.zh-cn.md index c7998c6dc586..394097b259fd 100644 --- a/docs/content/contributing/guidelines-frontend.zh-cn.md +++ b/docs/content/contributing/guidelines-frontend.zh-cn.md @@ -47,7 +47,7 @@ HTML 页面由[Go HTML Template](https://pkg.go.dev/html/template)渲染。 9. 避免在 CSS 中使用不必要的`!important`，如果无法避免，添加注释解释为什么需要它。 10. 避免在一个事件监听器中混合不同的事件，优先为每个事件使用独立的事件监听器。 11. 推荐使用自定义事件名称前缀`ce-`。 -12. 建议使用 Tailwind CSS，它可以通过 `tw-` 前缀获得，例如 `tw-relative`. Gitea 自身的助手类 CSS 使用 `gt-` 前缀（`gt-mono`），Gitea 自身的私有框架级 CSS 类使用 `g-` 前缀（`g-modal-confirm`）。 +12. 建议使用 Tailwind CSS，它可以通过 `tw-` 前缀获得，例如 `tw-relative`. Gitea 自身的助手类 CSS 使用 `gt-` 前缀（`gt-word-break`），Gitea 自身的私有框架级 CSS 类使用 `g-` 前缀（`g-modal-confirm`）。 13. 尽量避免内联脚本和样式，建议将JS代码放入JS文件中并使用CSS类。如果内联脚本和样式不可避免，请解释无法避免的原因。 ### 可访问性 / ARIA diff --git a/tailwind.config.js b/tailwind.config.js index 5bce37e02346..d49e9d7a1c78 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -68,6 +68,10 @@ export default { '3xl': '24px', 'full': 'var(--border-radius-circle)', // 50% }, + fontFamily: { + sans: 'var(--fonts-regular)', + mono: 'var(--fonts-monospace)', + }, fontWeight: { light: 'var(--font-weight-light)', normal: 'var(--font-weight-normal)', diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl index 0af29291d884..d96b314d01f7 100644 --- a/templates/repo/commits_list_small.tmpl +++ b/templates/repo/commits_list_small.tmpl @@ -38,7 +38,7 @@ - {{RenderCommitMessageLinkSubject $.root.Context .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}} + {{RenderCommitMessageLinkSubject $.root.Context .Message $commitLink ($.comment.Issue.PullRequest.BaseRepo.ComposeMetas ctx)}} {{if IsMultilineCommitMessage .Message}} {{end}} diff --git a/templates/repo/diff/blob_excerpt.tmpl b/templates/repo/diff/blob_excerpt.tmpl index 201bff805a04..8312b5d913ad 100644 --- a/templates/repo/diff/blob_excerpt.tmpl +++ b/templates/repo/diff/blob_excerpt.tmpl @@ -27,7 +27,7 @@ {{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}} {{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} - {{if $line.LeftIdx}}{{end}} + {{if $line.LeftIdx}}{{end}} {{/* */}}{{if $line.LeftIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/* */}}{{/* @@ -35,7 +35,7 @@ */}} {{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}{{end}} - {{if $line.RightIdx}}{{end}} + {{if $line.RightIdx}}{{end}} {{/* */}}{{if $line.RightIdx}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{else}}{{/* */}}{{/* @@ -73,7 +73,7 @@ {{end}} {{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}} {{if $inlineDiff.EscapeStatus.Escaped}}{{end}} - + {{$inlineDiff.Content}} {{end}} diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 555ffafc6289..5327b7f02c80 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -119,7 +119,7 @@ {{svg "octicon-chevron-down" 18}} {{end}} -
+
{{if $file.IsBin}} {{ctx.Locale.Tr "repo.diff.bin"}} @@ -128,7 +128,7 @@ {{template "repo/diff/stats" dict "file" . "root" $}} {{end}}
- {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}} + {{if $file.IsRenamed}}{{$file.OldName}} → {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{ctx.Locale.Tr "repo.stored_lfs"}}){{end}} {{if $file.IsGenerated}} {{ctx.Locale.Tr "repo.diff.generated"}} @@ -139,9 +139,9 @@ {{if and $file.Mode $file.OldMode}} {{$old := ctx.Locale.Tr ($file.ModeTranslationKey $file.OldMode)}} {{$new := ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} - {{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}} + {{ctx.Locale.Tr "git.filemode.changed_filemode" $old $new}} {{else if $file.Mode}} - {{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} + {{ctx.Locale.Tr ($file.ModeTranslationKey $file.Mode)}} {{end}}
diff --git a/templates/repo/diff/section_split.tmpl b/templates/repo/diff/section_split.tmpl index 5af5da09b40e..67e2b195de34 100644 --- a/templates/repo/diff/section_split.tmpl +++ b/templates/repo/diff/section_split.tmpl @@ -44,7 +44,7 @@ {{- $rightDiff := ""}}{{if $match.RightIdx}}{{$rightDiff = $section.GetComputedInlineDiffFor $match ctx.Locale}}{{end}} {{if $line.LeftIdx}}{{if $leftDiff.EscapeStatus.Escaped}}{{end}}{{end}} - + {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{end}}{{end}} - {{if $match.RightIdx}}{{end}} + {{if $match.RightIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/* */}}{{end}}{{end}} - {{if $line.LeftIdx}}{{end}} + {{if $line.LeftIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 2))}}{{/* */}}{{end}}{{end}} - {{if $line.RightIdx}}{{end}} + {{if $line.RightIdx}}{{end}} {{/* */}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/* */}} {{- end -}} - + {{if eq .GetType 4}} {{/* */}}{{template "repo/diff/section_code" dict "diff" $inlineDiff}}{{/* diff --git a/templates/repo/file_info.tmpl b/templates/repo/file_info.tmpl index 0fb56a9a19f4..86c613e3a11d 100644 --- a/templates/repo/file_info.tmpl +++ b/templates/repo/file_info.tmpl @@ -1,4 +1,4 @@ -
+
{{if .FileIsSymlink}}
{{ctx.Locale.Tr "repo.symbolic_link"}} diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl index 9da6c48c8e08..3139022bb4fa 100644 --- a/templates/repo/release/list.tmpl +++ b/templates/repo/release/list.tmpl @@ -11,7 +11,7 @@
{{svg "octicon-tag" 16 "tw-mr-1"}}{{$release.TagName}} {{if and $release.Sha1 ($.Permission.CanRead $.UnitTypeCode)}} - {{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha $release.Sha1}} + {{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha $release.Sha1}} {{template "repo/branch_dropdown" dict "root" $ "release" $release}} {{end}}
diff --git a/templates/repo/settings/lfs.tmpl b/templates/repo/settings/lfs.tmpl index dca4d1f1ced5..e0864ff22131 100644 --- a/templates/repo/settings/lfs.tmpl +++ b/templates/repo/settings/lfs.tmpl @@ -12,7 +12,7 @@ {{range .LFSFiles}} - + {{ShortSha .Oid}} diff --git a/templates/repo/settings/lfs_pointers.tmpl b/templates/repo/settings/lfs_pointers.tmpl index fa2e376ff386..a0bb8c46f0d9 100644 --- a/templates/repo/settings/lfs_pointers.tmpl +++ b/templates/repo/settings/lfs_pointers.tmpl @@ -32,12 +32,12 @@ {{range .Pointers}} - + {{ShortSha .SHA}} - + {{ShortSha .Oid}} diff --git a/templates/repo/tag/list.tmpl b/templates/repo/tag/list.tmpl index a107bd1ad342..5378a8a32222 100644 --- a/templates/repo/tag/list.tmpl +++ b/templates/repo/tag/list.tmpl @@ -29,7 +29,7 @@ {{svg "octicon-clock" 16 "tw-mr-1"}}{{TimeSinceUnix .CreatedUnix ctx.Locale}} {{end}} - {{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha .Sha1}} + {{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha .Sha1}} {{if not $.DisableDownloadSourceArchives}} {{svg "octicon-file-zip" 16 "tw-mr-1"}}ZIP diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl index c6e86133cdf4..96fcf04cef64 100644 --- a/templates/shared/combomarkdowneditor.tmpl +++ b/templates/shared/combomarkdowneditor.tmpl @@ -49,7 +49,7 @@ Template Attributes:
diff --git a/web_src/css/base.css b/web_src/css/base.css index 07f15cac2b33..18db136bc957 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -62,10 +62,17 @@ pre, code, kbd, samp { - font-size: 0.9em; /* compensate for monospace fonts being usually slightly larger */ font-family: var(--fonts-monospace); } +pre, +code, +kbd, +samp, +.tw-font-mono { + font-size: 0.95em; /* compensate for monospace fonts being usually slightly larger */ +} + b, strong, h1, diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 66d0f032576a..13962f19d7cb 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -3,11 +3,6 @@ Gitea's tailwind-style CSS helper classes have `gt-` prefix. Gitea's private styles use `g-` prefix. */ -.gt-mono { - font-family: var(--fonts-monospace) !important; - font-size: .95em !important; /* compensate for monospace fonts being usually slightly larger */ -} - .gt-word-break { word-wrap: break-word !important; word-break: break-word; /* compat: Safari */ diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue index cbb1f20873f8..352d08573184 100644 --- a/web_src/js/components/DiffCommitSelector.vue +++ b/web_src/js/components/DiffCommitSelector.vue @@ -252,7 +252,7 @@ export default {
-
+
{{ commit.short_sha }}
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue index bc6f1bee7d38..916780d9137d 100644 --- a/web_src/js/components/DiffFileList.vue +++ b/web_src/js/components/DiffFileList.vue @@ -47,7 +47,7 @@ export default {
  - {{ file.Name }} + {{ file.Name }}
  • {{ store.tooManyFilesMessage }} diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js index 1e728ca2010a..d3fab375a939 100644 --- a/web_src/js/features/comp/ComboMarkdownEditor.js +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -105,7 +105,7 @@ class ComboMarkdownEditor { e.preventDefault(); const enabled = localStorage?.getItem('markdown-editor-monospace') !== 'true'; localStorage.setItem('markdown-editor-monospace', String(enabled)); - this.textarea.classList.toggle('gt-mono', enabled); + this.textarea.classList.toggle('tw-font-mono', enabled); const text = monospaceButton.getAttribute(enabled ? 'data-disable-text' : 'data-enable-text'); monospaceButton.setAttribute('data-tooltip-content', text); monospaceButton.setAttribute('aria-checked', String(enabled));