realaravinth/forgejo-federation
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity

Show language name on hover (#20923)

Browse source 
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:
JakobDev 2022-09-03 00:06:54 +02:00 committed by GitHub
parent b8818a1c68
commit 96a9e15dff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 2 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/sub_menu.tmpl
View file

@ -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}}">&nbsp;</div> <div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-placement="top" data-content={{ .Language }}>&nbsp;</div>
{{end}} {{end}}
</a> </a>
{{end}} {{end}}

2
web_src/js/modules/tippy.js
View file

@ -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