@@ -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. |
@@ -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) |
@@ -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) |
@@ -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) |
@@ -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) |
@@ -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; |