From eaa67671ccab8758fd194a46491790ea2a8045a9 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sun, 2 Oct 2022 10:13:44 +0800 Subject: [PATCH] Fix doc and heatmap for the Vue3 refactoring (#21312) --- .../doc/developers/guidelines-frontend.md | 8 +++--- docs/content/page/index.en-us.md | 2 +- docs/content/page/index.fr-fr.md | 2 +- docs/content/page/index.zh-cn.md | 2 +- docs/content/page/index.zh-tw.md | 2 +- web_src/less/features/heatmap.less | 28 ++++++++----------- 6 files changed, 20 insertions(+), 24 deletions(-) diff --git a/docs/content/doc/developers/guidelines-frontend.md b/docs/content/doc/developers/guidelines-frontend.md index 87272d023f..337499c953 100644 --- a/docs/content/doc/developers/guidelines-frontend.md +++ b/docs/content/doc/developers/guidelines-frontend.md @@ -21,7 +21,7 @@ menu: ## Background -Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue2](https://vuejs.org/v2/guide/) for its frontend. +Gitea uses [Less CSS](https://lesscss.org), [Fomantic-UI](https://fomantic-ui.com/introduction/getting-started.html) (based on [jQuery](https://api.jquery.com)) and [Vue3](https://vuejs.org/) for its frontend. The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template). @@ -44,7 +44,7 @@ We recommend [Google HTML/CSS Style Guide](https://google.github.io/styleguide/h 4. jQuery events across different features could use their own namespaces if there are potential conflicts. 5. CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names with 2-3 feature related keywords to overwrite framework styles. 6. The backend can pass complex data to the frontend by using `ctx.PageData["myModuleData"] = map[]{}` -7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future). +7. Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue3. ### Framework Usage @@ -97,6 +97,6 @@ However, there are still some special cases, so the current guideline is: A lot of legacy code already existed before this document's written. It's recommended to refactor legacy code to follow the guidelines. -### Vue2/Vue3 and JSX +### Vue3 and JSX -Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated. +Gitea is using Vue3 now. We decided not to introduce JSX to keep the HTML and the JavaScript code separated. diff --git a/docs/content/page/index.en-us.md b/docs/content/page/index.en-us.md index c3ee996f0b..a0923db72a 100644 --- a/docs/content/page/index.en-us.md +++ b/docs/content/page/index.en-us.md @@ -287,7 +287,7 @@ You can try it out using [the online demo](https://try.gitea.io/). - UI frameworks: - [jQuery](https://jquery.com) - [Fomantic UI](https://fomantic-ui.com) - - [Vue2](https://vuejs.org) + - [Vue3](https://vuejs.org) - and various components (see package.json) - Editors: - [CodeMirror](https://codemirror.net) diff --git a/docs/content/page/index.fr-fr.md b/docs/content/page/index.fr-fr.md index 39d7ff8df3..2eccf70bf3 100755 --- a/docs/content/page/index.fr-fr.md +++ b/docs/content/page/index.fr-fr.md @@ -258,7 +258,7 @@ Le but de ce projet est de fournir de la manière la plus simple, la plus rapide - Interface graphique : - [jQuery](https://jquery.com) - [Fomantic UI](https://fomantic-ui.com) - - [Vue2](https://vuejs.org) + - [Vue3](https://vuejs.org) - [CodeMirror](https://codemirror.net) - [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) - [Monaco Editor](https://microsoft.github.io/monaco-editor) diff --git a/docs/content/page/index.zh-cn.md b/docs/content/page/index.zh-cn.md index 1c94f8ea78..5af67f5531 100644 --- a/docs/content/page/index.zh-cn.md +++ b/docs/content/page/index.zh-cn.md @@ -52,7 +52,7 @@ Gitea的首要目标是创建一个极易安装，运行非常快速，安装和 - UI 框架： - [jQuery](https://jquery.com) - [Fomantic UI](https://fomantic-ui.com) - - [Vue2](https://vuejs.org) + - [Vue3](https://vuejs.org) - 更多组件参见 package.json - 编辑器： - [CodeMirror](https://codemirror.net) diff --git a/docs/content/page/index.zh-tw.md b/docs/content/page/index.zh-tw.md index 3dde97a943..368be02de9 100644 --- a/docs/content/page/index.zh-tw.md +++ b/docs/content/page/index.zh-tw.md @@ -271,7 +271,7 @@ Gitea 是從 [Gogs](http://gogs.io) Fork 出來的，請閱讀部落格文章 [G - UI 元件： - [jQuery](https://jquery.com) - [Fomantic UI](https://fomantic-ui.com) - - [Vue2](https://vuejs.org) + - [Vue3](https://vuejs.org) - [CodeMirror](https://codemirror.net) - [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) - [Monaco Editor](https://microsoft.github.io/monaco-editor) diff --git a/web_src/less/features/heatmap.less b/web_src/less/features/heatmap.less index 952d6f35ed..a6280e8b51 100644 --- a/web_src/less/features/heatmap.less +++ b/web_src/less/features/heatmap.less @@ -1,31 +1,27 @@ #user-heatmap { width: 100%; - text-align: center; + font-size: 9px; position: relative; min-height: 125px; - align-items: center; - justify-content: center; + + text { + fill: currentcolor !important; + } // for the "Less" and "More" legend + .vch__legend .vch__legend { + display: flex; + font-size: 11px; + align-items: center; + justify-content: right; + } .vch__legend .vch__legend div:first-child, .vch__legend .vch__legend div:last-child { display: inline-block; padding: 0 5px; } - > svg { - width: 100%; - } - - svg:not(:root) { - overflow: inherit; - padding: 0 !important; - } - - text { - fill: currentcolor !important; - } - + // move the "? contributions in the last ? months" text from top to bottom .total-contributions { font-size: 11px; position: absolute;