mirror of
https://github.com/go-gitea/gitea.git
synced 2024-11-26 10:14:08 +08:00
Show language name on hover (#20923)
Each repo has a bar which shows the used programming languages. If you want to know, what language is behind a color, you need to click the bar. With this PR, you just need to hover over the color the view the name.
This commit is contained in:
parent
b8818a1c68
commit
96a9e15dff
|
@ -39,7 +39,7 @@
|
||||||
</div>
|
</div>
|
||||||
<a class="ui segment language-stats">
|
<a class="ui segment language-stats">
|
||||||
{{range .LanguageStats}}
|
{{range .LanguageStats}}
|
||||||
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}"> </div>
|
<div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-placement="top" data-content={{ .Language }}> </div>
|
||||||
{{end}}
|
{{end}}
|
||||||
</a>
|
</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
|
|
@ -3,7 +3,7 @@ import tippy from 'tippy.js';
|
||||||
export function createTippy(target, opts = {}) {
|
export function createTippy(target, opts = {}) {
|
||||||
const instance = tippy(target, {
|
const instance = tippy(target, {
|
||||||
appendTo: document.body,
|
appendTo: document.body,
|
||||||
placement: 'top-start',
|
placement: target.getAttribute('data-placement') || 'top-start',
|
||||||
animation: false,
|
animation: false,
|
||||||
allowHTML: false,
|
allowHTML: false,
|
||||||
maxWidth: 500, // increase over default 350px
|
maxWidth: 500, // increase over default 350px
|
||||||
|
|
Loading…
Reference in New Issue
Block a user