## Background | ## 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). | The HTML pages are rendered by [Go HTML Template](https://pkg.go.dev/html/template). | ||||
4. jQuery events across different features could use their own namespaces if there are potential conflicts. | 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. | 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[]{}` | 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 | ### Framework Usage | ||||
A lot of legacy code already existed before this document's written. It's recommended to refactor legacy code to follow the guidelines. | 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. |
- UI frameworks: | - UI frameworks: | ||||
- [jQuery](https://jquery.com) | - [jQuery](https://jquery.com) | ||||
- [Fomantic UI](https://fomantic-ui.com) | - [Fomantic UI](https://fomantic-ui.com) | ||||
- [Vue2](https://vuejs.org) | |||||
- [Vue3](https://vuejs.org) | |||||
- and various components (see package.json) | - and various components (see package.json) | ||||
- Editors: | - Editors: | ||||
- [CodeMirror](https://codemirror.net) | - [CodeMirror](https://codemirror.net) |
- Interface graphique : | - Interface graphique : | ||||
- [jQuery](https://jquery.com) | - [jQuery](https://jquery.com) | ||||
- [Fomantic UI](https://fomantic-ui.com) | - [Fomantic UI](https://fomantic-ui.com) | ||||
- [Vue2](https://vuejs.org) | |||||
- [Vue3](https://vuejs.org) | |||||
- [CodeMirror](https://codemirror.net) | - [CodeMirror](https://codemirror.net) | ||||
- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) | - [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) | ||||
- [Monaco Editor](https://microsoft.github.io/monaco-editor) | - [Monaco Editor](https://microsoft.github.io/monaco-editor) |
- UI 框架: | - UI 框架: | ||||
- [jQuery](https://jquery.com) | - [jQuery](https://jquery.com) | ||||
- [Fomantic UI](https://fomantic-ui.com) | - [Fomantic UI](https://fomantic-ui.com) | ||||
- [Vue2](https://vuejs.org) | |||||
- [Vue3](https://vuejs.org) | |||||
- 更多组件参见 package.json | - 更多组件参见 package.json | ||||
- 编辑器: | - 编辑器: | ||||
- [CodeMirror](https://codemirror.net) | - [CodeMirror](https://codemirror.net) |
- UI 元件: | - UI 元件: | ||||
- [jQuery](https://jquery.com) | - [jQuery](https://jquery.com) | ||||
- [Fomantic UI](https://fomantic-ui.com) | - [Fomantic UI](https://fomantic-ui.com) | ||||
- [Vue2](https://vuejs.org) | |||||
- [Vue3](https://vuejs.org) | |||||
- [CodeMirror](https://codemirror.net) | - [CodeMirror](https://codemirror.net) | ||||
- [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) | - [EasyMDE](https://github.com/Ionaru/easy-markdown-editor) | ||||
- [Monaco Editor](https://microsoft.github.io/monaco-editor) | - [Monaco Editor](https://microsoft.github.io/monaco-editor) |
#user-heatmap { | #user-heatmap { | ||||
width: 100%; | width: 100%; | ||||
text-align: center; | |||||
font-size: 9px; | |||||
position: relative; | position: relative; | ||||
min-height: 125px; | min-height: 125px; | ||||
align-items: center; | |||||
justify-content: center; | |||||
text { | |||||
fill: currentcolor !important; | |||||
} | |||||
// for the "Less" and "More" legend | // 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:first-child, | ||||
.vch__legend .vch__legend div:last-child { | .vch__legend .vch__legend div:last-child { | ||||
display: inline-block; | display: inline-block; | ||||
padding: 0 5px; | 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 { | .total-contributions { | ||||
font-size: 11px; | font-size: 11px; | ||||
position: absolute; | position: absolute; |